/* Perfloom landing. System fonts only: the page promises privacy, so it loads nothing from third parties. */

:root {
  color-scheme: light dark;

  --paper: #f6f7f9;
  --surface: #ffffff;
  --sunken: #eef0f4;
  --ink: #161c26;
  --ink-soft: #566173;
  --rule: #e1e4ea;
  --rule-strong: #c9ced8;
  --action: #2160c4;
  --action-hover: #1a4fa6;
  --action-ink: #ffffff;
  --ring: rgb(33 96 196 / 0.28);
  --good: #0a7d45;
  --good-bg: #e3f4ea;
  --poor: #c2362b;
  --poor-bg: #fbe9e7;
  --shadow: 0 1px 2px rgb(22 28 38 / 0.06), 0 4px 16px rgb(22 28 38 / 0.05);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23566173' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --measure: 38rem;
  --wide: 60rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --control: 2.5rem;
  --radius: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f1319;
    --surface: #171c24;
    --sunken: #11161d;
    --ink: #e9ecf1;
    --ink-soft: #9aa4b2;
    --rule: #262d38;
    --rule-strong: #343d4a;
    --action: #5b93ef;
    --action-hover: #77a6f3;
    --action-ink: #0b0f15;
    --ring: rgb(91 147 239 / 0.35);
    --good: #4cc78b;
    --good-bg: rgb(76 199 139 / 0.12);
    --poor: #f07b70;
    --poor-bg: rgb(240 123 112 / 0.12);
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.25);
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%239aa4b2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--action);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
}

/* Header and footer */

.site-header {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 1rem var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.wordmark {
  color: var(--ink);
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.header-cta {
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  color: var(--ink);
  background: var(--surface);
}

.header-cta:hover {
  border-color: var(--action);
  color: var(--action);
}

/* The rule spans the content width only, not the gutters. */
.site-footer {
  width: min(calc(100% - 2 * var(--gutter)), calc(var(--wide) - 2 * var(--gutter)));
  margin: 5rem auto 0;
  padding: 1.25rem 0 2rem;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem 1.5rem;
  flex-wrap: wrap;
  color: var(--ink-soft);
  font-size: 0.875rem;
}

.site-footer p {
  margin: 0;
}

.footer-links {
  display: flex;
  gap: 1.25rem;
}

/* Every section shares the header's left edge; only running text is held to the reading measure. */
main > section {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.lede,
.points dl,
.points h2 {
  max-width: var(--measure);
}

/* Hero */

main > .hero {
  padding-top: clamp(2.5rem, 9vw, 6rem);
}

h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 800;
  margin: 0 0 1.25rem;
  max-width: 19ch;
  text-wrap: balance;
}

.lede {
  font-size: 1.125rem;
  color: var(--ink-soft);
  margin: 0 0 3rem;
  text-wrap: pretty;
}

h2 {
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
}

/* Demo card: the one bold element on the page. */

main > .demo {
  margin-bottom: 5rem;
}

.demo-caption {
  margin: 0 0 0.625rem;
  color: var(--ink-soft);
  font-size: 0.875rem;
}

.demo-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.warning {
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--rule);
}

.warning strong {
  font-size: 1.0625rem;
}

.warning-detail {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  color: var(--ink-soft);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.rating-poor {
  color: var(--poor);
  background: var(--poor-bg);
  font-weight: 600;
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
}

/* PageSpeed's own vocabulary: a red triangle for poor. */
.metric-poor {
  flex: none;
  width: 0;
  height: 0;
  border-left: 0.4375rem solid transparent;
  border-right: 0.4375rem solid transparent;
  border-bottom: 0.75rem solid var(--poor);
}

/* Segmented control */
.stack-picker {
  display: flex;
  gap: 0.25rem;
  margin: 1rem 1.25rem 0;
  padding: 0.25rem;
  background: var(--sunken);
  border: 1px solid var(--rule);
  border-radius: 10px;
}

.stack-picker button {
  flex: 1 1 0;
  min-height: 2.25rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.375rem 0.75rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition:
    background-color 120ms,
    color 120ms;
}

.stack-picker button:hover {
  color: var(--ink);
}

.stack-picker button[aria-selected='true'] {
  background: var(--surface);
  color: var(--ink);
  box-shadow:
    0 1px 2px rgb(22 28 38 / 0.12),
    0 0 0 1px var(--rule);
}

.stack-picker button:focus-visible {
  outline-offset: -2px;
}

@media (max-width: 40rem) {
  .stack-picker {
    flex-direction: column;
  }
}

.fix {
  padding: 1.25rem;
}

.fix-summary {
  margin: 0 0 1rem;
  font-weight: 600;
}

.steps {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding: 0.125rem 0 0 2.25rem;
  margin-bottom: 0.75rem;
  line-height: 1.75;
}

/* A numbered step: the order matters (purge after changing settings). */
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.2rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--sunken);
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.375rem;
  text-align: center;
}

