/* ==========================================================================
   credoofy.com

   One stylesheet, no framework, no build step, and still no JavaScript —
   which is the constraint that shaped most of what follows. The three
   reference sites (designmonks.co, visionic.agency, musemind.agency) move a
   great deal, and all of it there is scripted. Everything that moves here is
   CSS: scroll-driven `animation-timeline: view()`, a keyframed marquee, and
   hover transitions. A browser without scroll-driven animations gets the
   finished state immediately, which is the correct fallback, and the whole
   lot is switched off under `prefers-reduced-motion`.

   Staying script-free is why the content-security policy in `_headers` can
   say `default-src 'none'` and mean it.

   The palette is the brand's: the navy the icon sits on, the blue→violet of
   the mark, and the gold of its star. #0000FF is the master colour the app
   paints widgets with, so it is what the buttons use here too.
   ========================================================================== */

:root {
  /* Ink */
  --ink: #0b0d17;
  --ink-2: #4a4f63;
  --ink-3: #767c91;

  /* Paper, and the block sections alternate onto */
  --paper: #ffffff;
  --paper-2: #f4f4f2;
  --line: #e6e6e3;

  /* Brand */
  --blue: #0000ff;
  --blue-lift: #2a2aff;
  --violet: #7c3aed;
  --magenta: #c026d3;
  --gold: #ffc02e;
  --good: #0b8a52;

  /* The dark field the mark was drawn for */
  --night: #090a1f;
  --night-2: #141544;
  --night-ink: #f2f3ff;
  --night-ink-2: #a9adcf;
  --night-line: #26285e;

  --radius: 18px;
  --radius-lg: 28px;
  --page: 1180px;
  --gutter: 20px;

  --sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eceef7;
    --ink-2: #a9adcf;
    --ink-3: #868ab0;
    --paper: #07081a;
    --paper-2: #0e1030;
    --line: #22244f;
    --good: #4ac08a;
    --night: #040512;
    --night-2: #11123a;
  }
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  /* 20px, which is what musemind.agency sets and a large part of why its
     pages read as considered rather than cramped. This was 17px. */
  font-size: 20px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* --- type ----------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0 0 0.45em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.9rem, 7.4vw, 5.4rem);
}
h2 {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
}
h3 {
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

/* The one borrowed flourish: designmonks.co sets a serif italic inside a
   sans headline. It is the cheapest way to give a heavy grotesk a voice. */
em.say {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.015em;
  /* Fraunces sits a shade small beside Jakarta at the same size. */
  font-size: 1.06em;
}

p {
  margin: 0 0 1.1em;
  max-width: 62ch;
}

.lede {
  font-size: clamp(1.1rem, 1.9vw, 1.35rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 54ch;
}

a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 4px;
}
a:hover {
  text-decoration-color: currentColor;
}

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

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 16px;
  top: 12px;
  z-index: 60;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 10px 16px;
  border-radius: 999px;
}

/* --- shell ---------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section {
  padding: clamp(64px, 9vw, 130px) 0;
}

/* Musemind separates sections with flat blocks of colour rather than rules.
   It reads as deliberate where a hairline reads as a default. */
.block-2 {
  background: var(--paper-2);
}
.block-night {
  background:
    radial-gradient(
      90ch 60ch at 18% -10%,
      color-mix(in srgb, var(--violet) 26%, transparent),
      transparent 60%
    ),
    linear-gradient(160deg, var(--night) 0%, var(--night-2) 100%);
  color: var(--night-ink);
}
.block-night h1,
.block-night h2,
.block-night h3 {
  color: var(--night-ink);
}
.block-night p,
.block-night .lede {
  color: var(--night-ink-2);
}

/* --- the pill: visionic.agency's status chip ------------------------------ */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-2);
  background: var(--paper);
  text-decoration: none;
  margin: 0 0 22px;
}
.block-night .pill {
  border-color: var(--night-line);
  background: color-mix(in srgb, var(--night-ink) 7%, transparent);
  color: var(--night-ink-2);
}
.pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 70%, transparent);
  animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse {
  70%,
  100% {
    box-shadow: 0 0 0 7px transparent;
  }
}

