/* VibeCheck landing page styles, in this order:
   1. base: fonts, tokens, reset, layout, type
   2. components: pieces shared across sections
   3. page sections, in page order (nav to footer), then the scroll reveal
   4. survey popup
   5. privacy page
   Section comments note which design variant each section came from. */

/* ---- base ---- */
/* Onest variable font, self-hosted (fonts/OFL.txt). Subsets and ranges from Google Fonts. */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/onest-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/onest-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* arrows and symbols, e.g. the ↗ on the signup button */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/onest-symbols.woff2") format("woff2");
  unicode-range: U+2190-2199, U+21AF, U+21E6-21F0, U+21F3, U+2300-243F, U+25A0-27BF;
}
:root {
  --bg: #ffffff;
  --white: #ffffff;
  --ink: #16171a;
  --muted: #62666f;
  --soft: #f6f5f4;
  --soft2: #eeedeb;
  --line: #e8e7e4;

  /* accent */
  --accent: #0075de;
  --accent-ink: #ffffff;
  --accent-tint: #e6f1fc;
  --accent-strong: #005bb0;

  /* pastel tags */
  --t-red: #fde9e9;
  --t-red-ink: #b42d32;
  --t-orange: #fdeedf;
  --t-orange-ink: #a24a06;
  --t-green: #e3f3e9;
  --t-green-ink: #1b6e3e;
  --t-purple: #efe9fb;
  --t-grey: #efeeec;
  --t-grey-ink: #5f636b;

  /* bright icon fills */
  --c-red: #f0555a;
  --c-orange: #f5821f;
  --c-yellow: #f2b200;
  --c-green: #2fa35b;
  --c-blue: #2383e2;
  --c-purple: #8d5cf6;
  --c-pink: #e04c8a;
  --c-teal: #14a38b;

  --sans: "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r-sm: 10px;
  --shadow: 0 1px 2px rgba(20, 20, 20, 0.04), 0 14px 36px -14px rgba(20, 20, 20, 0.18);

  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 11'%3E%3Ccircle cx='1.5' cy='1.4' r='1.4'/%3E%3Crect x='0.3' y='3.8' width='2.4' height='7.2' rx='1.2'/%3E%3C/svg%3E");
  --i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --i-func: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='4'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E");
  --i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
  --i-rel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.34-5.66'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E");
  --i-ux: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M8.5 14a4 4 0 0 0 7 0M9 9.5h.01M15 9.5h.01'/%3E%3C/svg%3E");
  --i-ops: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l2.5-6 5 12 2.5-6h4'/%3E%3C/svg%3E");
  --i-repo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='2.5'/%3E%3Ccircle cx='6' cy='18' r='2.5'/%3E%3Ccircle cx='18' cy='7' r='2.5'/%3E%3Cpath d='M6 8.5v7M18 9.5v1a4 4 0 0 1-4 4H8.5'/%3E%3C/svg%3E");
  --i-scan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E");
}
* {
  box-sizing: border-box;
}
html {
  color-scheme: light;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
}
[hidden] {
  display: none !important;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.nowrap {
  white-space: nowrap;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 40px);
}

.center {
  text-align: center;
}
/* sections */
.section {
  padding-block: clamp(64px, 9vw, 112px);
}

.band {
  background: var(--soft);
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.section-head .lede {
  margin: 12px 0 0;
}
.section-head.center {
  justify-content: center;
}
.section-head.center .lede {
  margin-inline: auto;
}
/* type */
.h1 {
  font-weight: 700;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1;
  letter-spacing: -0.045em;
  margin: 0;
  text-wrap: balance;
}
.h2 {
  font-weight: 700;
  font-size: clamp(32px, 4.4vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  margin: 0;
  text-wrap: balance;
}

.lede {
  font-size: clamp(18px, 1.7vw, 20px);
  line-height: 1.5;
  color: var(--muted);
  margin: 20px 0 28px;
  max-width: 40ch;
}
.lede .hl {
  color: var(--accent);
  font-weight: 700;
}
.eyebrow {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  margin: 0;
}
.body {
  color: var(--muted);
  font-size: 16px;
  margin: 0;
}

/* ---- components ---- */
/* buttons + form */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 600 15px/1 var(--sans);
  padding: 14px 18px;
  border-radius: var(--r-sm);
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover {
  filter: brightness(0.93);
}
.btn.sm {
  padding: 9px 14px;
  font-size: 14px;
}
.btn.alt {
  background: var(--accent-tint);
  color: var(--accent-strong);
}

.btn.ghost {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
}
form.waitlist {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 460px;
}

form.waitlist input {
  font: inherit;
  font-size: 16px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  flex: 1 1 220px;
  min-width: 0;
  background: var(--white);
  color: var(--ink);
}
form.waitlist input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  border-color: transparent;
}
/* signup and survey error: soft red speech bubble above the email field or the send button (hero-error-messages.html #13k) */
form.waitlist,
.trial .form-row {
  position: relative;
}
.err {
  position: absolute;
  left: 10px;
  bottom: calc(100% + 12px);
  z-index: 1;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid var(--t-red-ink);
  border-radius: var(--r-sm);
  background: var(--t-red);
  color: var(--t-red-ink);
  font-size: 14px;
  line-height: 1.4;
}
.err::before {
  content: "!";
  flex: 0 0 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--t-red-ink);
  color: #fff;
  font: 700 12px/18px var(--sans);
  text-align: center;
}
/* the arrow is a rotated square, so it takes the bubble's fill and border */
.err::after {
  content: "";
  position: absolute;
  left: 22px;
  top: 100%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background: inherit;
  border: inherit;
  border-top: 0;
  border-left: 0;
  border-radius: 0 0 2px 0;
  transform: rotate(45deg);
}
.survey-actions .err {
  left: var(--survey-pad);
  max-width: calc(100% - 2 * var(--survey-pad));
}
/* Turnstile box: its own line, so the hero input keeps its width */
form.waitlist .ts {
  flex-basis: 100%;
  margin-top: -8px;
}
/* waiting for the server: grey the input, swap the button label for a spinner */
form.busy input[type="email"] {
  background: #f1f1f0;
  color: var(--muted);
  cursor: progress;
}
form.busy [type="submit"] {
  position: relative;
  color: transparent;
  cursor: progress;
}
form.busy [type="submit"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border: 2px solid var(--accent-ink);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* results panel */
.panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
  min-width: 0;
  text-align: left;
  font-size: 15px;
}
.panel-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.panel-h b {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.badge {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}

.meter {
  height: 6px;
  background: var(--soft2);
  border-radius: 3px;
  margin-top: 8px;
  overflow: hidden;
}
.meter i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
}