/* A WordPress admin path: menu labels separated by drawn chevrons. */
.path {
  font-weight: 500;
}

.path > .seg {
  white-space: nowrap;
}

/* Text separator for screen readers and copy-paste; the drawn chevron is what people see. */
.path > .sep {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.path > .seg:not(:first-child)::before {
  content: '';
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  margin: 0 0.5rem 0.1em 0.3rem;
  border-top: 1.5px solid var(--ink-soft);
  border-right: 1.5px solid var(--ink-soft);
  transform: rotate(45deg);
  vertical-align: middle;
}

.value {
  display: inline-block;
  margin-left: 0.375rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: var(--good-bg);
  color: var(--good);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5rem;
  white-space: nowrap;
}

.caveat {
  margin: 0;
  padding: 0.75rem 0.875rem;
  background: var(--sunken);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: 0.875rem;
}

.demo-note {
  margin: 0.75rem 0 0;
  color: var(--ink-soft);
  font-size: 0.8125rem;
}

/* Value points: a plain definition list, not cards. */

main > .points {
  margin-bottom: 5rem;
}

.points dl {
  margin: 0;
}

.points dl > div {
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
}

.points dt {
  font-weight: 700;
  margin-bottom: 0.125rem;
}

.points dd {
  margin: 0;
  color: var(--ink-soft);
}

/* Signup forms */

.signup {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1.25rem;
  align-items: start;
}

.signup-form {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 1.5rem;
}

.signup-form.agency {
  border-color: var(--action);
  box-shadow: 0 0 0 1px var(--action);
}

.signup-form h2 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.signup-form p {
  margin: 0 0 1.25rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

.signup-form .price {
  margin-bottom: 0.75rem;
  color: var(--ink);
}

.price strong {
  font-size: 1.75rem;
  letter-spacing: -0.03em;
  margin-right: 0.125rem;
}

.signup-form label {
  display: block;
  font-weight: 600;
  margin: 0 0 0.375rem;
  font-size: 0.875rem;
}

.signup-form input,
.signup-form select {
  display: block;
  width: 100%;
  height: var(--control);
  font: inherit;
  font-size: 0.9375rem;
  padding: 0 0.75rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background-color: var(--paper);
  color: var(--ink);
  transition:
    border-color 120ms,
    box-shadow 120ms;
}

.signup-form input::placeholder {
  color: var(--ink-soft);
  opacity: 0.7;
}

.signup-form select {
  appearance: none;
  padding-right: 2.25rem;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.75rem;
  margin-bottom: 1rem;
  cursor: pointer;
}

.signup-form input:focus,
.signup-form select:focus {
  outline: none;
  border-color: var(--action);
  box-shadow: 0 0 0 3px var(--ring);
}

.signup-form input[aria-invalid='true'],
.signup-form select[aria-invalid='true'] {
  border-color: var(--poor);
  box-shadow: 0 0 0 3px var(--poor-bg);
}

/* Email and button share one row; the button drops below on narrow screens. */
.field-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.field-row input {
  flex: 1 1 12rem;
  width: auto;
}

.signup-form button {
  flex: none;
  height: var(--control);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0 1rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--action);
  color: var(--action-ink);
  cursor: pointer;
  transition: background-color 120ms;
}

.signup-form button:hover {
  background: var(--action-hover);
}

.signup-form button[disabled] {
  opacity: 0.6;
  cursor: progress;
}

@media (max-width: 30rem) {
  .field-row button {
    flex: 1 1 100%;
  }
}

.signup-form .status {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  font-weight: 600;
}

.signup-form .status:empty {
  /* Collapsed but still rendered: hiding a live region stops screen readers announcing what appears in it. */
  margin: 0;
}

.signup-form .status[data-state='ok'] {
  color: var(--good);
}

.signup-form .status[data-state='error'] {
  color: var(--poor);
}

/* Honeypot: off-screen for people, still in the DOM for bots. */
.trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.noscript {
  grid-column: 1 / -1;
}

/* Document pages (privacy) use the homepage container: same width and left edge as the header and footer. */

.prose {
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(2.5rem, 9vw, 6rem) var(--gutter) 0;
}


.prose h1 {
  font-size: clamp(2rem, 5vw, 2.75rem);
  margin-bottom: 0.25rem;
}

.prose .meta {
  margin: 0 0 2rem;
  color: var(--ink-soft);
  font-size: 0.875rem;
}

.prose h2 {
  font-size: 1.0625rem;
  margin: 2.25rem 0 0.375rem;
}

.prose p {
  margin: 0;
  color: var(--ink-soft);
}

.summary {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 1.25rem 1.5rem;
}

.prose .summary h2 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.summary ul {
  margin: 0;
  padding-left: 1.125rem;
}

.summary li {
  margin: 0.25rem 0;
}

.summary li::marker {
  color: var(--action);
}

/* Backdrop: a slow aurora, a faint dot grid and the logo's three bars with a light streak running through
   them, fixed behind every page so it stays in view while scrolling. Only transform and opacity animate,
   so it runs on the compositor and causes no layout shift. */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  --glow-a: rgb(33 96 196 / 0.16);
  --glow-b: rgb(124 92 255 / 0.12);
  --glow-c: rgb(14 165 233 / 0.12);
  --dot: rgb(22 28 38 / 0.07);
  --bar-fill: rgb(33 96 196 / 0.07);
  --bar-edge: rgb(33 96 196 / 0.12);
  --streak: rgb(33 96 196 / 0.3);
  --bar-h: clamp(2.75rem, 8vmin, 5.5rem);
}