.eyebrow {
  font: 700 0.78rem/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 16px;
}
.block-night .eyebrow {
  color: var(--night-ink-2);
}

/* --- header: the detached card both visionic and designmonks use ---------- */

header.site {
  position: sticky;
  top: 12px;
  z-index: 40;
  padding: 12px var(--gutter) 0;
}
header.site .bar {
  max-width: var(--page);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 60px;
  padding: 6px 10px 6px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(1.8) blur(14px);
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.16rem;
  letter-spacing: -0.03em;
  text-decoration: none;
  margin-right: auto;
}
.brand img {
  width: 30px;
  height: 30px;
  flex: none;
}

nav.site {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
nav.site a {
  text-decoration: none;
  color: var(--ink-2);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 999px;
}
nav.site a:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
nav.site a[aria-current="page"] {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}

/* --- buttons -------------------------------------------------------------- */

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 30px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn-primary {
  background: var(--blue);
  color: #fff;
}
.btn-primary:hover {
  background: var(--blue-lift);
}
.btn-ghost {
  border-color: var(--line);
  color: var(--ink);
}
.btn-ghost:hover {
  border-color: var(--ink-3);
}
.block-night .btn-primary {
  background: #fff;
  color: var(--night);
}
.block-night .btn-ghost {
  border-color: var(--night-line);
  color: var(--night-ink);
}
.btn .arr {
  transition: transform 0.18s ease;
}
.btn:hover .arr {
  transform: translateX(3px);
}

/* --- hero ----------------------------------------------------------------- */

.hero {
  padding-top: clamp(56px, 8vw, 104px);
  padding-bottom: clamp(44px, 6vw, 80px);
}

/* The price, where the reference sites put a client rating. They can lead
   with "4.9 from 48 reviews"; this app has no merchants yet, and inventing
   that number is the one thing the page must not do. The price is the
   honest equivalent, and it is also the strongest thing we have to say. */
.proof {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 34px;
  flex-wrap: wrap;
}
.proof__price {
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}
.proof__price small {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--night-ink-2);
}
.proof__rule {
  width: 1px;
  align-self: stretch;
  background: var(--night-line);
}
.proof__note {
  font-size: 0.95rem;
  color: var(--night-ink-2);
  max-width: 30ch;
  margin: 0;
}

/* --- the widget strip: designmonks' bleeding gallery, drawn in CSS -------- */

.strip {
  margin-top: clamp(40px, 6vw, 72px);
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 7%,
    #000 93%,
    transparent
  );
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.strip__track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: slide 46s linear infinite;
}
.strip:hover .strip__track {
  animation-play-state: paused;
}
@keyframes slide {
  to {
    transform: translateX(-50%);
  }
}

.chip {
  flex: none;
  width: 268px;
  border-radius: var(--radius);
  border: 1px solid var(--night-line);
  background: color-mix(in srgb, var(--night-ink) 5%, transparent);
  padding: 18px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.chip__stars {
  color: var(--gold);
  letter-spacing: 3px;
  font-size: 0.9rem;
}
.chip__line {
  height: 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--night-ink) 15%, transparent);
}
.chip__line--s {
  width: 55%;
}
.chip__line--m {
  width: 80%;
}
.chip__shot {
  height: 86px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--violet), var(--magenta));
  opacity: 0.55;
}
.chip__who {
  font-size: 0.84rem;
  color: var(--night-ink-2);
  font-weight: 600;
}

/* --- generic grid --------------------------------------------------------- */

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  background: var(--paper);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--ink-3);
}
.card h3 {
  margin-bottom: 8px;
}
.card p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.98rem;
  line-height: 1.55;
}
.card__n {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-3);
  display: block;
  margin-bottom: 14px;
}

/* --- checklist ------------------------------------------------------------ */

ul.check {
  list-style: none;
  padding: 0;
  margin: 34px 0 0;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
}
ul.check li {
  position: relative;
  padding-left: 34px;
  color: var(--ink-2);
  font-size: 1.02rem;
  line-height: 1.5;
}
ul.check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--good) 14%, transparent);
}
ul.check li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.62em;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--good);
  border-bottom: 2px solid var(--good);
  transform: rotate(-45deg);
}
ul.check li strong {
  color: var(--ink);
  font-weight: 700;
}
.block-night ul.check li {
  color: var(--night-ink-2);
}
.block-night ul.check li strong {
  color: var(--night-ink);
}

