/* For CROs — Figma v4 (RzeLtCm9OafORGhYPS7w1d), frame 22:228 (1440 x 5437).
   Body faithful to v4; nav and footer are the site's current ones by decision,
   so navigation stays consistent while the rest of the site is still on v3. */

/* The nav sits on the lime in v4, not on its own off-white band. */
.cro-page .blog-nav-holder { position: absolute; top: 0; left: 0; width: 1440px; z-index: 2; }
.cro-page .cro-hero { padding-top: 0; }

/* ---- Hero (22:229) — 1440 x 986, lime ---- */
.cro-hero {
  position: relative;
  height: 986px;
  background: var(--lime);
  overflow: hidden;
}

.cro-hero__lines {
  position: absolute;
  top: 264px;
  left: 0;
  width: 1440px;
  height: 722px;
  pointer-events: none;
}

/* The design fades the lime into the dark section with a large blurred
   ellipse; reproduced as a gradient so it scales and weighs nothing. */
/* The blurred ellipse as Figma renders it, bleed included (1440 x 313,
   starting 120px above the ellipse box because of the blur). */
.cro-hero__fade {
  position: absolute;
  top: 673px;
  left: 0;
  width: 1440px;
  height: 313px;
  pointer-events: none;
}

.cro-hero__content {
  position: absolute;
  top: 88px;
  left: 80px;
  width: 1280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 60px 80px 80px;
}

.cro-hero__eyebrow {
  margin: 0;
  font-family: var(--font-inter);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--obsidian);
  transform: translateY(var(--figma-baseline-shift-inter));
}

.cro-hero h1 {
  width: 676px;
  margin: 0;
  font-size: 64px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  color: var(--obsidian);
  transform: translateY(var(--figma-baseline-shift));
}

.cro-hero__sub {
  width: 584px;
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  color: var(--obsidian);
  transform: translateY(var(--figma-baseline-shift));
}

.cro-hero .btn {
  padding: 14px 28px;
  font-family: var(--font-inter);
}

.cro-hero .btn > span { transform: translateY(var(--figma-baseline-shift-inter)); }

/* Line-art labels */
.cro-pill {
  position: absolute;
  display: inline-flex;
  align-items: center;
  height: 51px;
  padding: 12px 16px;
  border-radius: 100px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--muted);
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 27px;
  color: var(--obsidian);
  white-space: nowrap;
}

.cro-pill > span { transform: translateY(var(--figma-baseline-shift-mono)); }
.cro-pill--tools { top: 381px; left: 112px; }
.cro-pill--work  { top: 435px; left: 1270px; }

/* ---- Problem cards (22:249) — 1440 x 611, obsidian ---- */
.cro-problems {
  position: relative;
  height: 611px;
  background: var(--obsidian);
  padding: 0 80px;
}

.cro-problems h2 {
  position: absolute;
  top: 71px;
  left: 80px;
  margin: 0;
  font-size: 45px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--off-white);
  transform: translateY(var(--figma-baseline-shift));
}

.cro-problems__grid {
  position: absolute;
  top: 177px;
  left: 80px;
  display: grid;
  grid-template-columns: repeat(4, 320px);
  width: 1280px;
  height: 363px;
}

.cro-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 32px;
  box-shadow: inset 0 0 0 1px var(--obsidian);
}

.cro-card:nth-child(1) { background: var(--white); }
.cro-card:nth-child(2) { background: var(--lime); }
.cro-card:nth-child(3) { background: var(--sky-blue); }
.cro-card:nth-child(4) { background: var(--sage); }

.cro-card h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--obsidian);
  transform: translateY(var(--figma-baseline-shift));
}

.cro-card p {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
  transform: translateY(var(--figma-baseline-shift));
}

/* ---- What changes (22:264) — 1440 x 920, obsidian ---- */
.cro-changes {
  position: relative;
  height: 920px;
  background: var(--obsidian);
  box-shadow: inset 0 1px 0 var(--obsidian);
  padding: 120px 80px;
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

.cro-changes__intro { width: 371px; display: flex; flex-direction: column; gap: 32px; }

.cro-changes__intro h2 {
  margin: 0;
  font-size: 56px;
  font-weight: 500;
  line-height: 1.05;
  color: var(--off-white);
  white-space: nowrap;
  transform: translateY(var(--figma-baseline-shift));
}

.cro-changes__intro p {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--off-white);
  transform: translateY(var(--figma-baseline-shift));
}

.cro-changes__intro .btn { align-self: flex-start; padding: 13px 24px; }

/* Four stacked nodes with an orange icon rail.
   876px does not fit the 849px left after the intro column and the gap, and
   Figma lets it overflow the section padding rather than shrink — as a flex
   item it would otherwise squeeze to 849 and wrap the fourth title. */
.cro-nodes { flex: 0 0 876px; box-shadow: inset 0 0 0 2px var(--obsidian); }

/* All four nodes are 170px in the design. Left to content they come out at
   169.5 (the 45px title's 1.1 line box), and the half-pixel accumulates into a
   2px drift by the last separator. */
.cro-node {
  display: flex;
  align-items: stretch;
  height: 170px;
  background: var(--white);
  box-shadow: inset 0 -2px 0 var(--obsidian);
}

.cro-node:last-child { box-shadow: inset 2px 0 0 var(--obsidian); }

.cro-node__badge {
  flex: 0 0 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--orange);
  box-shadow: inset 0 -2px 0 var(--muted);
}

.cro-node:last-child .cro-node__badge { box-shadow: none; }
.cro-node__badge img { width: 32px; height: 32px; }