/* Aurora: two oversized layers of soft radial gradients that drift and turn slowly. */
.backdrop::before,
.backdrop::after {
  content: '';
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(closest-side at 70% 25%, var(--glow-a), transparent),
    radial-gradient(closest-side at 25% 70%, var(--glow-b), transparent);
}

.backdrop::after {
  background: radial-gradient(closest-side at 55% 55%, var(--glow-c), transparent);
  opacity: 0.9;
}

/* Dot grid, fading out towards the edges. */
.backdrop .grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--dot) 1px, transparent 1.5px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 70% 60% at 60% 30%, #000 30%, transparent 75%);
}

.backdrop .bars {
  position: absolute;
  top: 16vh;
  left: 52%;
  display: grid;
  gap: calc(var(--bar-h) * 0.6);
  width: min(44vw, 34rem);
  rotate: -8deg;
}

.backdrop .bars span {
  position: relative;
  height: var(--bar-h);
  overflow: hidden;
  border-radius: calc(var(--bar-h) / 2);
  background: var(--bar-fill);
  box-shadow: inset 0 0 0 1px var(--bar-edge);
}

.backdrop .bars span:nth-child(2) {
  width: 72%;
}

.backdrop .bars span:nth-child(3) {
  width: 44%;
}

.backdrop .bars span::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--streak) 50%, transparent);
  translate: -100% 0;
}

@media (prefers-color-scheme: dark) {
  .backdrop {
    --glow-a: rgb(91 147 239 / 0.2);
    --glow-b: rgb(139 108 255 / 0.16);
    --glow-c: rgb(34 211 238 / 0.1);
    --dot: rgb(233 236 241 / 0.07);
    --bar-fill: rgb(91 147 239 / 0.08);
    --bar-edge: rgb(91 147 239 / 0.16);
    --streak: rgb(119 166 243 / 0.35);
  }
}

@media (max-width: 40rem) {
  .backdrop .bars {
    top: 10vh;
    left: 38%;
    width: 80vw;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .backdrop::before {
    animation: aurora 28s ease-in-out infinite alternate;
  }

  .backdrop::after {
    animation: aurora 36s ease-in-out -12s infinite alternate-reverse;
  }

  .backdrop .bars span::after {
    animation: streak 4.8s cubic-bezier(0.6, 0, 0.3, 1) infinite;
  }

  .backdrop .bars span:nth-child(2)::after {
    animation-delay: 0.35s;
  }

  .backdrop .bars span:nth-child(3)::after {
    animation-delay: 0.7s;
  }

  @keyframes aurora {
    from {
      transform: translate(-6%, -4%) rotate(0deg) scale(1);
    }
    to {
      transform: translate(6%, 5%) rotate(25deg) scale(1.15);
    }
  }

  @keyframes streak {
    0% {
      translate: -100% 0;
    }
    55%,
    100% {
      translate: 100% 0;
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  .fix:not([hidden]) {
    animation: reveal 160ms ease-out;
  }

  @keyframes reveal {
    from {
      opacity: 0;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}