/* --- plans ---------------------------------------------------------------- */

.plans {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-top: 40px;
  align-items: start;
}

.plan {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  background: var(--paper);
}
.plan--pro {
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    linear-gradient(135deg, var(--blue), var(--violet), var(--magenta))
      border-box;
  border: 2px solid transparent;
}
.plan h3 {
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}
.price {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  margin: 10px 0 2px;
}
.price span {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0;
}
.plan ul {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: grid;
  gap: 11px;
}
.plan ul li {
  position: relative;
  padding-left: 26px;
  font-size: 0.97rem;
  line-height: 1.45;
  color: var(--ink-2);
}
.plan ul li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.55em;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--good);
  border-bottom: 2px solid var(--good);
  transform: rotate(-45deg);
}
/* The "not on this plan" list. Same shape, no tick: a green check beside
   "No video reviews" reads as the opposite of the truth. */
.plan ul[data-mark="none"] li::before {
  content: none;
}
.plan ul[data-mark="none"] li {
  padding-left: 0;
  color: var(--ink-3);
}
.plan__not {
  color: var(--ink-3);
  font-size: 0.88rem;
  margin: 24px 0 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.callout {
  border-left: 3px solid var(--blue);
  padding: 4px 0 4px 20px;
  margin: 34px 0;
  color: var(--ink-2);
  max-width: 62ch;
}
.callout strong {
  color: var(--ink);
}
.block-night .callout {
  border-left-color: var(--gold);
  color: var(--night-ink-2);
}
.block-night .callout strong {
  color: var(--night-ink);
}

/* --- table ---------------------------------------------------------------- */

.scroller {
  overflow-x: auto;
  margin-top: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95rem;
  min-width: 620px;
}
th,
td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.45;
}
th {
  font-weight: 700;
  color: var(--ink-3);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
tbody tr:last-child td {
  border-bottom: 0;
}
td.num {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
tr.us td {
  background: color-mix(in srgb, var(--blue) 7%, transparent);
  font-weight: 600;
  color: var(--ink);
}

/* --- prose ---------------------------------------------------------------- */

.prose h2 {
  margin-top: 1.5em;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}
.prose h3 {
  margin-top: 1.5em;
  font-size: 1.12rem;
}
.prose ul,
.prose ol {
  max-width: 62ch;
  color: var(--ink-2);
  padding-left: 24px;
}
.prose li {
  margin-bottom: 9px;
}
.prose code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 6px;
}
.updated {
  color: var(--ink-3);
  font-size: 0.92rem;
}

details.faq {
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}
details.faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.05rem;
  list-style: none;
  display: flex;
  gap: 14px;
  align-items: baseline;
}
details.faq summary::-webkit-details-marker {
  display: none;
}
details.faq summary::before {
  content: "+";
  color: var(--blue);
  font-weight: 800;
  flex: none;
}
details.faq[open] summary::before {
  content: "\2013";
}
details.faq p {
  margin: 12px 0 2px 28px;
  color: var(--ink-2);
}

/* --- footer --------------------------------------------------------------- */

footer.site {
  background: var(--night);
  color: var(--night-ink-2);
  padding: clamp(52px, 7vw, 88px) 0 56px;
  font-size: 0.95rem;
}
footer.site .cols {
  display: flex;
  flex-wrap: wrap;
  gap: 36px 72px;
  margin-bottom: 44px;
}
footer.site .brand {
  color: var(--night-ink);
  margin-bottom: 14px;
}
footer.site h4 {
  font: 700 0.76rem/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--night-ink-2);
  margin: 0 0 14px;
}
footer.site ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
footer.site a {
  color: var(--night-ink-2);
  text-decoration: none;
}
footer.site a:hover {
  color: var(--night-ink);
  text-decoration: underline;
}
footer.site p {
  margin: 0;
  max-width: none;
  color: var(--night-ink-2);
}
footer.site hr {
  border: 0;
  border-top: 1px solid var(--night-line);
  margin: 0 0 24px;
}