.chip {
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 8px;
  align-self: start;
  margin-top: 2px;
  white-space: nowrap;
}
.chip.high {
  background: var(--t-red);
  color: var(--t-red-ink);
}
.chip.med {
  background: var(--t-orange);
  color: var(--t-orange-ink);
}
.chip.low {
  background: var(--t-grey);
  color: var(--t-grey-ink);
}
.chip.done {
  background: var(--t-green);
  color: var(--t-green-ink);
}
.tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  padding: 1px 7px;
  white-space: nowrap;
}
.tag.red {
  background: var(--t-red);
  color: var(--t-red-ink);
}
/* checklist rows */
.checks {
  list-style: none;
  margin: 0;
  padding: 6px 12px 12px;
}
.checks li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 6px;
  font-size: 15px;
}
.box {
  flex: 0 0 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid #cfcdc9;
  margin-top: 2px;
  position: relative;
}
.box.on {
  background: var(--accent);
  border-color: var(--accent);
}
.box.on::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--accent-ink);
  -webkit-mask: var(--i-check) center/contain no-repeat;
  mask: var(--i-check) center/contain no-repeat;
}
.checks small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
/* markdown fix card */
.md-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
  min-width: 0;
  text-align: left;
}
.md-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 16px;
  border-bottom: 1px solid var(--line);
  font: 400 13px var(--mono);
  color: var(--muted);
}
.md {
  margin: 0;
  padding: 18px 20px 22px;
  font: 400 13px/1.75 var(--mono);
  white-space: pre-wrap;
  color: var(--ink);
  overflow-x: auto;
}
.md .h {
  color: #a3a6ad;
}
.md b {
  font-weight: 600;
}
/* category icons */
.ico {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c, var(--ink));
  flex: 0 0 auto;
}
.ico::after {
  content: "";
  width: 20px;
  height: 20px;
  background: #fff;
  -webkit-mask: var(--i) center/contain no-repeat;
  mask: var(--i) center/contain no-repeat;
}
.ico.sm {
  width: 28px;
  height: 28px;
}
.ico.sm::after {
  width: 15px;
  height: 15px;
}
.i-func {
  --i: var(--i-func);
}
.i-lock {
  --i: var(--i-lock);
}
.i-rel {
  --i: var(--i-rel);
}
.i-ux {
  --i: var(--i-ux);
}
.i-ops {
  --i: var(--i-ops);
}
.i-repo {
  --i: var(--i-repo);
}

.i-scan {
  --i: var(--i-scan);
}
.i-check {
  --i: var(--i-check);
}
.c-red {
  --c: var(--c-red);
}
.c-orange {
  --c: var(--c-orange);
}
.c-yellow {
  --c: var(--c-yellow);
}
.c-green {
  --c: var(--c-green);
}
.c-blue {
  --c: var(--c-blue);
}
.c-purple {
  --c: var(--c-purple);
}

.c-teal {
  --c: var(--c-teal);
}
/* readiness score and per-area rows */
.score {
  display: grid;
  gap: 6px;
}
.score .l {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.score .v {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.score .meter {
  height: 10px;
  border-radius: 5px;
  margin-top: 2px;
}
.score .meter i {
  border-radius: 5px;
  transition: width 0.4s ease;
}
.arow {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.arow:last-child {
  border-bottom: 0;
}
.arow .c {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.arow .meter {
  grid-column: 1 / 4;
  margin-top: 0;
}

/* ---- page sections ---- */
/* nav */
nav.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 18px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.logo-mark {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--ink);
  position: relative;
  flex: 0 0 auto;
}
.logo-mark::after {
  content: "";
  position: absolute;
  inset: 5px;
  background: #fff;
  -webkit-mask: var(--i-check) center/contain no-repeat;
  mask: var(--i-check) center/contain no-repeat;
}
.navlinks {
  display: flex;
  gap: 28px;
  font-size: 15px;
  font-weight: 500;
}
.navlinks a {
  text-decoration: none;
  color: var(--ink);
  opacity: 0.8;
}
.navlinks a:hover {
  opacity: 1;
}
@media (max-width: 760px) {
  .navlinks {
    display: none;
  }
}

/* hero */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--t-orange-ink);
  background: var(--t-orange);
  border-radius: 999px;
  padding: 5px 12px 5px 8px;
  margin-bottom: 20px;
}
.hero-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-orange);
}
/* hero signup: the form and the success box share one grid cell (hero-success-animations.html #23).
   On signup the button shrinks to a circle, a tick draws in, and a green box grows out from it.
   main.js measures the button and sets --h (its height), --s (tick scale), --x/--y (tick offset) and --clip (box start shape). */