.cro-node__body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 24px; }

.cro-node__body h3 {
  margin: 0;
  font-size: 45px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--obsidian);
  transform: translateY(var(--figma-baseline-shift));
}

.cro-node__body p {
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
  white-space: pre-line;
  transform: translateY(var(--figma-baseline-shift));
}

/* ---- Testimonial (22:279) — 1440 x 635, lime ---- */
.cro-quote {
  height: 635px;
  background: var(--lime);
  padding: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.cro-quote__who { display: flex; flex-direction: column; align-items: center; gap: 16px; }

.cro-quote__who img {
  width: 120px;
  height: 120px;
  border-radius: 1000px;
  object-fit: cover;
  box-shadow: inset 0 0 0 2px var(--obsidian);
}

.cro-quote__who p {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--obsidian);
  transform: translateY(var(--figma-baseline-shift));
}

.cro-quote blockquote {
  width: 920px;
  margin: 0;
  font-size: 45px;
  font-weight: 500;
  line-height: 1.1;
  text-align: center;
  color: var(--obsidian);
  transform: translateY(var(--figma-baseline-shift));
}

/* ---- Stack (2048:466) — 1440 x 640 ---- */
.cro-stack {
  position: relative;
  height: 640px;
  background: var(--off-white);
  box-shadow: inset 0 -2px 0 var(--obsidian);
  display: flex;
}

.cro-stack__intro {
  flex: 0 0 460px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 80px;
  box-shadow: inset -2px 0 0 var(--obsidian);
}

.cro-stack__intro h2 {
  margin: 0;
  font-size: 45px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--obsidian);
  transform: translateY(var(--figma-baseline-shift));
}

.cro-stack__intro p {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
  transform: translateY(var(--figma-baseline-shift));
}

.cro-stack__intro .btn { align-self: flex-start; padding: 13px 24px; }

/* ~40 Figma nodes of glow, shadow and logo rasters: shipped as one export.
   This is the home page's export, not a v4 one: the v4 node exports with the
   frame's white background baked in, which paints an opaque rectangle over the
   intro column to its left. The diagram is identical in both files, and the
   section geometry (640 tall, 460 intro) matches the home's, so the home's
   transparent export drops straight in at its own offsets. */
.cro-stack__orbit {
  position: absolute;
  top: 47.75px;
  left: 197.969px;
  width: 1202.031px;
  height: 542.25px;
}

/* ---- FAQ (2039:514) — 1440 x 542 collapsed ----
   The Figma frame shows every row closed, so the section keeps its 542px at
   rest. The answers were written after the design, so the rows became real
   <details>: no JS to open them, and the height is a floor rather than a fix so
   an open row can push the section down. */
.cro-faq {
  min-height: 542px;
  background: var(--off-white);
  padding: 120px 80px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.cro-faq h2 {
  margin: 0;
  font-size: 45px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--obsidian);
  transform: translateY(var(--figma-baseline-shift));
}

.cro-faq__list { box-shadow: inset 0 0 0 1px var(--obsidian); }

.cro-faq__item { display: block; box-shadow: inset 0 -1px 0 var(--obsidian); }

.cro-faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 24px;
  cursor: pointer;
  list-style: none;
}

.cro-faq__item summary::-webkit-details-marker { display: none; }
.cro-faq__item summary::marker { content: ""; }
.cro-faq__item summary:focus-visible { outline: 2px solid var(--orange); outline-offset: -4px; }

.cro-faq__item h3 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--muted);
  transform: translateY(var(--figma-baseline-shift));
}

.cro-faq__item[open] h3 { color: var(--obsidian); }

.cro-faq__item img { flex: 0 0 24px; width: 24px; height: 24px; margin-top: 4px; }

/* The plus turns into a close mark; one asset, no second icon to keep in sync. */
.cro-faq__item[open] img { transform: rotate(45deg); }

@media (prefers-reduced-motion: no-preference) {
  .cro-faq__item img { transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1); }
}

.cro-faq__answer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 980px;
  padding: 0 24px 28px;
}

.cro-faq__answer p,
.cro-faq__answer li {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
  transform: translateY(var(--figma-baseline-shift));
}

.cro-faq__answer b { color: var(--obsidian); font-weight: 700; }

.cro-faq__answer ul { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.cro-faq__answer li { display: flex; gap: 12px; }
.cro-faq__answer li::before { content: "\25AA"; flex: 0 0 auto; color: var(--orange); }

/* ---- Booking (22:423) — 1440 x 693 ---- */
.cro-booking {
  position: relative;
  height: 693px;
  background: var(--off-white);
  box-shadow: inset 0 2px 0 var(--obsidian);
  display: flex;
  align-items: stretch;
}

.cro-booking__copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  padding: 120px 80px;
  box-shadow: inset -2px 0 0 var(--obsidian);
}

.cro-booking__copy h2 {
  margin: 0;
  font-size: 45px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--obsidian);
  transform: translateY(var(--figma-baseline-shift));
}

.cro-booking__copy p {
  width: 600px;
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
  transform: translateY(var(--figma-baseline-shift));
}

.cro-booking__copy .btn {
  align-self: flex-start;
  padding: 13px 24px;
  font-family: var(--font-inter);
  color: var(--off-white);
}

.cro-booking__copy .btn > span { transform: translateY(var(--figma-baseline-shift-inter)); }

.cro-booking img { flex: 0 0 677px; width: 677px; height: 693px; object-fit: cover; }