/* --- motion, without a line of JavaScript --------------------------------- */

/* The reference sites animate sections in on scroll with a library. This is
   the same effect in three declarations, and in a browser that does not
   support it the element is simply already where it belongs. */
@supports (animation-timeline: view()) {
  .rise {
    animation: rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 62%;
  }
  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(26px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .strip__track,
  .pill .dot {
    animation: none;
  }
  .btn:hover,
  .card:hover {
    transform: none;
  }
  @supports (animation-timeline: view()) {
    .rise {
      animation: none;
    }
  }
}

/* --- narrow screens -------------------------------------------------------- */

@media (max-width: 560px) {
  /* The rule between the price and the note is a vertical divider between two
     things sitting side by side. Once they stack it is a dash in mid-air. */
  .proof__rule {
    display: none;
  }
  .proof {
    gap: 12px;
  }
  header.site .bar {
    border-radius: var(--radius-lg);
    padding: 10px 8px 10px 14px;
  }
  nav.site a {
    padding: 8px 10px;
  }
  .plan,
  .card {
    padding: 22px;
  }
}

/* ==========================================================================
   Motion, part two

   Everything below is still CSS only. Two different mechanisms, chosen for
   different reasons:

   **Load choreography** — plain `@keyframes` with a delay. Works in every
   browser, which matters, because it is the motion a visitor is guaranteed
   to see. The hero is staged rather than animated: each part arrives a beat
   after the one above it, the whole sequence is over in 0.8s, and nothing
   moves again afterwards.

   **Scroll-driven** — `animation-timeline`, which Chrome, Edge and Safari
   have and Firefox is still bringing. Used only for things that are fine
   static: a progress bar, a parallax drift, a card reveal. Where it is
   missing the page simply does not have them, which is why none of them
   carry meaning.

   `prefers-reduced-motion` turns off all of it at the end of the file.
   ========================================================================== */

/* --- hero load choreography ---------------------------------------------- */

@keyframes enter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero .pill,
.hero h1,
.hero .lede,
.hero .cta-row,
.hero .proof {
  animation: enter 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero .pill {
  animation-delay: 0.04s;
}
.hero h1 {
  animation-delay: 0.12s;
}
.hero .lede {
  animation-delay: 0.22s;
}
.hero .cta-row {
  animation-delay: 0.3s;
}
.hero .proof {
  animation-delay: 0.38s;
}

/* The strip arrives last and from further down, so the eye finishes on it. */
@keyframes enter-strip {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.hero .strip {
  animation: enter-strip 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.46s both;
}

/* --- the mark, which until now only existed at 30px in the header -------- */

.hero {
  position: relative;
  isolation: isolate;
}
.hero__mark {
  position: absolute;
  top: -6%;
  right: -12%;
  width: min(42vw, 520px);
  /* The artwork is saturated enough that 0.17 over the night field still
     competed with the lede sitting in front of it. At 0.09, masked away on
     the side the text occupies, it reads as a watermark rather than as
     something the copy has to fight. */
  opacity: 0.09;
  -webkit-mask-image: radial-gradient(
    70% 70% at 72% 40%,
    #000 35%,
    transparent 78%
  );
  mask-image: radial-gradient(70% 70% at 72% 40%, #000 35%, transparent 78%);
  z-index: -1;
  pointer-events: none;
  /* Its own entrance, not the shared one. `enter` finishes at opacity 1
     and `both` makes that stick, which silently overrode the 0.09 above —
     the mark only looked right because the mask was hiding the mistake. */
  animation:
    mark-in 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both,
    float 11s ease-in-out 1.2s infinite;
}
@keyframes mark-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 0.09;
    transform: none;
  }
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-26px) rotate(-2.5deg);
  }
}
@media (max-width: 860px) {
  .hero__mark {
    width: 86vw;
    right: -34%;
    top: auto;
    bottom: 14%;
    opacity: 0.07;
  }
}

/* --- aurora: the night block stops being a flat gradient ----------------- */