.signup {
  display: grid;
  max-width: 460px;
}
.signup > * {
  grid-area: 1 / 1;
}
.signup form.waitlist {
  align-self: start;
}
/* narrow screens: keep the wrapped button on its own line while it shrinks */
form.waitlist.stacked input {
  flex-basis: 100%;
}
.joined {
  position: relative; /* above the form, which is positioned too */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 16px;
  border-radius: var(--r-sm);
  background: var(--t-green);
  color: var(--t-green-ink);
  font-size: 15px;
  line-height: 1.5;
}
.joined:focus {
  outline: none;
}
.joined p {
  flex: 1;
  margin: 0;
}
.joined b {
  font-weight: 600;
}
.joined .tick {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 51px;
  height: 51px;
  border-radius: 50%;
  background: var(--c-green);
  color: #fff;
}
.joined .tick svg {
  width: 46%;
  height: 46%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 14;
}
.signup.done form.waitlist {
  visibility: hidden;
  animation: joined-hold 0.45s;
}
.signup.done form.waitlist input {
  animation: joined-fade-out 0.25s forwards;
}
.signup.done form.waitlist [type="submit"] {
  overflow: hidden;
  animation: joined-shrink 0.4s cubic-bezier(0.5, 0, 0.2, 1) forwards;
}
.signup.done .joined {
  animation:
    joined-fade-in 0.1s 0.38s backwards,
    joined-grow 0.45s 0.75s cubic-bezier(0.5, 0, 0.2, 1) backwards;
}
.signup.done .joined .tick {
  animation: joined-nudge 0.45s 0.75s cubic-bezier(0.5, 0, 0.2, 1) backwards;
}
.signup.done .joined path {
  animation: joined-draw 0.35s 0.42s ease-out backwards;
}
.signup.done .joined p {
  animation: joined-fade-in 0.35s 0.95s backwards;
}
@keyframes joined-hold {
  from,
  to {
    visibility: visible;
  }
}
@keyframes joined-fade-in {
  from {
    opacity: 0;
  }
}
@keyframes joined-fade-out {
  to {
    opacity: 0;
  }
}
@keyframes joined-shrink {
  from {
    max-width: 240px;
  }
  30% {
    color: transparent;
  }
  to {
    max-width: var(--h);
    padding-inline: 0;
    border-radius: 50%;
    background: var(--c-green);
    color: transparent;
  }
}
@keyframes joined-grow {
  from {
    clip-path: inset(var(--clip) round calc(var(--h) / 2));
  }
  to {
    clip-path: inset(0 round var(--r-sm));
  }
}
@keyframes joined-nudge {
  from {
    transform: translate(var(--x), var(--y)) scale(var(--s));
  }
}
@keyframes joined-draw {
  from {
    stroke-dashoffset: 14;
  }
}
/* hero: fanned cards */
.hero {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
  padding-block: clamp(40px, 6vw, 72px) clamp(64px, 9vw, 112px);
}
.fan {
  position: relative;
  min-height: 500px;
}
.fan > * {
  position: absolute;
  width: min(400px, 82%);
  transition: transform 0.25s;
}
.fan .f1 {
  left: 0;
  top: 40px;
  transform: rotate(-5deg);
}
.fan .f2 {
  left: 16%;
  top: 0;
  transform: rotate(1deg);
  z-index: 1;
}
.fan .f3 {
  right: 0;
  top: 230px;
  transform: rotate(4deg);
  z-index: 2;
}
.fan > *:hover {
  transform: rotate(0) translateY(-6px);
  z-index: 3;
}
.fan .md {
  font-size: 12px;
  padding: 14px 16px 16px;
}
.fan .f2 .pad {
  padding: 16px 18px;
}
/* readiness card: default blue overall bar, light grey area bars (based on hero-readiness-card #1) */
.fan .f2 .arow .meter i {
  background: #cfcdc9;
}
/* one column: the fan keeps its desktop layout at a fixed width, zoomed down to fit (tan(atan2()) turns the width ratio into a number) */
@media (max-width: 960px) {
  .hero {
    grid-template-columns: 1fr;
    container-type: inline-size;
  }
  .fan {
    width: 460px;
    min-height: 600px;
    margin-inline: auto;
    zoom: min(1, tan(atan2(100cqw, 460px)));
  }
  /* keep the rotated corners on screen */
  .fan .f1 {
    left: 3%;
  }
  .fan .f3 {
    right: 3%;
  }
}
/* hero: issues found after a rescan (hero-issues-found.html #08) */
.delta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 8px;
  flex-wrap: wrap;
}
.delta .was {
  font-size: 40px;
  font-weight: 700;
  color: #b9b7b2;
  text-decoration: line-through;
  letter-spacing: -0.04em;
  line-height: 1;
}
.delta .now {
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
}
.delta .arr {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  position: relative;
}
.delta .arr::after {
  content: "";
  position: absolute;
  inset: 7px;
  background: #fff;
  -webkit-mask: var(--i-arrow) center/contain no-repeat;
  mask: var(--i-arrow) center/contain no-repeat;
}
.delta small {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 13px;
}
.ilist {
  list-style: none;
  margin: 0;
  padding: 4px 12px 6px;
}
.ilist li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 11px 6px;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.ilist li:last-child {
  border-bottom: 0;
}
.ilist .chip {
  min-width: 62px;
  text-align: center;
}
.ilist b {
  display: block;
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.35;
}
.ilist small {
  color: var(--muted);
  font-size: 12px;
}
.ilist li.fixed b {
  color: var(--muted);
  text-decoration: line-through;
}

/* centred section heading (what can go wrong, options, comparison) */
.center-head {
  margin: 0 auto clamp(28px, 4vw, 48px);
  max-width: 860px;
  text-align: center;
}
.center-head .lede {
  margin: 14px auto 0;
  max-width: 54ch;
  text-wrap: balance;
}

/* what can go wrong: founder's worries (landing-go-wrong #05) */
.gowrong {
  padding-block: clamp(64px, 9vw, 112px);
}
.thoughts {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 980px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 16px 14px;
}
.thoughts li {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 14px 20px;
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 500;
  box-shadow: var(--shadow);
  transform: rotate(var(--r, 0deg));
}
.thoughts li::after {
  content: "";
  position: absolute;
  left: 24px;
  bottom: -9px;
  width: 12px;
  height: 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 50%;
}
.thoughts li:nth-child(1) { --r: -2deg; }
.thoughts li:nth-child(2) { --r: 1.5deg; margin-top: 18px; }
.thoughts li:nth-child(3) { --r: -1deg; }
.thoughts li:nth-child(4) { --r: 2deg; margin-top: 10px; }
.thoughts li:nth-child(5) { --r: -1.5deg; }
.thoughts li:nth-child(6) {
  --r: 1deg;
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.thoughts li:nth-child(6)::after {
  background: var(--ink);
  border-color: var(--ink);
}
.hope {
  margin: clamp(32px, 4vw, 48px) 0 0;
  text-align: center;
  font-size: clamp(18px, 1.8vw, 21px);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.hope b {
  color: var(--accent);
}
.hope .tick-c {
  margin-right: 12px;
  vertical-align: middle;
}
.tick-c {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-grid;
  place-items: center;
}
.tick-c::after {
  content: "";
  width: 15px;
  height: 15px;
  background: #fff;
  -webkit-mask: var(--i-check) center/contain no-repeat;
  mask: var(--i-check) center/contain no-repeat;
}

/* who checks your app: three option cards (landing-no-eng #12) */
.opts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: center;
}
.opts li {
  position: relative;
  background: var(--white);
  border-radius: 20px;
  padding: 28px;
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
}
.opts h3 {
  margin: 0 0 10px;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.opts p {
  margin: 0 0 12px;
}
.opts .lbl {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.opts li.pick {
  border: 2px solid var(--accent);
  padding-block: 40px;
  box-shadow: var(--shadow);
}
.opts .flag {
  position: absolute;
  top: -13px;
  left: 28px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}
@media (max-width: 860px) {
  .opts {
    grid-template-columns: 1fr;
  }
}

/* comparison table: AI tool vs engineer vs VibeCheck (landing-no-eng #10) */
.cmp {
  --cmp-first: 34%;
  position: relative;
  isolation: isolate;
  max-width: 980px;
  margin: 0 auto;
}
/* raised VibeCheck column: a card behind the last column, taller than the table */
.cmp::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -14px;
  bottom: -14px;
  left: calc(var(--cmp-first) + (100% - var(--cmp-first)) * 2 / 3);
  width: calc((100% - var(--cmp-first)) / 3);
  box-sizing: border-box;
  background: var(--accent-tint);
  border: 2px solid var(--accent);
  border-radius: 20px;
  box-shadow: var(--shadow);
}
.cmp table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 17px;
  background: var(--white);
  border-radius: 20px;
  box-shadow: var(--shadow);
}
.cmp th,
.cmp td {
  padding: 18px 22px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
}
.cmp thead th {
  font-size: 16px;
  font-weight: 600;
  border-bottom: 0;
  padding-top: 22px;
}
/* fixed layout: first column 34%, the other three share the rest equally */
.cmp thead td {
  width: var(--cmp-first);
  border-bottom: 0;
}
.cmp tbody th {
  font-weight: 500;
}
.cmp tbody tr:last-child > * {
  border-bottom: 0;
}
/* inline-block so wrapped notes line up with their first line, not the mark */
.cmp td small {
  display: inline-block;
  max-width: calc(100% - 30px);
  margin-left: 8px;
  vertical-align: middle;
  font-size: 13px;
  color: var(--muted);
}
.cmp .cv {
  font-weight: 500;
}
.cmp .vc {
  position: relative;
  z-index: 2;
}
/* row lines stop inside the card's border instead of crossing it */
.cmp tbody tr:not(:last-child) .vc {
  border-bottom-color: transparent;
  background: linear-gradient(var(--line), var(--line)) 2px 100% / calc(100% - 4px) 1px no-repeat;
  background-origin: border-box;
}
.cmp thead .vc {
  font-size: 18px;
  color: var(--accent-ink);
}
/* solid header that caps the raised card */
.cmp thead .vc::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -14px 0 0;
  background: var(--accent);
  border-radius: 20px 20px 0 0;
}
.cmp .vc small {
  color: var(--accent-strong);
}
/* marks: yes / partly / maybe / no */
.mark {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  vertical-align: middle;
}
.mark::after {
  content: "";
  width: 12px;
  height: 12px;
  background: #fff;
  -webkit-mask: var(--i-check) center/contain no-repeat;
  mask: var(--i-check) center/contain no-repeat;
}
.mark.yes {
  background: var(--c-green);
}
.mark.part {
  background: var(--t-orange);
  box-shadow: inset 0 0 0 1.5px var(--c-orange);
}
.mark.part::after {
  width: 10px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--t-orange-ink);
  -webkit-mask: none;
  mask: none;
}
.mark.maybe {
  background: var(--t-grey);
  box-shadow: inset 0 0 0 1.5px var(--t-grey-ink);
}
.mark.maybe::after {
  content: "?";
  width: auto;
  height: auto;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: var(--t-grey-ink);
  background: none;
  -webkit-mask: none;
  mask: none;
}
.mark.no {
  background: var(--t-grey);
}
.mark.no::after {
  background: #9a9da4;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E")
    center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E")
    center/contain no-repeat;
}
/* short column names and costs, and the "i" note buttons: narrow screens only */
.cmp .short,
.cmp .note-i {
  display: none;
}
/* narrow screens: the same four columns with marks only and the raised card kept; an "i" beside a mark opens its note */
@media (max-width: 700px) {
  .cmp {
    --cmp-first: 40%;
  }
  .cmp table,
  .cmp thead,
  .cmp tbody {
    display: block;
  }
  .cmp tr {
    display: grid;
    grid-template-columns: var(--cmp-first) repeat(3, minmax(0, 1fr));
    align-items: center;
  }
  .cmp .full {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .cmp .short {
    display: inline;
  }
  .cmp thead th {
    padding: 16px 2px 12px;
    font-size: 12px;
    text-align: center;
  }
  .cmp thead .vc {
    font-size: 13px;
  }
  .cmp tbody tr {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }
  .cmp tbody tr:last-child {
    border-bottom: 0;
  }
  .cmp tbody th {
    padding: 0 4px 0 14px;
    border: 0;
    font-size: 15px;
  }
  .cmp tbody td {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    position: relative;
    z-index: 2;
    font-size: 13px;
    text-align: center;
  }
  .cmp tbody td.open {
    z-index: 3;
  }
  .cmp tbody tr:not(:last-child) .vc {
    background: none;
  }
  /* soft blue info icon, hung off the right of the mark so the mark stays centred */
  .cmp .note-i {
    display: grid;
    place-items: center;
    position: absolute;
    top: 50%;
    left: calc(50% + 13px);
    width: 16px;
    height: 16px;
    margin-top: -8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 16%, #fff);
    cursor: pointer;
  }
  .cmp .note-i::before {
    content: "";
    width: 3px;
    height: 9px;
    background: var(--accent);
    -webkit-mask: var(--i-info) center/contain no-repeat;
    mask: var(--i-info) center/contain no-repeat;
  }
  /* bigger tap target */
  .cmp .note-i::after {
    content: "";
    position: absolute;
    inset: -8px;
  }
  .cmp .open .note-i {
    background: var(--accent);
  }
  .cmp .open .note-i::before {
    background: #fff;
  }
  /* closed notes stay readable to screen readers */
  .cmp td small {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  /* open note: a dark tooltip under the "i", its caret on the "i" (centre 21px right of the cell's middle) */
  .cmp td.open small {
    top: calc(100% + 10px);
    right: calc(50% - 37px);
    width: max-content;
    height: auto;
    max-width: 200px;
    margin: 0;
    padding: 10px 12px;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border-radius: 10px;
    background: var(--ink);
    color: #fff;
    font-size: 14px;
    text-align: left;
    box-shadow: var(--shadow);
  }
  .cmp td.open small::before {
    content: "";
    position: absolute;
    top: -5px;
    right: 10px;
    width: 12px;
    height: 12px;
    background: var(--ink);
    transform: rotate(45deg);
  }
}

/* how it works: drawn path (landing-how-it-works-v1 #03), four steps; new screens and the export animation from #08, plus a connect-and-scan animation. A winding line draws itself as you scroll; each step lights up and slides in when the line reaches it. */
#how {
  padding-block: clamp(64px, 9vw, 112px);
  overflow: hidden;
}
#how .how-head {
  text-align: center;
  margin-bottom: clamp(28px, 4vw, 48px);
}
#how .how-head .lede {
  margin: 12px auto 0;
}
.step-n {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-strong);
}
.path {
  position: relative;
}
.path svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 0;
}
.path svg path {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
}
.path .trk {
  stroke: #d9d7d3;
  stroke-dasharray: 2 8;
}
.path .draw {
  stroke: var(--accent);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.row-p {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: clamp(16px, 3vw, 40px);
  align-items: center;
  min-height: 48vh;
  padding-block: 5vh;
}
.row-p .node {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--line);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 20px;
  color: var(--muted);
  transition: all 0.35s;
}
.row-p.on .node {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: scale(1.1);
  box-shadow: 0 0 0 10px var(--accent-tint);
}
.row-p .txt,
.row-p .shot {
  grid-row: 1;
  opacity: 0;
  transition:
    opacity 0.5s,
    transform 0.5s;
}
.row-p .txt {
  grid-column: 1;
  text-align: right;
  transform: translateX(-24px);
}
.row-p .txt .body {
  margin-left: auto;
}
.row-p .shot {
  grid-column: 3;
  transform: translateX(24px);
}
.row-p.flip .txt {
  grid-column: 3;
  text-align: left;
  transform: translateX(24px);
}
.row-p.flip .txt .body {
  margin-left: 0;
}
.row-p.flip .shot {
  grid-column: 1;
  transform: translateX(-24px);
}
.row-p.on .txt,
.row-p.on .shot,
html:not(.js) .row-p .txt,
html:not(.js) .row-p .shot {
  opacity: 1;
  transform: none;
}
.row-p .h2 {
  font-size: clamp(28px, 3.2vw, 40px);
  margin: 8px 0 10px;
}
.row-p .body {
  font-size: 18px;
  max-width: 34ch;
}
.path-end {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-top: 4vh;
}
.path-end span {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 600;
}
.mline {
  display: none;
}
@media (max-width: 860px) {
  .path svg {
    display: none;
  }
  .mline {
    display: block;
    position: absolute;
    left: 27px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--line);
  }
  .mline i {
    display: block;
    width: 100%;
    background: var(--accent);
    height: 0;
  }
  .row-p,
  .row-p.flip {
    grid-template-columns: 56px minmax(0, 1fr);
    min-height: 0;
    padding-block: 28px;
  }
  .row-p .node,
  .row-p.flip .node {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }
  .row-p .txt,
  .row-p.flip .txt {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
    transform: translateY(16px);
  }
  .row-p .shot,
  .row-p.flip .shot {
    grid-column: 2;
    grid-row: 2;
    transform: translateY(16px);
  }
  .row-p .txt .body {
    margin-left: 0;
  }
  .path-end {
    text-align: left;
  }
}
/* app screenshots in How it works */
.app {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
  min-width: 0;
  text-align: left;
  font-size: 14px;
}
.scr {
  background: var(--white);
  min-width: 0;
}
.appnav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  min-width: 0;
}
.appnav .logo {
  font-size: 14px;
  gap: 7px;
  color: var(--ink);
}
.appnav .logo-mark {
  width: 18px;
  height: 18px;
  border-radius: 5px;
}
.appnav .logo-mark::after {
  inset: 4px;
}
.appnav .crumb {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.scr-b {
  padding: 16px 18px 18px;
  display: grid;
  gap: 12px;
}
.scr-t {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.scr-t b {
  display: block;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.scr-t small,
.scr-f {
  color: var(--muted);
  font-size: 12.5px;
}
.scr-t small {
  display: block;
  margin-top: 2px;
}
.scr-f {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.scr .repos {
  display: grid;
  gap: 8px;
}
.scr .repo {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}
.scr .repo.sel {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.scr .repo .badge {
  margin-left: auto;
}
.scr .checks {
  padding: 0;
}
.scr .checks li {
  padding: 6px 0;
  font-size: 14px;
}
.scr .arow {
  padding: 8px 0;
  font-size: 14px;
}
.scr .score .v {
  font-size: 28px;
}
.was {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}
.fixed-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13.5px;
}
.fixed-row .chip {
  margin: 0 0 0 auto;
}
/* how it works: animated screens (scan, issue, AI tool) and the demo cursor (landing-how-it-works-v1 #08) */
.stage {
  position: relative;
  display: grid;
}
.stage > .scr {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.35s,
    transform 0.35s,
    visibility 0.35s;
}
.stage > .scr.on {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.scr .row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.sc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}
.sc-ic {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #cfcdc9;
  flex: 0 0 auto;
  position: relative;
}
.sc-row.run .sc-ic {
  border-color: var(--accent);
  border-top-color: transparent;
  animation: spin 0.8s linear infinite;
}
.sc-row.done .sc-ic {
  background: var(--c-green);
  border-color: var(--c-green);
}
.sc-row.done .sc-ic::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: #fff;
  -webkit-mask: var(--i-check) center/contain no-repeat;
  mask: var(--i-check) center/contain no-repeat;
}
.sc-row .r {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.sc-row:not(.done) .r {
  visibility: hidden;
}
.scr-scan .meter i {
  transition: width 0.6s;
}
.scr .ttl {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.kv {
  margin: 0;
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 6px 14px;
  font-size: 13.5px;
}
.kv dt {
  color: var(--muted);
  font-size: 12.5px;
  padding-top: 1px;
}
.kv dd {
  margin: 0;
}
.kv code {
  font: 400 12px var(--mono);
  background: var(--soft);
  padding: 2px 6px;
  border-radius: 6px;
}
@media (max-width: 520px) {
  .kv {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .kv dd {
    margin-bottom: 6px;
  }
}
.ai-h {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
}
.ai-h .dot {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--c-purple), var(--c-pink));
}

.ai-msgs {
  padding: 16px;
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 196px;
}
.msg {
  max-width: 90%;
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13.5px;
  line-height: 1.45;
  transition:
    opacity 0.3s,
    transform 0.3s;
}
.msg.me {
  justify-self: end;
  background: var(--soft);
}
.msg.me small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.msg.me code {
  display: block;
  font: 400 12px/1.5 var(--mono);
  color: var(--ink);
  margin-top: 4px;
}
.msg.bot {
  justify-self: start;
  background: var(--t-purple);
}
.msg.hide {
  opacity: 0;
  transform: translateY(6px);
}
.ai-in {
  margin: 0 16px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  color: #a3a6ad;
  font-size: 13px;
  transition: border-color 0.2s;
}
.ai-in.focus {
  border-color: var(--accent);
}
.cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  z-index: 6;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2.5l15 8.2-6.6 1.8-3.4 6.2z' fill='%2316171a' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E")
    0 0 / contain no-repeat;
  transition: transform 0.8s cubic-bezier(0.45, 0, 0.2, 1);
  will-change: transform;
}
.cursor::after {
  content: "";
  position: absolute;
  left: -9px;
  top: -10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transform: scale(0.4);
  transition:
    opacity 0.15s,
    transform 0.15s;
}
.cursor.click::after {
  opacity: 0.28;
  transform: scale(1.1);
}
html:not(.js) .cursor {
  display: none;
}

/* example results: two inputs, one score (landing-results-v1 #09) */
#example .section-head {
  padding-bottom: 24px;
}
#example .flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: center;
}
#example .ins {
  display: grid;
  gap: 14px;
}
#example .in {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 8px;
}
#example .in ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 14px;
  display: grid;
  gap: 3px;
}
#example .in .row {
  display: flex;
  gap: 10px;
  align-items: center;
}
#example .in .row b {
  font-size: 17px;
}
#example .src {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 9px 2px 7px;
  border: 1px solid;
  white-space: nowrap;
}
#example .src::before {
  content: "";
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: var(--i-scan) center/contain no-repeat;
  mask: var(--i-scan) center/contain no-repeat;
}
#example .src.scan {
  color: var(--accent-strong);
  border-color: #bcd8f5;
  background: var(--accent-tint);
}