.block-night {
  position: relative;
  overflow: hidden;
}
.block-night::before,
.block-night::after {
  content: "";
  position: absolute;
  inset: -30% -10%;
  z-index: 0;
  pointer-events: none;
  filter: blur(70px);
  opacity: 0.5;
}
.block-night::before {
  background: radial-gradient(
    40ch 30ch at 20% 30%,
    color-mix(in srgb, var(--violet) 70%, transparent),
    transparent 70%
  );
  animation: drift-a 26s ease-in-out infinite alternate;
}
.block-night::after {
  background: radial-gradient(
    36ch 28ch at 80% 70%,
    color-mix(in srgb, var(--magenta) 55%, transparent),
    transparent 70%
  );
  animation: drift-b 34s ease-in-out infinite alternate;
}
@keyframes drift-a {
  to {
    transform: translate3d(14%, 10%, 0) scale(1.18);
  }
}
@keyframes drift-b {
  to {
    transform: translate3d(-16%, -12%, 0) scale(1.22);
  }
}
/* Everything in a night block has to sit above the aurora. */
.block-night > .wrap,
.block-night > .strip {
  position: relative;
  z-index: 1;
}

/* --- the serif word, lit ------------------------------------------------- */

.block-night em.say {
  background: linear-gradient(
    100deg,
    var(--night-ink) 20%,
    var(--gold) 42%,
    var(--night-ink) 64%
  );
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 7s ease-in-out 1.4s infinite;
}
@keyframes sheen {
  0%,
  62%,
  100% {
    background-position: 130% 0;
  }
  22% {
    background-position: -30% 0;
  }
}

/* --- a sheen across a button on hover ------------------------------------ */

.btn {
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 35%,
    color-mix(in srgb, #fff 42%, transparent) 50%,
    transparent 65%
  );
  transform: translateX(-120%);
  pointer-events: none;
}
.btn:hover::after {
  transition: transform 0.7s ease;
  transform: translateX(120%);
}

/* --- stars that are not all awake at once -------------------------------- */

.chip__stars {
  animation: twinkle 4.2s ease-in-out infinite;
}
.chip:nth-child(2n) .chip__stars {
  animation-delay: 0.9s;
}
.chip:nth-child(3n) .chip__stars {
  animation-delay: 1.7s;
}
@keyframes twinkle {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.62;
  }
}

/* --- scroll-driven ------------------------------------------------------- */

@supports (animation-timeline: scroll()) {
  /* How far down the page you are. A progress bar is the one piece of
     scroll feedback worth having and it carries no information you lose
     without it. */
  .progress {
    position: fixed;
    inset: 0 0 auto 0;
    height: 3px;
    z-index: 50;
    transform-origin: 0 50%;
    background: linear-gradient(
      90deg,
      var(--blue),
      var(--violet),
      var(--magenta)
    );
    animation: grow linear;
    animation-timeline: scroll(root);
  }
  @keyframes grow {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }

  /* Cards arrive one after another rather than as a block. */
  .grid > .card,
  .plans > .plan {
    animation: rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
  .grid > .card:nth-child(3n + 2),
  .plans > .plan:nth-child(2) {
    animation-range: entry 4% entry 60%;
  }
  .grid > .card:nth-child(3n + 3),
  .plans > .plan:nth-child(3) {
    animation-range: entry 8% entry 65%;
  }

  /* The checklist ticks in. */
  ul.check > li {
    animation: rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
  }

  /* A slow parallax drift on the marquee as the hero leaves. */
  .hero .strip {
    animation:
      enter-strip 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.46s both,
      strip-park linear;
    animation-timeline: auto, view();
    animation-range: normal, exit 0% exit 100%;
  }
  @keyframes strip-park {
    to {
      transform: translateY(-34px);
      opacity: 0.45;
    }
  }
}

/* --- and none of it if the visitor has asked for none -------------------- */

@media (prefers-reduced-motion: reduce) {
  .hero .pill,
  .hero h1,
  .hero .lede,
  .hero .cta-row,
  .hero .proof,
  .hero .strip,
  .hero__mark,
  .block-night::before,
  .block-night::after,
  .block-night em.say,
  .chip__stars {
    animation: none !important;
  }
  .block-night em.say {
    color: var(--night-ink);
    -webkit-text-fill-color: currentColor;
  }
  .btn::after {
    display: none;
  }
  @supports (animation-timeline: scroll()) {
    .progress,
    .grid > .card,
    .plans > .plan,
    ul.check > li {
      animation: none !important;
    }
    .progress {
      display: none;
    }
  }
}

/* ==========================================================================
   The four body sections

   They were an eyebrow, a headline and a wall of prose. Everything true
   about them is still true; this is the same content given something to
   look at.
   ========================================================================== */

/* --- a two-column argument: the claim left, the evidence right ----------- */

.split {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .split {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

/* --- the stat strip ------------------------------------------------------ */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.stats li {
  background: var(--paper);
  padding: 22px 20px;
}
.stats b {
  display: block;
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 7px;
  background: linear-gradient(135deg, var(--blue), var(--violet), var(--magenta));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stats span {
  font-size: 0.86rem;
  color: var(--ink-3);
  font-weight: 600;
  line-height: 1.35;
  display: block;
}

/* --- the panel that carries the free/pro line ---------------------------- */

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  padding: clamp(24px, 3vw, 34px);
}
.panel h3 {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 18px;
}
.panel + .panel {
  margin-top: 16px;
}
.panel--pro {
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    linear-gradient(135deg, var(--blue), var(--violet), var(--magenta))
      border-box;
  border: 2px solid transparent;
}
.panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.panel li {
  position: relative;
  padding-left: 26px;
  font-size: 0.97rem;
  line-height: 1.45;
  color: var(--ink-2);
}
.panel li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.55em;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--good);
  border-bottom: 2px solid var(--good);
  transform: rotate(-45deg);
}
.panel[data-mark="none"] li {
  padding-left: 22px;
  color: var(--ink-3);
}
.panel[data-mark="none"] li::before {
  content: "";
  left: 3px;
  top: 0.62em;
  width: 10px;
  height: 2px;
  border: 0;
  background: var(--ink-3);
  transform: none;
  opacity: 0.6;
}

/* --- the widget cards, with something drawn in them ---------------------- */

.card--art {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card--art .art {
  display: block;
  width: 100%;
  height: 128px;
  background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--blue) 7%, var(--paper-2)),
    color-mix(in srgb, var(--magenta) 7%, var(--paper-2))
  );
  border-bottom: 1px solid var(--line);
}
.card--art .body {
  padding: 22px 24px 26px;
}
.card--art .card__n {
  margin-bottom: 10px;
}
/* The drawings are one colour plus the brand, so they invert with the page. */
.art .ln {
  fill: color-mix(in srgb, var(--ink) 20%, transparent);
}
.art .ln-soft {
  fill: color-mix(in srgb, var(--ink) 11%, transparent);
}
.art .panel-bg {
  fill: var(--paper);
  stroke: color-mix(in srgb, var(--ink) 13%, transparent);
  stroke-width: 1;
}
.art .star {
  fill: var(--gold);
}
.art .brand {
  fill: var(--blue);
}
.art .brand-soft {
  fill: color-mix(in srgb, var(--blue) 30%, transparent);
}
.card:hover .art .star {
  transform-origin: center;
  animation: twinkle 1.6s ease-in-out;
}

/* --- switching: the six, arrowed in -------------------------------------- */

.from-to {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 34px 0 0;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.tag {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-2);
}
.tag--muted {
  color: var(--ink-3);
  border-style: dashed;
  background: transparent;
  font-weight: 500;
}
.from-to__arrow {
  font-size: 1.5rem;
  color: var(--ink-3);
  line-height: 1;
}
.tag--us {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--violet));
  font-weight: 700;
  gap: 8px;
}
.tag--us img {
  width: 20px;
  height: 20px;
}

/* --- honestly: three steps, and the gaps as plain chips ------------------ */

.steps {
  counter-reset: step;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}