#example .plus {
  justify-self: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--muted);
  line-height: 1;
}
#example .arr {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink);
  position: relative;
}
#example .arr::after {
  content: "";
  position: absolute;
  inset: 12px;
  background: #fff;
  -webkit-mask: var(--i-arrow) center/contain no-repeat;
  mask: var(--i-arrow) center/contain no-repeat;
}
#example .flow > .panel {
  padding: 22px 24px;
}
#example .arow .meter i {
  background: #cfcdc9;
}
@media (max-width: 900px) {
  #example .flow {
    grid-template-columns: 1fr;
  }
  #example .arr {
    transform: rotate(90deg);
    justify-self: center;
  }
}

/* finding to fix: one card, cropped to its top half */
#fix {
  --fix-card-width: 820px; /* card width */
  --fix-card-show: 320px; /* visible height before the crop */
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(88px, 12vw, 144px);
}
.fix-crop {
  max-width: var(--fix-card-width);
  max-height: var(--fix-card-show);
  margin-inline: auto;
  padding: 4px 24px 0;
  overflow: hidden;
  -webkit-mask: linear-gradient(#000 45%, transparent);
  mask: linear-gradient(#000 45%, transparent);
}

/* faq */
.faq-acc {
  display: grid;
  border-top: 1px solid var(--line);
  max-width: 860px;
}
.faq-acc details {
  border-bottom: 1px solid var(--line);
}
.faq-acc summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 22px 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.faq-acc summary::-webkit-details-marker {
  display: none;
}
.faq-acc summary::after {
  content: "+";
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  color: var(--muted);
  transition: transform 0.2s;
}
.faq-acc details[open] summary::after {
  transform: rotate(45deg);
}
.faq-acc p {
  margin: 0 0 22px;
  color: var(--muted);
  max-width: 64ch;
}
/* FAQ: heading beside the questions, stacked on narrow screens */
.faq-side {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 48px;
}
@media (max-width: 860px) {
  .faq-side {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* final signup: help shape it (landing-end-cta-v1 #08) */
.trial {
  --trial-ink: #16171a;
  --trial-muted: #62666f;
  --trial-action: var(--accent);
  background: var(--accent-tint);
  color: var(--trial-ink);
  padding-block: clamp(56px, 7vw, 104px);
}
.trial .shell {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}
.trial h2 {
  margin: 0;
  font-size: clamp(34px, 4.4vw, 58px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.trial p {
  margin: 0;
}
.trial .pitch {
  max-width: 50ch;
  margin-top: 22px;
  color: var(--trial-muted);
  font-size: 18px;
  line-height: 1.65;
}
.trial .split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.trial .form-card {
  perspective: 1200px;
}
/* the form and the success message share one grid cell; on signup the card turns over (cta-success-states.html #8) */
.trial .flip {
  display: grid;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.trial .flip.flipped {
  transform: rotateY(180deg);
}
.trial .face {
  grid-area: 1 / 1;
  padding: clamp(24px, 3vw, 38px);
  background: #fff;
  border: 1px solid #e4e5e8;
  border-radius: 20px;
  backface-visibility: hidden;
}
.trial .back {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: rotateY(180deg);
}
.trial .back:focus {
  outline: none;
}
.trial .back h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.trial .back p {
  margin-top: 6px;
  color: var(--trial-muted);
  font-size: 15px;
}
.trial .tick {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--c-green);
  color: #fff;
}
.trial .tick svg {
  width: 60%;
  height: 60%;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trial .flipped .tick {
  animation: tick-pop 0.4s 0.3s ease-out backwards;
}
@keyframes tick-pop {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }
  70% {
    transform: scale(1.12);
  }
}
.trial .trial-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}
.trial .form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.trial .trial-form input {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid #d8d9dd;
  border-radius: 9px;
  background: #fff;
  color: var(--trial-ink);
  font: 400 16px/1.4 var(--sans);
}
.trial button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 20px;
  border: 0;
  border-radius: 9px;
  background: var(--trial-action);
  color: var(--accent-ink);
  font: 600 15px/1.35 var(--sans);
  cursor: pointer;
}
.trial button:hover {
  filter: brightness(0.92);
}
.trial .terms {
  margin-top: 14px;
  color: var(--trial-muted);
  font-size: 13px;
  line-height: 1.5;
}
.trial :focus-visible {
  outline: 3px solid var(--trial-action);
  outline-offset: 4px;
}
@media (max-width: 800px) {
  .trial .split {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* footer */
.foot-band {
  background: #000;
}
.foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-block: 28px;
  font-size: 14px;
  color: #a1a4ab;
}
.foot .links {
  display: flex;
  gap: 20px;
}
.foot .links a {
  color: inherit;
  text-decoration: none;
}
.foot .links a:hover {
  color: #fff;
}
.foot .brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 600;
}
.foot .brand .logo-mark {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: #fff;
}
.foot .brand .logo-mark::after {
  inset: 4px;
  background: #000;
}

/* scroll reveal: main.js adds .reveal to titles, subtitles, screenshots and some section content, then .seen when they enter the viewport */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.reveal.seen {
  opacity: 1;
  transform: none;
}
/* speech bubbles keep their tilt while they rise */
.thoughts li.reveal {
  transform: translateY(24px) rotate(var(--r, 0deg));
}
.thoughts li.reveal.seen {
  transform: rotate(var(--r, 0deg));
}

/* ---- survey popup ---- */
/* survey popup, opened after signup (design-variants/landing-survey-v1, #21) */
html:has(.survey[open]) {
  overflow: hidden;
}
.survey {
  --survey-pad: clamp(22px, 4vw, 32px);
  --survey-fade: 40px; /* height of the white fade under the band and above the buttons */
  width: min(560px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.survey[open] {
  animation: survey-fade-in 0.5s ease-out;
}
.survey::backdrop {
  background: rgba(22, 23, 26, 0.45);
}
.survey[open]::backdrop {
  animation: survey-fade-in 0.5s ease-out;
}
@keyframes survey-fade-in {
  from {
    opacity: 0;
  }
}
/* closing: fade out (main.js waits 0.3s) */
.survey.leaving,
.survey.leaving::backdrop {
  opacity: 0;
  transition: opacity 0.3s ease-in;
}
/* after sending: shrink to fit the thanks while the questions fade out over it (main.js sets the heights and waits 0.3s) */
.survey.shrink {
  overflow: hidden;
  transition: height 0.3s ease-in-out;
}
.survey.shrink .survey-form {
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.survey.shrink .survey-done {
  position: relative;
  z-index: 1;
  animation: survey-fade-in 0.3s ease-in-out;
}
/* green band: the signup confirmation, pinned to the top while the questions scroll */
.survey-band {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 28px var(--survey-pad) 24px;
  background: var(--t-green);
}
/* white fades over the questions, shown only when there's more to scroll (main.js sets the classes) */
.survey-band::after,
.survey-actions::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--survey-fade);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.survey-band::after {
  top: 100%;
  background: linear-gradient(var(--white), transparent);
}
.survey-actions::before {
  bottom: 100%;
  background: linear-gradient(transparent, var(--white));
}
.survey.fade-top .survey-band::after,
.survey.fade-bottom .survey-actions::before {
  opacity: 1;
}
.survey-tick {
  position: relative;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--c-green);
}
.survey-tick::after {
  content: "";
  position: absolute;
  inset: 8px;
  background: #fff;
  -webkit-mask: var(--i-check) center/contain no-repeat;
  mask: var(--i-check) center/contain no-repeat;
}
.survey h2 {
  margin: 0 40px 8px 0;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.03em;
}
.survey-added {
  margin: 0;
  color: var(--t-green-ink);
}
.survey-x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.survey-x:hover {
  background: var(--soft);
}
.survey-form,
.survey-done {
  margin: 0;
  padding: 0 var(--survey-pad) var(--survey-pad);
}
.survey-form {
  padding-bottom: 0;
}
.survey-intro {
  margin: 22px 0 6px;
  font-size: 15px;
}
/* numbered questions */
.survey-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  padding: 16px 0;
}
.survey-item + .survey-item {
  border-top: 1px solid var(--line);
}
.survey-num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.survey fieldset {
  min-width: 0;
  margin: 3px 0 0;
  padding: 0;
  border: 0;
}
.survey legend,
.survey-q {
  display: block;
  padding: 0;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 600;
}
.survey legend span {
  color: var(--muted);
  font-weight: 400;
}
.survey-q {
  margin-top: 3px;
}
/* answer chips: the input is hidden and a tick slides in when picked */
.survey fieldset label {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0 6px 8px 0;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--soft);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  transition: background 0.15s;
}
.survey fieldset label:hover {
  background: var(--soft2);
}
.survey fieldset label::before {
  content: "";
  width: 0;
  height: 13px;
  background: currentColor;
  -webkit-mask: var(--i-check) center/contain no-repeat;
  mask: var(--i-check) center/contain no-repeat;
  transition:
    width 0.15s,
    margin 0.15s;
}
.survey fieldset label:has(:checked) {
  background: var(--accent);
  color: var(--accent-ink);
}
.survey fieldset label:has(:checked)::before {
  width: 13px;
  margin-right: 6px;
}
.survey fieldset label:has(:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.survey fieldset label input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
/* text box for "Other", shown once it's picked */
.survey-other {
  display: none;
  margin-bottom: 8px;
}
.survey fieldset:has([value="Other"]:checked) .survey-other {
  display: block;
}
.survey textarea,
.survey-other {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 16px;
  resize: vertical;
}
/* buttons pinned to the bottom */
.survey-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px calc(-1 * var(--survey-pad)) 0;
  padding: 16px var(--survey-pad);
  border-top: 1px solid var(--line);
  background: var(--white);
}
.survey-done {
  padding-top: 26px;
  font-weight: 600;
}

/* ---- privacy page ---- */
/* privacy page: long-form text */
.legal {
  max-width: 68ch;
  padding-block: clamp(40px, 6vw, 72px);
}
.legal .eyebrow {
  margin-top: 12px;
}
.legal h2 {
  font-size: 20px;
  letter-spacing: -0.02em;
  margin: 36px 0 8px;
}
.legal p,
.legal ul {
  margin: 0 0 14px;
  color: var(--muted);
}
.legal li + li {
  margin-top: 6px;
}