.steps li {
  counter-increment: step;
  border-top: 2px solid var(--ink);
  padding-top: 18px;
  color: var(--ink-2);
  font-size: 0.98rem;
  line-height: 1.5;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.steps li b {
  display: block;
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 6px;
}

/* ==========================================================================
   The free plan section

   Scoped to `.freeplan` on purpose. This one section was redesigned to a
   tighter brief than the rest of the page — no gradients, one accent, thin
   borders, more air — and scoping is what keeps that from leaking into the
   three sections that were not part of it.

   Two rules the rest of the site does not follow:
   the ticks here are #0000FF rather than green, and nothing is painted with
   a gradient, including the numbers.
   ========================================================================== */

.freeplan {
  /* Very subtle rather than the page's usual off-white block: the cards are
     white and need something to lift off, but the section should read as
     almost-paper. */
  background: #f8f9fb;
  padding: clamp(72px, 10vw, 150px) 0;

  /* The brand gradient is the accent here, as it is everywhere else on the
     site. It is painted where there is room for it to read -- the numbers
     and the Pro card's edge -- and the solid violet out of its middle is
     used for the small things, because a 2px tick and letterspaced 0.84rem
     caps both turn to mud under a three-stop gradient. */
  --fp-grad: linear-gradient(135deg, var(--blue), var(--violet), var(--magenta));
  --fp-ink: var(--violet);
}
@media (prefers-color-scheme: dark) {
  .freeplan {
    background: #0b0d22;
  }
}

.freeplan .eyebrow {
  color: var(--fp-ink);
  letter-spacing: 0.14em;
  margin-bottom: 22px;
}

.freeplan h2 {
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  letter-spacing: -0.04em;
  line-height: 1.0;
  margin-bottom: 0.6em;
  max-width: 14ch;
}
/* The emphasis is typographic, not coloured: the serif italic drops "not a
   teaser." onto its own line and changes the voice without changing the
   palette. */
.freeplan h2 em.say {
  font-size: 1.1em;
}

.freeplan p {
  font-size: 1.06rem;
  line-height: 1.68;
  color: var(--ink-2);
  max-width: 48ch;
  margin-bottom: 1.5em;
}
.freeplan p strong {
  color: var(--ink);
  font-weight: 700;
}

.freeplan__grid {
  display: grid;
  gap: clamp(36px, 5vw, 88px);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .freeplan__grid {
    /* Tablet and up: two columns, tighter gap handled by the clamp above. */
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  }
}

/* --- the stats strip ----------------------------------------------------- */

.statline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: clamp(32px, 4vw, 48px) 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--paper);
  overflow: hidden;
}
.statline li {
  padding: 24px 20px;
  border-left: 1px solid var(--line);
}
.statline li:first-child {
  border-left: 0;
}
.statline b {
  display: block;
  font-size: clamp(1.75rem, 3.1vw, 2.15rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  background: var(--fp-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 10px;
}
.statline span {
  display: block;
  font-size: 0.86rem;
  line-height: 1.35;
  color: var(--ink-3);
  font-weight: 500;
}
@media (max-width: 620px) {
  .statline {
    grid-template-columns: repeat(2, 1fr);
  }
  .statline li:nth-child(odd) {
    border-left: 0;
  }
  .statline li:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
}

/* --- the two cards ------------------------------------------------------- */

.fcard {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--paper);
  padding: clamp(26px, 3vw, 38px) clamp(24px, 3vw, 38px)
    clamp(30px, 3.4vw, 42px);
  box-shadow: 0 1px 2px rgb(16 24 40 / 4%);
}
.fcard + .fcard {
  margin-top: 20px;
}
.fcard h3 {
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 24px;
}

.fcard--pro {
  /* Two backgrounds: the tint clipped to the padding box, the gradient to
     the border box. A border cannot take a gradient on its own. */
  background:
    linear-gradient(
        color-mix(in srgb, var(--violet) 4%, var(--paper)),
        color-mix(in srgb, var(--violet) 4%, var(--paper))
      )
      padding-box,
    var(--fp-grad) border-box;
  border: 1.5px solid transparent;
  box-shadow: none;
}
.fcard--pro h3 {
  color: var(--fp-ink);
}

.fcard ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 15px;
}
.fcard li {
  position: relative;
  padding-left: 36px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  max-width: none;
}
/* A thin blue tick, drawn rather than set, so its weight matches the
   1px borders around it instead of a font's idea of a checkmark. */
.fcard li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.44em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--fp-ink);
  border-bottom: 2px solid var(--fp-ink);
  transform: rotate(-45deg);
}