/* =====================================================================
   Compport Blog — "6 Reasons Why You Should Not Manage Compensation in Workday"
   Replica of Figma file WzKMxf9FQXYf9serlb28mf
     • Desktop  — node 912:3  "blog page"   (1440 wide)
     • Mobile   — node 1212:2197 "Blog - Mobile" (390 wide)
   Measurements are taken from the Figma frames. Figma rounds "auto" line
   heights to whole pixels, so every line-height here is explicit.
   ===================================================================== */

/* ---------- Fonts ---------- */
@font-face { font-family: "General Sans"; src: url("../assets/fonts/GeneralSans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../assets/fonts/GeneralSans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../assets/fonts/GeneralSans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../assets/fonts/GeneralSans-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("../assets/fonts/OpenSans-latin.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/Inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --navy: #041d6a;
  --indigo: #687cea;
  --indigo-2: #687be9;
  --ink: #363636;
  --heading: #252525;
  --muted: #828eb5;
  --gray: #6b7280;
  --cream: #fdf3de;
  --cream-row: rgba(253, 243, 222, 0.6);
  --khaki: #f0ecc7;
  --pink: #feecf7;
  --sky: #c0e0f6;
  --green: #76bd40;
  --blue: #0099ff;
  --lilac: #f3f2ff;
  --on-indigo: #efeffe;
  --brand-gradient: linear-gradient(131.9deg, #f3af13 9.57%, #687be9 60.19%);
  --card-border: linear-gradient(90deg, #1da2ff 0%, #f3af13 100%);

  --font: "General Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-nav: "Open Sans", system-ui, sans-serif;
  --font-footer: "Neue Haas Grotesk Display Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --container: 1144px;
  --blank: 24px;              /* one empty 18px line in Figma */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font);
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, ol, ul { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.m, .logo-m, .menu-toggle, .mobile-menu, .m-dot { display: none; }
[hidden] { display: none !important; }

.container { width: var(--container); max-width: calc(100% - 64px); margin-inline: auto; }

.hl { color: var(--indigo); }
.u { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: from-font; }
a.hl:hover, .hl a:hover, .prose a:hover { text-decoration: underline; }

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header { padding-top: 50.5px; }
.header-row {
  display: grid;
  grid-template-columns: 317.75px 1fr 317.75px;
  column-gap: 32px;
  align-items: center;
  height: 45px;
}
.logo { display: block; width: 161.49px; height: 42.06px; margin-top: 1.5px; }
.logo img { width: 100%; height: 100%; }
.main-nav {
  display: flex;
  justify-content: center;
  gap: 0;
  font-family: var(--font-nav);
  font-weight: 600;
  font-size: 16px;
  line-height: 29px;
  color: #000;
  margin-top: 0.5px;
}
.main-nav a:nth-child(1) { width: 118.25px; }
.main-nav a:nth-child(2) { width: 116px; }
.main-nav a:nth-child(3) { width: 126.25px; }
.main-nav a:nth-child(4) { width: 84px; }
.main-nav a { display: inline-flex; align-items: center; gap: 4px; transition: color .15s; }
.main-nav a:hover { color: var(--blue); }
.main-nav .has-caret img { width: 8.87px; height: 7.68px; transform: rotate(180deg); margin: 0 0.7px; }
.header-cta { display: flex; justify-content: flex-end; }
.btn-demo {
  display: inline-flex; align-items: center; justify-content: center;
  height: 45px; padding: 8px 20px;
  border-radius: 50px;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 16px;
  line-height: 29px;
  transition: background .15s, transform .15s;
}
.btn-demo:hover { background: #0086e0; }

/* =====================================================================
   HERO
   ===================================================================== */
/* Centred column. Horizontal offsets are measured from the page centre
   (x = 720 in the 1440 frame), so they hold at any container width. */
.hero {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 142.28px 0 52.87px;     /* byline top = 237.78, button bottom = 649.07 */
}
.hero > .byline { margin: 0 0 0 calc(50% - 104px); }
.hero-title {
  align-self: center;
  width: 1092px; max-width: 100%;
  margin-top: 39.85px;
  font-size: 60px; line-height: 81px; font-weight: 500;
  color: var(--navy);
  text-align: center;
  text-transform: capitalize;
  /* Figma fills "6 Reasons" with a gradient laid over the whole text box */
  background: linear-gradient(149.9deg, #f3af13 9.57%, #687be9 21.74%);
  -webkit-background-clip: text; background-clip: text;
}
.hero-kicker { color: transparent; -webkit-text-fill-color: transparent; }
.byline { display: flex; align-items: center; height: 37.72px; }
.byline-avatar { width: 37.72px; height: 37.72px; border-radius: 50%; }
.byline-name, .byline-date {
  font-size: 14.376px; line-height: 19px; color: var(--indigo-2); font-weight: 500;
}
.byline-name { margin-left: 11.52px; text-decoration: underline; text-underline-offset: 2px; }
.byline-li { margin-left: 2.72px; width: 21.09px; height: 21.28px; position: relative; top: 1.13px; }
.byline-li img { width: 100%; height: 100%; }
.byline-sep { width: 1px; height: 22.06px; background: #b9b9b9; margin-left: 8.25px; }
.byline-date { margin-left: 13.22px; }

.btn-expert {
  position: relative;
  display: block;
  width: 303.05px; height: 62px;
  margin: 39.86px 0 0 calc(50% - 164.8px);
  border-radius: 69px;
  background: var(--indigo);
  color: var(--on-indigo);
  font-weight: 600; font-size: 20px; line-height: 27px;
  transition: background .15s;
}
.btn-expert span { position: absolute; left: 41.74px; top: 17.5px; }
.btn-expert-arrow {
  position: absolute;
  width: 24.49px; height: 41.89px;
  left: calc(223.3px + 8.7px); top: calc(18.73px - 8.7px);   /* rotated about its centre */
  transform: rotate(-90deg);
  transition: transform .2s;
}
.btn-expert-arrow-m { display: none; }
.btn-expert:hover { background: #5a6ee0; }
.btn-expert:hover .btn-expert-arrow { transform: rotate(-90deg) translateY(4px); }

.summarize {
  display: flex; align-items: center; gap: 25.25px;
  margin: 39.86px 0 0 calc(50% - 191.96px);
}
.summarize-label { font-size: 15px; line-height: 20px; color: var(--indigo); margin-top: 0; }
.summarize-icons { display: flex; align-items: center; gap: 0; height: 30px; }
.summarize-icons a { display: block; transition: transform .15s; }
.summarize-icons a:hover { transform: translateY(-2px); }
.summarize-icons a + a { margin-left: 22.35px; }
.summarize-icons a:nth-child(2) { margin-left: 22.35px; }
.summarize-icons a:nth-child(3) { margin-left: 22.35px; }
.summarize-icons a:nth-child(4) { margin-left: 22.35px; }
.summarize-icons a:nth-child(5) { margin-left: 22.35px; }
.summarize-icons img { object-fit: contain; }

/* =====================================================================
   LAYOUT: sticky sidebar + article
   ===================================================================== */
.layout {
  display: grid;
  grid-template-columns: 281px 815.21px;
  column-gap: 47.79px;              /* article column starts at x = 476.79 */
  margin-top: 16.1px;               /* main frame top = 718 */
  align-items: stretch;
}
.sidebar { padding-top: 22px; }
.sidebar-sticky { position: sticky; top: 0; height: 872px; }

/* TOC */
.toc-title {
  position: absolute; left: 0; top: 73.59px;
  font-size: 16px; line-height: 22px; color: var(--navy);
  text-transform: uppercase; white-space: nowrap;
}
.toc-track {
  position: absolute; left: 0; top: 107.44px; width: 260px; height: 499.86px;
}
.toc-track::before {
  content: ""; position: absolute; left: 3.93px; top: 0; bottom: 0; width: 1px;
  background: rgba(130, 142, 181, 0.38);
}
.toc-indicator {
  position: absolute; left: 3.85px; top: 16.19px; width: 1px; height: 25.02px;
  background: var(--indigo);
  transition: top .25s ease, height .25s ease;
}
.toc-list { list-style: none; padding: 0; position: absolute; left: 21.26px; top: 19.11px; }
.toc-list li + li { margin-top: 15.07px; }
.toc-list a {
  display: block; font-size: 14px; line-height: 19px; color: var(--muted);
  transition: color .15s;
}
.toc-list a em { font-style: normal; color: var(--indigo); }
.toc-list a:hover { color: var(--navy); }
.toc-list li:nth-child(2) { width: 225.1px; }
.toc-list li:nth-child(4) { width: 218.86px; }
.toc-list li:nth-child(5) { width: 186px; }
.toc-list li:nth-child(6) { width: 214.24px; }
.toc-list li:nth-child(8) { width: 136.5px; }
.toc-list li:nth-child(9) { width: 177.68px; }
.toc-list li:nth-child(10) { width: 169px; }

/* Subscribe */
.subscribe {
  position: absolute; left: -0.38px; top: 640.77px;
  width: 268.38px; height: 198.76px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: linear-gradient(#f7f7f7, #f7f7f7) padding-box, var(--card-border) border-box;
}
.subscribe-text {
  position: absolute; left: 22.18px; top: 20.71px; width: 235.18px;
  font-size: 18px; line-height: 24px; color: var(--navy); text-transform: capitalize;
}
.subscribe-btn {
  position: absolute; left: 17.15px; top: 133.63px;
  width: 235.18px; height: 45.3px; border-radius: 9px;
  background: linear-gradient(143deg, #f3af13 9.57%, #687be9 60.19%);
  color: #fff; font-size: 15px; line-height: 20px; text-align: left;
  transition: filter .15s;
}
.subscribe-btn span { position: absolute; left: 19.68px; top: 12.65px; }
.subscribe-btn img {
  position: absolute; left: 200.4px; top: 13.3px; width: 14.25px; height: 18.83px;
  transform: rotate(90deg);
}
.subscribe-btn:hover { filter: brightness(1.05) saturate(1.1); }

/* =====================================================================
   ARTICLE
   ===================================================================== */
.article { padding-top: 100.17px; min-width: 0; }

/* Indigo title bars */
.bar {
  height: 49px; border-radius: 16px; background: var(--indigo);
  color: #fff; font-size: 18px; line-height: 24px;
  padding: 12.5px 24px 0; white-space: nowrap;
  width: 814.3px;
  scroll-margin-top: 24px;
}
#tldr { padding-left: 12.5px; }

.panel { border: 1px solid var(--cream); border-radius: 16px; margin-top: 6.14px; }

/* numbered lists */
.numlist { list-style: none; padding: 0; counter-reset: n; }
.numlist li { counter-increment: n; position: relative; color: var(--navy); }
.numlist li::before {
  content: counter(n);
  position: absolute;
  width: 21.63px; height: 21.63px; border-radius: 50%;
  background: var(--cream); color: #000;
  font-size: 10px; line-height: 21.63px; text-align: center;
}

.panel--tldr { height: 398.58px; width: 814.3px; padding: 24px 0 0 77px; }
.numlist--tldr li { line-height: 40px; }
.numlist--tldr li::before { left: -40px; top: 11.7px; }
.numlist--tldr a { transition: color .15s; }
.numlist--tldr a:hover { color: var(--indigo); }

.numlist--rows li {
  height: 57.79px;
  padding: var(--pt, 25px) 0 0 var(--pl, 61px);
  white-space: nowrap;
}
.numlist--rows li::before { left: var(--cl, 21px); top: calc(var(--pt, 25px) + 1.2px); }
.numlist--rows li.is-hl { background: linear-gradient(var(--cream-row), var(--cream-row)) 0 0 / 100% 56.43px no-repeat; }

.panel--break { width: 814.3px; height: 304.14px; }
.panel--break li.is-hl { border-radius: 15px 15px 0 0; }
.panel--break .numlist--rows { --pl: 59.43px; --cl: 19.4px; width: 812.65px; margin: -0.89px 0 0 0.58px; }

/* prose */
.prose { color: var(--ink); width: 767px; }
.prose > * + * { margin-top: var(--blank); }
.prose ul { padding-left: 27px; list-style: disc; }
.prose ul li::marker { font-size: 18px; }
.prose strong { font-weight: 600; }
.prose--intro { width: 814.3px; margin-top: 22.2px; }
.prose--hes { width: 806px; margin-top: 40.88px; }

/* headings */
.h2 {
  font-size: 38px; line-height: 51px; font-weight: 600; color: var(--heading);
  width: 767px; scroll-margin-top: 90px;
}
.h2--hes { width: 794px; margin-top: 28.97px; margin-left: -1.1px; }
.h3 {
  position: relative; font-size: 24px; line-height: 32px; font-weight: 600; color: var(--heading);
  padding-left: 14px;
}
.h3::before {
  content: ""; position: absolute; left: -1.5px; top: 3px; width: 3px; height: 29px; background: var(--green);
}
.h3 small { font-size: 18px; line-height: 1; font-weight: 500; color: var(--indigo); }
.h3--q1 { padding-left: 17px; }
.h3--q2 { padding-left: 16px; }
.h3--q1::before, .h3--q2::before { left: 1.26px; top: 0; height: 31.4px; }
.h3--dep { padding-left: 18px; }
.h3--s15 { padding-left: 15px; }
.h3--s20 { padding-left: 20px; }
.h4 { position: relative; font-size: 18px; line-height: 24px; font-weight: 500; }
.h4::before { content: ""; position: absolute; left: -1.5px; top: -1.3px; width: 3px; height: 29px; background: var(--green); }
.h4--a { padding-left: 19px; }
.h4--b { padding-left: 15px; }

/* CTA boxes */
.cta-box {
  position: relative;
  width: 815.3px; height: 148.57px;
  border-radius: 16px; background: var(--sky);
}
.cta-box--1 { margin-top: 38.6px; margin-left: -1.07px; }
.cta-box-text {
  position: absolute; left: 41.18px; top: 42.28px; width: 416.01px;
  font-size: 24px; line-height: 32px; color: var(--navy);
}
.btn-explore {
  position: absolute; left: 571.95px; top: 43.28px;
  width: 165.87px; height: 62px; border-radius: 69px;
  background: var(--indigo); color: var(--on-indigo);
  font-weight: 600; font-size: 20px; line-height: 62px; text-align: center;
  padding-right: 1px;
  transition: background .15s, transform .15s;
}
.btn-explore:hover { background: #5a6ee0; transform: translateY(-1px); }

.bar--2 { margin-top: 40.52px; }

/* Hidden cost */
.bar--hidden { margin-top: 40.6px; padding-left: 37.52px; width: 814.43px; margin-left: 0.74px; }
.panel--hidden { width: 815.17px; height: 593.46px; margin-top: 6.93px; position: relative; }
.hidden-quote { position: absolute; left: 36.52px; top: 20.42px; color: var(--navy); white-space: nowrap; }
.hidden-lead { position: absolute; left: 36.52px; top: 67.19px; color: var(--indigo); white-space: nowrap; }
.numlist--hidden { position: absolute; left: -1px; right: -1px; top: 140.7px; --pt: 13.79px; --pl: 74.46px; --cl: 37.52px; }
.numlist--hidden li:last-child { height: auto; padding-top: 8.35px; }
.numlist--hidden li:last-child::before { top: 9.55px; }
.hidden-note { position: absolute; left: 36.52px; top: 484.75px; color: var(--indigo); white-space: nowrap; }
.hidden-link {
  position: absolute; left: 36.52px; top: 532.7px; color: var(--navy);
  text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
.hidden-link:hover { color: var(--indigo); }

/* Reasons */
.reason { scroll-margin-top: 24px; }
.reason-label { color: var(--heading); font-size: 18px; line-height: 24px; }
.reason .h2 { margin-top: 11px; }
.h3--problem { margin-top: 36px; }
.reason .prose { margin-top: 30.92px; }
.reason--4 .prose, .reason--5 .prose, .reason--6 .prose { margin-top: 39.21px; }
.prose-note { width: 605.54px; margin-top: 34.47px; }

.reason--1 { margin-top: 43.8px; }
.reason--2 { margin-top: 66px; }
.reason--3 { margin-top: 57.5px; }
.reason--4 { margin-top: 66.4px; }
.reason--5 { margin-top: 68.6px; }
.reason--6 { margin-top: 63.9px; }

/* At a glance table */
.bar--glance { margin-top: 50.3px; width: 815.3px; }
.glance {
  position: relative;
  width: 815.3px; height: 567.8px; margin-top: 6.93px;
  border-radius: 16px;
  background:
    linear-gradient(to right, var(--khaki) 0 260.39px, transparent 260.39px calc(100% - 260.39px), var(--khaki) calc(100% - 260.39px));
  display: grid;
  grid-template-rows: 56.6px 95.8px 97.9px 91.3px 109.8px 116.4px;
  color: var(--navy);
}
.glance-hl { position: absolute; left: 260.39px; right: 260.39px; top: 250.3px; height: 91.3px; background: var(--cream-row); }
.glance-row { display: grid; grid-template-columns: 260.39px 1fr 260.39px; position: relative; }
.glance-row > div { padding-top: 21.7px; }
.glance-row > div:nth-child(1) { padding-left: 24.06px; }
.glance-row > div:nth-child(2) { padding-left: 32.27px; }
.glance-row > div:nth-child(3) { padding-left: 25.54px; }
.glance-row > [role="cell"] { width: calc(var(--w) + var(--pad, 0px)); }
.glance-row > [role="cell"]:nth-child(1) { --pad: 24.06px; }
.glance-row > [role="cell"]:nth-child(2) { --pad: 32.27px; }
.glance-row > [role="cell"]:nth-child(3) { --pad: 25.54px; }
.glance-row > .up12 { margin-top: -12px; }
.glance-head > div { padding-top: 18.39px; color: var(--indigo); display: flex; align-items: flex-start; }
.gi { flex: none; margin-right: 5.1px; }
.gi-1 { width: 23.77px; height: 23.92px; }
.gi-2 { width: 24.71px; height: 24.27px; margin-right: 6.8px; }
.gi-3 { width: 22.09px; height: 22.09px; margin-right: 8.4px; margin-top: 2.36px; }
/* rows 2–5 start at top of their band; row 1 is visually centred */
.glance-row:nth-child(3) > div { padding-top: 33.67px; }  /* row 1 (result cell is lifted 12px) */
.glance-row:nth-child(6) > div { padding-top: 28.84px; }
.glance-row:nth-child(7) > div { padding-top: 21.62px; }

.cta-box--2 { margin-top: 47.28px; width: 815.31px; }

/* Real problem */
.real { margin-top: 48px; }
.real .h2 { width: 767px; margin-left: -0.87px; }
.prose--real { margin-top: 48px; margin-left: 2.58px; }
.prose--real .h3::before { left: 1.2px; }

/* How Compport solves table */
.bar--solves { margin-top: 58.4px; width: 812.7px; margin-left: 2.58px; }
.solves {
  position: relative;
  width: 812.7px; height: 688.23px; margin: 7.4px 0 0 2.58px;
  border-radius: 16px 0 0 16px;
  background: linear-gradient(to right, var(--khaki) 0 260.39px, transparent 260.39px);
  display: grid;
  grid-template-rows: 66.99px 97.85px 97.85px 98.46px 102.63px 102.62px 121.83px;
  color: var(--navy);
}
.solves-hl { position: absolute; left: 1.86px; width: 812.65px; top: 66.99px; height: 89.6px; background: var(--cream-row); z-index: 1; pointer-events: none; }
.solves-row { display: grid; grid-template-columns: 260.39px 1fr; position: relative; }
.solves-row > div { padding-top: 8.8px; }
.solves-row > div:nth-child(1) { padding-left: 24.06px; width: calc(24.06px + var(--w, 199.68px)); }
.solves-row > div:nth-child(2) { padding-left: 45.79px; width: calc(45.79px + var(--w, 440px)); }
.solves-row > div.nudge2 { padding-left: 48.09px; }   /* rows 4-5: text at x = 787.8 */
.solves-row > div.nudge1 { padding-left: 47.09px; }   /* row 6: x = 786.8 */
.solves-row:nth-child(8) > div:nth-child(1) { padding-left: 23.08px; }   /* child 1 is .solves-hl */
.solves-head > div { padding-top: 18.67px; color: var(--indigo); }

.prose--solves2 { margin-top: 42.6px; margin-left: 2.58px; width: 790px; }
.prose--solves2 p { white-space: nowrap; }
.prose--solves2 .h3::before { left: 1.2px; }

/* 4-col compare */
.bar--compare { margin-top: 34.9px; width: 813.14px; margin-left: -0.11px; }
.compare {
  display: grid;
  grid-template-columns: 154.71px 181.23px 181.23px 275.68px;
  column-gap: 6.73px;
  width: 813.03px; height: 458.77px; margin-top: 9.5px;
  color: var(--navy);
}
.compare-col { padding-top: 18.83px; }
.compare-col p + p { margin-top: 38.85px; }
.compare-head { color: var(--indigo); white-space: nowrap; }
.compare-col .compare-head + p { margin-top: 30.85px; }
.compare-col--area { background: var(--pink); border-radius: 16px 0 0 16px; padding-left: 47.11px; }
.compare-col--wd { background: var(--khaki); padding-left: 46.42px; }
.compare-col--wd p:not(.compare-head) { padding-left: 0.5px; }
.compare-col--ss { background: var(--pink); padding-left: 37.98px; }
.compare-col--ct { background: var(--khaki); border-radius: 0 16px 16px 0; padding-left: 55.49px; }
.compare-col--ct p:not(.compare-head) { padding-left: 9.08px; }
.compare-col--ss .compare-head + p, .compare-col--ct .compare-head + p { margin-top: 25.85px; }
.compare .w117 { width: 117px; }

.bar--choose {
  margin-top: 25.8px; margin-left: -2.65px; width: 815.68px;
  background: var(--khaki); color: var(--navy);
}
.panel--choose {
  position: relative; margin: 18.81px 0 0 -2.65px; width: 815.68px; height: 136.14px;
}
.panel--choose p { position: absolute; left: 25.6px; top: 21.42px; width: 636.51px; color: var(--navy); }
.panel--choose a {
  position: absolute; left: 23.06px; top: 86.26px; color: var(--navy);
  text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
.panel--choose a:hover { color: var(--indigo); }

.better { margin-top: 16.84px; margin-left: -2.65px; }
.better .h2 { white-space: nowrap; }
.prose--better { margin-top: 38.85px; margin-left: 3.76px; color: var(--navy); }
.prose--better a:hover { color: var(--indigo); }

/* =====================================================================
   TRUST / SHARE / WIDE CTA
   ===================================================================== */
.trust {
  position: relative;
  height: 190.75px; margin-top: 51.9px;
  border-radius: 16px;
  background: linear-gradient(-33.74deg, rgb(154, 204, 111) 31.28%, rgb(0, 141, 252) 78.35%);
  width: 1143.33px; max-width: calc(100% - 64px);
  transform: translateX(0.33px);
}
.trust-pill {
  position: absolute; left: 64.51px; top: 45.11px; width: 92.65px; height: 21.77px;
  border-radius: 2px; background: #a576f9;
  color: #fff; font-size: 15px; line-height: 21.77px; text-align: center;
}
.trust-title {
  position: absolute; left: 64.51px; top: 66.88px;
  color: #fff; font-weight: 600; font-size: 42px; line-height: 57px; white-space: nowrap;
}
.trust-badges img { position: absolute; }
.badge-1 { left: 817.32px; top: 38.2px; width: 88.05px; height: 114.35px; }
.badge-2 { left: 922.09px; top: 38.2px; width: 88.05px; height: 114.35px; }
.badge-3 { position: absolute; left: 1017.5px; top: 43.23px; width: 98.2px; height: 104.3px; overflow: hidden; }
.badge-3 img { position: absolute; left: -21.75%; top: -11.81%; width: 146.33%; height: 137.77%; max-width: none; }

.share {
  display: flex; justify-content: flex-end; align-items: center;
  height: 24px; margin-top: 41.2px;
  padding-right: 5.68px;
}
.share-label { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; margin-right: 11.12px; }
.share-label:hover { color: var(--indigo); }
.share-icon + .share-icon { margin-left: 40px; }
.share-icon { transition: transform .15s; }
.share-icon:hover { transform: translateY(-2px); }

.cta-wide {
  position: relative; height: 148.57px; margin-top: 44.3px;
  border-radius: 16px; background: var(--sky);
  width: 1143.33px; max-width: calc(100% - 64px);
  transform: translateX(-5.33px);    /* Figma box x = 143 */
}
.cta-wide .cta-box-text { left: 41.18px; top: 58.28px; width: auto; white-space: nowrap; }
.cta-wide .btn-explore { left: 905.3px; top: 43.28px; }

/* =====================================================================
   FAQ
   ===================================================================== */
.section-title { font-weight: 600; font-size: 42.62px; line-height: 58px; color: var(--heading); }
.section-sub { font-size: 20.188px; line-height: 27px; color: var(--gray); margin-top: 15.77px; }
.faq { margin-top: 48.3px; }
.faq-list { margin-top: 49.3px; }
.faq-item {
  border-radius: 13.46px; background: #fff;
  border: 1px solid #e5e7eb;          /* Figma 1.12px; Chrome draws 1px */
  transition: background .2s, border-color .2s;
}
.faq-item + .faq-item { margin-top: 8.97px; }
.faq-item:nth-child(2) { margin-top: 7.85px; }
.faq-item { position: relative; }
.faq-q {
  display: flex; align-items: flex-start; position: relative;
  width: 100%; text-align: left;
  padding: 21.43px 90px 0 25.92px; min-height: 69.78px;
  font-weight: 600; font-size: 17.945px; line-height: 24px; color: var(--indigo);
}
.faq-toggle {
  position: absolute; right: 21.43px; top: 22.55px; width: 35.89px; height: 35.89px; border-radius: 50%;
  background: #f6f8fb;
  transition: background .2s;
}
.faq-toggle::before, .faq-toggle::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 9.4px; height: 2px; margin: -1px 0 0 -4.7px;
  background: var(--gray); border-radius: 1px;
  transition: transform .2s, background .2s;
}
.faq-toggle::after { transform: rotate(90deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.faq-a > p {
  overflow: hidden;
  padding: 0 157px 0 25.92px;
  font-size: 15.702px; line-height: 21px; color: var(--gray);
}
.faq-a a { color: var(--indigo); text-decoration: underline; }
.faq-item.is-open { background: var(--lilac); border-color: transparent; }
.faq-item.is-open .faq-q { padding-top: 21.43px; min-height: 0; }
.faq-item.is-open .faq-a > p { margin-top: 0.68px; }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-item.is-open .faq-a > p { padding-bottom: 22.05px; }
.faq-item.is-open .faq-toggle { background: #ddd9fe; }
.faq-item.is-open .faq-toggle::before { background: #5542f6; }
.faq-item.is-open .faq-toggle::after { transform: rotate(0deg); opacity: 0; }
.faq-q:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================
   RECOMMENDED
   ===================================================================== */
.recommended { margin-top: 49.14px; }
.recommended .section-title { margin-left: -4.3px; }
.recommended .section-sub { margin-left: -4.2px; margin-top: 14.42px; }
.cards { position: relative; display: flex; gap: 12.72px; margin-top: 93.42px; margin-left: -1.22px; }
/* Offsets inside the card are Figma offsets minus the 1px border */
.card {
  position: relative; flex: none;
  width: 371.75px; height: 346px; border-radius: 12px;
  border: 1px solid transparent;
  background: linear-gradient(var(--lilac), var(--lilac)) padding-box, var(--card-border) border-box;
  box-shadow: 10px 16px 30px rgba(0, 0, 0, 0.08);
  transition: box-shadow .2s, transform .2s;
}
.card:hover { transform: translateY(-2px); box-shadow: 10px 20px 34px rgba(0, 0, 0, 0.12); }
.card-title {
  position: absolute; left: 35.57px; top: 25.83px;
  font-weight: 500; font-size: 27px; line-height: 36px; letter-spacing: -0.81px;
  color: var(--navy); white-space: nowrap;
}
.byline--card { position: absolute; left: 35.57px; top: 198.58px; width: max-content; white-space: nowrap; }
.card-more {
  position: absolute; left: 35.57px; top: 281.28px;
  font-size: 17.228px; line-height: 23px; color: #0082db;
}
.card-date {
  position: absolute; left: 225.35px; top: 273.63px;
  width: 119.61px; height: 38.12px; border-radius: 77.39px;
  background: var(--indigo); color: #fff;
  font-size: 14px; line-height: 38.12px; text-align: center;
}
.card:hover .card-more { text-decoration: underline; }
.cards-next { display: none; }

/* =====================================================================
   LETS TALK (image CTA)
   ===================================================================== */
.talk { position: relative; width: 1229.45px; max-width: 100%; margin: 70.53px auto 0; transform: translateX(-1.22px); }
.talk img { width: 100%; height: auto; }
.talk-hit { position: absolute; left: 42.9%; top: 73.2%; width: 14%; height: 12.8%; border-radius: 40px; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer {
  margin-top: 47.51px;
  background: #ecf7ff url("../assets/img/footer-pattern.svg") 0 0 / 1424px 579px no-repeat;
  font-family: var(--font-footer);
  color: #000;
}
.footer-inner { max-width: 1440px; margin: 0 auto; padding: 87px 64px 64px 47.17px; min-height: 578.6px; letter-spacing: -0.03em; }
.footer-top { display: flex; align-items: flex-start; height: 277.8px; }
.footer-logo { width: 258.38px; height: 67.3px; flex: none; }
.footer-logo img { width: 100%; height: 100%; }
.footer-cols { display: flex; gap: 50px; margin-left: 110.01px; margin-top: 1px; }
.footer-col { display: flex; flex-direction: column; }
.footer-col--sol { width: 199.12px; }
.footer-col:nth-child(2) { width: 75px; }
.footer-col:nth-child(3) { width: 83px; }
.footer-col:nth-child(4) { width: 153px; }
.footer-h { font-weight: 500; font-size: 17.6px; line-height: 26.4px; margin-bottom: 17.6px; white-space: nowrap; }
.footer-col a { font-size: 15.4px; line-height: 23.2px; padding: 8.7px 0; }
.footer-col a:hover { text-decoration: underline; }
.footer-social { display: flex; flex-direction: column; gap: 12px; margin-left: 180.02px; margin-top: 1px; }
.footer-social a { width: 24px; height: 24px; transition: transform .15s; }
.footer-social a:hover { transform: scale(1.1); }
.footer-social span { display: none; }
.footer-credits {
  display: flex; gap: 24px; align-items: center;
  margin-top: 80px; padding-top: 32px;
  border-top: 0.2px solid rgba(255, 255, 255, .5);
  font-size: 14px; line-height: 21px;
}
.footer-credits > p:first-child { flex: 0 0 206px; min-width: 0; white-space: nowrap; }
.footer-legal { display: flex; gap: 24px; }
.footer-legal a { text-decoration: underline; }

/* =====================================================================
   TABLET / NARROW DESKTOP (fluid)
   ===================================================================== */
@media (max-width: 1239px) {
  .header-row { grid-template-columns: auto 1fr auto; }
  .hero { padding-top: 100px; }
  .hero > .byline, .summarize, .btn-expert { align-self: center; margin-left: 0; }
  /* once the title wraps freely, the gradient goes on "6 Reasons" itself */
  .hero-title { font-size: 48px; line-height: 65px; background: none; }
  .hero-kicker { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; }

  .layout { grid-template-columns: 250px minmax(0, 1fr); column-gap: 40px; }
  .article .bar, .panel, .prose, .h2, .cta-box, .glance, .solves, .compare,
  .panel--choose, .prose--intro, .prose--hes, .prose--solves2, .h2--hes, .prose-note { width: 100% !important; max-width: 100%; }
  .bar { white-space: normal; height: auto; padding-bottom: 12.5px; }
  .prose--solves2 p, .better .h2 { white-space: normal; }
  br.d, br.hd { display: none; }

  .panel--tldr { height: auto; padding-bottom: 20px; }
  .numlist--tldr li { line-height: 26px; padding: 7px 0; }
  .numlist--tldr li::before { top: 9px; }
  .numlist--rows li { height: auto; min-height: 57.79px; white-space: normal; padding-bottom: 8px; }
  .panel--break, .panel--hidden { height: auto; padding-bottom: 20px; }
  .panel--break .numlist--rows { width: auto; margin: 0; }
  .main-nav { gap: 32px; }
  .main-nav a:nth-child(n) { width: auto; }
  .h2--hes { margin-left: 0; }
  .panel--hidden { position: static; padding: 20px 0 22px; }
  .panel--hidden > p, .panel--hidden > a { position: static; margin: 0 37.52px; white-space: normal; }
  .hidden-lead { margin-top: 23px !important; }
  .numlist--hidden { position: static; margin: 26px -1px 0; }
  .hidden-note { margin-top: 12px !important; }
  .hidden-link { display: block; margin-top: 24px !important; }

  .cta-box, .cta-wide { height: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 40px 41px; }
  .cta-box-text, .btn-explore, .cta-wide .cta-box-text, .cta-wide .btn-explore { position: static; }
  .btn-explore { flex: none; }

  .glance, .solves { height: auto; grid-template-rows: none; }
  .glance { background: linear-gradient(to right, var(--khaki) 0 32%, transparent 32% 68%, var(--khaki) 68%); }
  .glance-row { grid-template-columns: 32% 1fr 32%; padding-bottom: 20px; }
  .glance-row > [role="cell"] { width: auto; padding-right: 16px; }
  .glance-row > .up12 { margin-top: 0; }
  .glance-hl { display: none; }
  .solves { background: linear-gradient(to right, var(--khaki) 0 32%, transparent 32%); }
  .solves-row { grid-template-columns: 32% 1fr; padding-bottom: 20px; }
  .solves-row > div:nth-child(n) { width: auto; padding-right: 16px; }
  .solves-hl { display: none; }
  .compare { height: auto; grid-template-columns: 19% 22.5% 22.5% 1fr; column-gap: 6px; }
  .compare-col { padding: 18px 12px 24px 20px !important; }
  .compare-col p:not(.compare-head) { padding-left: 0 !important; }
  .compare-head { white-space: normal; }
  .panel--choose { height: auto; padding: 21px 26px 24px; }
  .panel--choose p, .panel--choose a { position: static; display: block; white-space: normal; width: auto; }
  .panel--choose a { margin-top: 18px; }

  .trust { height: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 40px 48px; transform: none; }
  .trust-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
  .trust-pill, .trust-title { position: static; }
  .trust-title { white-space: normal; font-size: 34px; line-height: 44px; }
  .trust-badges { display: flex; align-items: center; gap: 16px; flex: none; }
  .trust-badges img, .trust-badges .badge-3 { position: static; }
  .trust-badges .badge-3 img { position: absolute; }
  .trust-badges .badge-3 { position: relative; left: auto; top: auto; }
  .cta-wide { transform: none; }
  .cards { gap: 16px; margin-left: 0; }
  .card { flex: 1 1 0; width: auto; min-width: 0; }
  .card-title { left: 28px; font-size: 22px; line-height: 30px; letter-spacing: -0.66px; }
  .byline--card { left: 28px; top: 170px; transform: scale(.85); transform-origin: 0 50%; }
  .card { height: 316px; }
  .card-more { left: 28px; top: 251px; }
  .card-date { left: auto; right: 24px; top: 243.5px; }
  .footer-top { flex-wrap: wrap; height: auto; row-gap: 40px; }
  .footer-cols { margin-left: 60px; flex-wrap: wrap; }
  .footer-social { margin-left: 60px; }
}

@media (max-width: 1023px) {
  .main-nav { gap: 20px; font-size: 15px; }
  .layout { display: block; }
  .sidebar { display: none; }
  .hero-title { font-size: 40px; line-height: 54px; }
  .cards { flex-wrap: wrap; }
  .card { flex: 1 1 300px; max-width: 371.75px; }
}

/* =====================================================================
   MOBILE — Figma "Blog - Mobile" (390 wide)
   ===================================================================== */
@media (max-width: 767px) {
  :root { --blank: 14px; }
  body { font-size: 10px; line-height: 14px; }
  .container { max-width: none; width: auto; margin-inline: 0; }
  br.d { display: inline; }
  br.hd { display: none; }
  br.m { display: inline; }
  .hero { row-gap: 0; }

  /* header */
  .site-header { padding-top: 27px; position: relative; }
  .header-row { display: flex; justify-content: space-between; align-items: flex-start; height: 25px; padding: 0 29.1px 0 27px; }
  .main-nav, .header-cta, .logo-d { display: none; }
  .logo { width: 98px; height: 25px; margin: 0; }
  .logo-m { display: block; }
  .menu-toggle { display: block; width: 22px; height: 17px; margin-top: 4.5px; }
  .menu-toggle img { width: 22px; height: 17px; }
  .mobile-menu:not([hidden]) {
    display: flex; flex-direction: column; gap: 4px;
    position: absolute; left: 16px; right: 16px; top: 64px; z-index: 20;
    padding: 12px; border-radius: 14px; background: #fff;
    box-shadow: 0 12px 30px rgba(4, 29, 106, .14);
    font-family: var(--font-nav); font-weight: 600; font-size: 15px; line-height: 22px; color: #000;
  }
  .mobile-menu a { padding: 10px 12px; border-radius: 8px; }
  .mobile-menu a:not(.btn-demo):hover { background: #f3f7ff; }
  .mobile-menu .btn-demo { margin-top: 6px; height: 42px; }

  /* hero: kicker, title, byline, button, all centred (button sits 12.7px right of centre) */
  .hero { padding: 64.45px 0 170.07px; }
  .hero-title { order: 1; width: auto; margin-top: 0; font-size: 26px; line-height: 35px; }
  .hero-kicker { display: block; width: max-content; margin: 0 auto; }
  .hero > .byline { order: 2; align-self: flex-start; margin: 38.15px 0 0 calc(50% - 133.76px); }
  .summarize { display: none; }
  .btn-expert { order: 3; align-self: flex-start; width: 183.13px; height: 37.47px; margin: 38.15px 0 0 calc(50% - 78.86px); font-size: 15px; line-height: 20px; }
  .btn-expert span { left: 14.1px; top: 8.73px; }
  .btn-expert-arrow { display: none; }
  .btn-expert-arrow-m { display: block; position: absolute; left: 141.62px; top: 15.06px; width: 24.74px; height: 7.36px; transition: transform .2s; }
  .btn-expert:hover .btn-expert-arrow-m { transform: translateX(3px); }

  /* sidebar -> inline TOC */
  .layout { display: block; margin-top: 48.26px; padding: 0 21px 0 36.9px; }
  .sidebar { display: block; padding-top: 0; margin-left: -2.9px; }
  .sidebar-sticky { position: relative; height: 512px; }
  .toc-title { top: 0; left: -0.1px; }
  .toc-track { top: 33.85px; }
  .toc-list { top: 19.12px; }
  .subscribe { display: none; }

  .article { padding-top: 42.1px; }
  .bar {
    height: 31.69px; font-size: 10px; line-height: 14px; padding: 8.6px 12.3px 0;
    width: 332px !important; white-space: nowrap;
  }
  #tldr { font-size: 14px; line-height: 19px; padding-top: 6.3px; padding-left: 12.5px; }
  .panel { margin-top: 3.2px; width: 332px !important; }
  .panel--tldr { height: 307.16px; padding: 8.2px 0 0 71.5px; }
  .numlist--tldr li { font-size: 10px; line-height: 14px; padding: 0; margin-bottom: 14px; width: 226.74px; }
  .numlist--tldr li::before { left: -57.5px; top: -3.5px; }
  .numlist li::before { font-size: 10px; }

  .prose, .prose--intro, .prose--hes, .h2, .h2--hes, .prose-note { width: 318px !important; }
  .prose--intro { margin: 23.3px 0 0 7.3px; }
  .prose ul { padding-left: 15px; }
  .prose ul li::marker { font-size: 10px; }

  .cta-box {
    display: block; width: 327px !important; height: 111.4px; padding: 0; margin-top: 23.6px;
  }
  .cta-box-text {
    position: absolute; left: 50%; top: 19.7px; transform: translateX(-50%); width: 226.2px;
    font-size: 15px; line-height: 20px; text-align: center;
  }
  .btn-explore {
    position: absolute; left: 50%; top: 70.8px; transform: translateX(-50%);
    width: 83.77px; height: 20.86px; line-height: 20.86px; font-size: 10px; padding-left: 2px;
  }
  .btn-explore:hover { transform: translateX(-50%); }

  .bar--2 { margin-top: 21.1px; }
  .panel--break { height: auto; padding-bottom: 8px; }
  .numlist--rows li { min-height: 57.3px; padding: 22px 16px 8px 59.9px; font-size: 10px; line-height: 14px; }
  .numlist--rows li::before { left: 14.8px; top: 18.4px; }

  .h2 { font-size: 15px; line-height: 20px; }
  .h2--hes { margin-top: 32px; }
  .prose--hes { margin-top: 16px; }
  .h3 { font-size: 10px; line-height: 14px; padding-left: 10px !important; }
  .h3::before { height: 18.85px; top: -2.4px; left: 0 !important; }
  .h3 small { font-size: 10px; }
  .h4 { font-size: 10px; line-height: 14px; padding-left: 10px !important; }
  .h4::before { height: 18.85px; top: -2.4px; left: 0; }

  .bar--hidden { margin: 26px 0 0; padding-left: 12.3px; }
  .panel--hidden { position: static; height: auto; padding: 16px 0 16px; margin-top: 3.2px; }
  .panel--hidden > p, .panel--hidden > a { position: static; margin: 0 13px; white-space: normal; }
  .hidden-lead { margin-top: 14px !important; }
  .numlist--hidden { position: static; margin: 14px -1px 0; }
  .hidden-note { margin-top: 12px !important; }
  .hidden-link { display: block; margin-top: 20px !important; }

  .reason { margin-top: 44px !important; }
  .reason-label { font-size: 10px; line-height: 14px; }
  .reason .h2 { margin-top: 14px; }
  .h3--problem { margin-top: 22px; }
  .reason .prose { margin-top: 22px !important; }
  .prose-note { margin-top: 14px; }


  /* fluid mobile widths (Figma: 332px column at 390) */
  .article .bar, .panel, .glance, .solves, .compare, .bar--choose, .panel--choose { width: auto !important; margin-left: 0 !important; margin-right: 0 !important; }
  .cta-box { width: auto !important; margin-right: 5px; }
  .prose, .prose--intro, .prose--hes, .h2, .h2--hes, .prose-note, .prose--solves2 { width: auto !important; max-width: 318px; }
  .prose--intro { margin-left: 7.3px; margin-right: 7px; }
  .h2--hes, .prose--hes, .reason, .real, .better, .prose--solves2 { margin-left: 7px !important; margin-right: 7px; }
  .prose--real, .prose--better { margin-left: 0 !important; }
  .real .h2 { margin-left: 0; }
  .h2--hes { max-width: 311.5px; }
  .reason--1 .h2 { max-width: 233.2px; }
  .reason--2 .h2 { max-width: 253px; }
  .reason--3 .h2 { max-width: 259.5px; }
  .reason--4 .h2 { max-width: 259.1px; }
  .reason--5 .h2 { max-width: 247.2px; }
  .reason--6 .h2 { max-width: none; white-space: nowrap; }
  .real .h2, .better .h2 { font-size: 10px; line-height: 14px; max-width: 243px; }
  .numlist--hidden li { padding-left: 50.8px !important; padding-right: 60px !important; }
  .numlist--hidden li::before { left: 13.5px !important; }
  .hidden-lead, .hidden-note { max-width: 278px; }
  /* tables */
  .bar--glance, .bar--solves, .bar--compare { margin-top: 32px; margin-left: 0; }
  .glance { font-size: 9px; line-height: 12px; margin-top: 3.2px; width: 332px !important;
    background: linear-gradient(to right, var(--khaki) 0 103.43px, transparent 103.43px 219px, var(--khaki) 219px); }
  .glance-row { grid-template-columns: 103.43px 115.57px 1fr; padding-bottom: 18px; }
  .glance-row > div:nth-child(n) { padding: 0 8px 0 13px; }
  .glance-row:first-of-type > div, .glance-head > div { padding-top: 18px; font-size: 10px; line-height: 14px; }
  .glance-row:nth-child(3) > div { padding-top: 8px; }
  .gi { display: none; }
  .glance-head { padding-bottom: 14px; }

  .solves { font-size: 9px; line-height: 12px; width: 332px !important; margin: 3.2px 0 0;
    background: linear-gradient(to right, var(--khaki) 0 118px, transparent 118px); border-radius: 16px 0 0 16px; }
  .solves-row { grid-template-columns: 118px 1fr; padding-bottom: 28px; }
  .solves-row > div:nth-child(n) { padding: 0 8px 0 15px !important; }
  .solves-head > div { padding-top: 16px !important; font-size: 10px; line-height: 14px; }
  .solves-head { padding-bottom: 14px; }
  .prose--solves2 { margin: 32px 0 0; width: 318px; }

  .compare { font-size: 9px; line-height: 12px; width: 332px !important; margin-top: 3.2px;
    grid-template-columns: 72px 86px 80px 1fr; column-gap: 3px; }
  .compare-col { padding: 16px 4px 18px 12px !important; }
  .compare-col p + p { margin-top: 38px; }
  .compare-col .compare-head + p { margin-top: 38px !important; }
  .compare .w117 { width: auto; }

  .bar--choose { margin: 10px 0 0; width: 332px !important; }
  .panel--choose { margin: 8px 0 0; width: 332px !important; padding: 14px 12px 14px; }
  .panel--choose p, .panel--choose a { font-size: 9px; line-height: 12px; }
  .panel--choose a { margin-top: 18px; max-width: 288px; }

  .better { margin: 30px 0 0; }
  .better .h2 { font-size: 10px; line-height: 14px; }
  .prose--better { margin: 14px 0 0; font-size: 9px; line-height: 12px; --blank: 12px; }


  /* ---- mobile vertical calibration against the 390 frame ---- */
  .cta-box--1 { margin-top: 20.6px; margin-left: 0; }
  .bar--2 { margin-top: 20.6px; }
  .panel--break { margin-top: 5.5px; }
  .h2--hes { margin-top: 29.6px; }
  .bar--hidden { margin-top: 20.8px !important; }
  .panel--hidden { margin-top: 6.7px !important; }
  .reason .h2 { margin-top: 13.3px; }
  .reason--1 { margin-top: 34.2px !important; }
  .reason--2 { margin-top: 25.6px !important; }
  .reason--3 { margin-top: 57.6px !important; }
  .reason--4 { margin-top: 45.5px !important; }
  .reason--5 { margin-top: 31px !important; }
  .reason--6 { margin-top: 30.3px !important; }
  .bar--glance { margin-top: 34.6px !important; }
  .glance { grid-template-rows: 50.2px 61.1px 65.6px 60.1px 77.6px 62.7px !important; height: 377.3px !important; }
  .glance-row { padding-bottom: 0 !important; }
  .glance-row > div:nth-child(n) { padding-top: 0 !important; }
  .glance-head > div:nth-child(n) { padding-top: 20.1px !important; }
  .glance-head { padding-bottom: 0 !important; }
  .real { margin-top: 22.7px !important; margin-left: 0 !important; }
  .real .h2 { margin-left: 0 !important; }
  .prose--real { margin-left: 0.8px !important; max-width: 321.4px; margin-top: 19.1px; }
  .solves { background: linear-gradient(to right, var(--khaki) 0 140.3px, transparent 140.3px) !important; }
  .solves-row { grid-template-columns: 140.3px 1fr !important; }
  .solves-row > div:nth-child(2) { padding-left: 14px !important; max-width: 200px; }
  .solves-row > div:nth-child(1) { padding-left: 24.5px !important; max-width: 140px; }
  .bar--choose { height: 49px !important; padding-top: 18.5px !important; font-size: 9px; line-height: 12px; padding-left: 24.8px !important; }
  .panel--choose { margin-top: 8.8px !important; min-height: 89.5px; }
  .better { margin-top: 14.8px !important; margin-left: 0 !important; }
  .compare { min-height: 428.8px; }
  .compare-col p + p { margin-top: 50.85px !important; }
  .compare-col .compare-head + p { margin-top: 38px !important; }
  .compare-col--ss .compare-head + p, .compare-col--ct .compare-head + p { margin-top: 33px !important; }
  .cta-box--2 { margin-top: 19.9px; }
  .bar--solves { margin-top: 28px !important; }
  .bar--compare { margin-top: 31px !important; }
  .bar--choose { margin-top: 8.8px !important; }
  /* trust */
  .trust {
    background: none; width: auto; max-width: none; height: auto; transform: none;
    display: flex; align-items: center; justify-content: space-between;
    margin: 36px 0 0; padding: 0 16px 0 36px;
  }
  .trust-pill { display: none; }
  .trust-title { position: static; color: var(--heading); font-size: 10px; line-height: 14px; width: 121.69px; white-space: normal; }
  .trust-badges { display: flex; gap: 8px; }
  .badge-1, .badge-2 { width: 41.85px; height: 54.35px; }
  .badge-3 { width: 46.67px !important; height: 49.57px !important; }
  .share { display: none; }
  .cta-wide { margin: 38px auto 0; width: 327px; max-width: calc(100% - 32px); height: 111.4px; padding: 0; display: block; }
  .cta-wide .cta-box-text {
    position: absolute; left: 50%; top: 19.7px; transform: translateX(-50%); width: 226.2px; white-space: normal;
    font-size: 15px; line-height: 20px; text-align: center;
  }
  .cta-wide .btn-explore { position: absolute; left: 50%; top: 70.8px; }

  /* faq */
  .faq { margin-top: 38px; padding: 0 29px 0 28.13px; }
  .section-title { font-size: 15px; line-height: 20px; }
  .section-sub { font-size: 9px; line-height: 12px; color: var(--navy); margin-top: 9.4px; }
  .faq-list { margin-top: 18.3px; }
  .faq-item { border-radius: 12px; border: 1px solid #e5e7eb; }
  .faq-item + .faq-item, .faq-item:nth-child(2) { margin-top: 8px; }
  .faq-q { padding: 18px 44px 12px 16px !important; min-height: 58px; font-size: 10px; line-height: 14px; color: var(--heading); }
  .faq-q span { max-width: 270px; }
  .faq-toggle { background: none !important; width: 12px; height: 16px; right: 22px !important; top: 17px !important; }
  .faq-toggle::before, .faq-toggle::after { width: 10px; height: 2px; margin: -1px 0 0 -5px; background: #0554f2 !important; }
  .faq-a > p { padding: 0 20px 0 16px !important; font-size: 9px; line-height: 12px; color: var(--navy); }
  .faq-item.is-open { background: #f0f4ff; border-color: #e5e7eb; }
  .faq-item.is-open .faq-q { padding-top: 18px !important; }
  .faq-item.is-open .faq-a > p { padding-bottom: 20px !important; }

  /* recommended */
  .recommended { margin-top: 40px; padding: 0 29px; }
  .recommended .section-title { margin-left: 0; }
  .recommended .section-sub { width: 165.8px; margin: 8.4px 0 0; }
  /* one card at a time; the arrow steps through them (js/main.js) */
  .cards { display: block; margin: 27.78px 0 0 -1px; }
  .card {
    display: none; width: 247px; max-width: none; height: 207px; border-radius: 7.97px;
    box-shadow: 6.64px 10.62px 19.92px rgba(0, 0, 0, 0.08);
  }
  .card.is-active { display: block; }
  .card-title { left: 23.4px; top: 16.6px; font-size: 15px; line-height: 20px; letter-spacing: -0.45px; }
  .byline--card { left: 23.4px; top: 107.3px; transform: scale(.664); transform-origin: 0 50%; }
  .card-more { left: 23.4px; top: 162.39px; font-size: 9px; line-height: 12px; }
  .card-date { left: 149.4px; right: auto; top: 155.73px; width: 79.41px; height: 25.31px; border-radius: 51.38px; font-size: 9.3px; line-height: 25.31px; }
  .cards-next {
    display: block; position: absolute; left: 269.2px; top: 94px; width: 14px; height: 14px;
  }
  .cards-next img { position: absolute; left: 0; top: 0; }
  .cards-next .cards-next-chevron { left: 3px; top: 3px; }
  .cards-next:hover { transform: translateX(2px); }

  .talk { width: 358.92px; margin-top: 32px; transform: none; }

  /* footer */
  .site-footer {
    position: relative; overflow: hidden; margin-top: 32px;
    background: #ebf3ff; font-family: var(--font); color: #12151a;
  }
  .site-footer::before, .site-footer::after, .footer-inner::before {
    content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%;
    border: 1px solid rgba(200, 217, 240, .4); pointer-events: none;
  }
  .site-footer::before { left: -62.6px; top: 34px; }
  .site-footer::after { left: 57.4px; top: 94px; }
  .footer-inner::before { left: 177.4px; top: 154px; }
  .footer-inner { padding: 26px 20px 30px 35.6px; min-height: 486px; letter-spacing: normal; }
  .footer-top { display: block; height: auto; }
  .footer-logo { display: none; }
  .footer-cols { display: block; margin: 0; }
  .footer-social { margin-top: 16.3px !important; }
  .footer-col { display: block; width: auto !important; }
  .footer-col + .footer-col { margin-top: 11.3px; }
  .footer-h { font-family: var(--font); font-weight: 600; font-size: 14px; line-height: 19px; margin: 0 0 2.7px; }
  .footer-col a { display: block; font-family: var(--font); font-weight: 400; font-size: 10px; line-height: 14px; padding: 0; color: #3d3d3d; }
  .footer-col a + a { margin-top: 8px; }
  .footer-social { flex-direction: row; gap: 16px; margin: 16.3px 0 0; }
  .footer-social a {
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: #262626; color: #fff;
    font-family: "Inter", sans-serif; font-weight: 700; font-size: 9px; line-height: 11px;
  }
  .footer-social img { display: none; }
  .footer-social span { display: inline; }
  .footer-credits { display: block; margin-top: 22px; padding: 0; border: 0; font-family: var(--font); font-weight: 400; font-size: 11px; line-height: 15px; color: var(--gray); }
  .footer-legal { display: block; margin-top: 7.7px; }
  .footer-legal a { text-decoration: none; }
  .m-dot { display: inline; }

  /* ---- exact positions from the 390 frame (node 1212:2197) ---- */
  /* "Explore now!" pills: 83.77 x 20.86 at (126.11, 70.79) in every CTA box, label left-aligned */
  .cta-box .btn-explore, .cta-wide .btn-explore {
    left: 126.11px; top: 70.79px; transform: none; text-align: left;
    padding: 3.43px 0 0 9.89px; line-height: 14px;
  }
  .cta-box .btn-explore:hover, .cta-wide .btn-explore:hover { transform: none; }
  .cta-box--2 { margin-left: 2.51px; margin-right: 2.49px; }

  /* "When does Workday compensation start to break?" rows */
  .panel--break { height: 304.14px; padding: 0; }
  .panel--break .numlist--rows { margin: -1px -1px 0; }
  .panel--break .numlist--rows li { min-height: 0; height: 57.79px; padding: 23.01px 16px 0 59.9px; }
  .panel--break .numlist--rows li:first-child { height: 57.27px; }
  .panel--break .numlist--rows li::before { left: 14.78px; top: 25.86px; }

  .h2--hes, .prose--hes { margin-left: 7.4px !important; }
  .h2--hes { margin-top: 26.3px; }
  .prose--hes { margin-top: 14.2px; }

  /* hidden cost panel: children placed like the desktop panel */
  .bar--hidden { padding-left: 17.08px; }
  .panel--hidden { position: relative; width: 331.68px !important; height: 521.19px; padding: 0; margin-left: 0.32px !important; }
  .panel--hidden > p, .panel--hidden > a { position: absolute; left: 12.91px; margin: 0 !important; }
  .hidden-quote { top: 18.35px; }
  .hidden-lead { top: 45.36px; width: 276px; max-width: none; }
  .hidden-note { top: 436.78px; width: 279px; max-width: none; }
  .hidden-link { top: 484.73px; }
  .numlist--hidden { position: absolute !important; left: 0.83px; top: 92.73px; width: 329.85px; margin: 0 !important; }
  .numlist--hidden li { position: absolute; left: 0; right: 0; height: auto; min-height: 0; padding: 0 16px 0 49.02px !important; }
  .numlist--hidden li::before { left: 12.08px !important; top: 3.93px; }
  .numlist--hidden li:nth-child(1) { top: 0; height: 56.43px; padding-top: 12.23px !important; }
  .numlist--hidden li:nth-child(1)::before { top: 16.16px; }
  .numlist--hidden li:nth-child(2) { top: 70.76px; }
  .numlist--hidden li:nth-child(3) { top: 128.55px; }
  .numlist--hidden li:nth-child(4) { top: 186.24px; }
  .numlist--hidden li:nth-child(5) { top: 244.13px; }
  .numlist--hidden li:nth-child(6) { top: 296.47px; }
  /* Figma gives each item a fixed text box; 49.02px indent + box width */
  .numlist--hidden li { right: auto; padding-right: 0 !important; }
  .numlist--hidden li:nth-child(1) { width: 329.85px; padding-right: 67.22px !important; }   /* full-width highlight row, 213.61 text box */
  .numlist--hidden li:nth-child(2) { width: 279.06px; }
  .numlist--hidden li:nth-child(3) { width: 256.65px; }
  .numlist--hidden li:nth-child(4) { width: 270.84px; }
  .numlist--hidden li:nth-child(5) { width: 329.85px; }
  .numlist--hidden li:nth-child(6) { width: 237.98px; }
  .nbsp-d { display: none; }
  .prose--hes { max-width: 312px; }

  /* tables: rows become contents, each cell sits at its Figma offset with Figma's box width */
  .glance .hl, .solves .hl { color: inherit; }
  .bar--glance { padding-left: 12.71px; }
  .bar--solves { padding-left: 24.79px; }
  .bar--compare { padding-left: 0; padding-right: 0; text-align: center; }

  .glance {
    display: block !important; position: relative; height: 377.3px !important; width: 332px !important;
    background: linear-gradient(to right, var(--khaki) 0 103.43px, transparent 103.43px 217px, var(--khaki) 217px 332px);
  }
  .glance .glance-row { display: contents; }
  .glance .glance-row > div { position: absolute; padding: 0 !important; margin: 0 !important; }
  .glance .glance-head > div { display: block; font-size: 10px; line-height: 14px; }
  .glance > :nth-child(2) > :nth-child(1) { left: 29.21px; top: 20.62px; width: 45px; }
  .glance > :nth-child(2) > :nth-child(2) { left: 139.19px; top: 20.14px; width: 40px; }
  .glance > :nth-child(2) > :nth-child(3) { left: 246.7px; top: 17.32px; width: 35px; }
  .glance > :nth-child(3) > :nth-child(1) { left: 12.71px; top: 50.16px; width: 73.5px; }
  .glance > :nth-child(3) > :nth-child(2) { left: 119.21px; top: 50.16px; width: 60px; }
  .glance > :nth-child(3) > :nth-child(3) { left: 227.32px; top: 50.16px; width: 94.2px; }
  .glance > :nth-child(4) > :nth-child(1) { left: 12.71px; top: 111.34px; width: 73.5px; }
  .glance > :nth-child(4) > :nth-child(2) { left: 119.21px; top: 111.34px; width: 74.2px; }
  .glance > :nth-child(4) > :nth-child(3) { left: 225.84px; top: 111.0px; width: 98.4px; }
  .glance > :nth-child(5) > :nth-child(1) { left: 12.71px; top: 176.93px; width: 80.6px; }
  .glance > :nth-child(5) > :nth-child(2) { left: 119.21px; top: 176.93px; width: 94.1px; }
  .glance > :nth-child(5) > :nth-child(3) { left: 227.32px; top: 180.27px; width: 98.2px; }
  .glance > :nth-child(6) > :nth-child(1) { left: 12.71px; top: 236.97px; width: 76.5px; }
  .glance > :nth-child(6) > :nth-child(2) { left: 119.21px; top: 236.97px; width: 88.5px; }
  .glance > :nth-child(6) > :nth-child(3) { left: 227.32px; top: 241.12px; width: 98.2px; }
  .glance > :nth-child(7) > :nth-child(1) { left: 12.71px; top: 314.57px; width: 80.6px; }
  .glance > :nth-child(7) > :nth-child(2) { left: 119.21px; top: 314.57px; width: 93.7px; }
  .glance > :nth-child(7) > :nth-child(3) { left: 227.32px; top: 313.96px; width: 98.2px; }

  .solves {
    display: block !important; position: relative; height: 539px; width: 332px !important;
    background: linear-gradient(to right, var(--khaki) 0 146.81px, transparent 146.81px) !important;
  }
  .solves .solves-row { display: contents; }
  .solves .solves-row > div { position: absolute; padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .solves .solves-head > div { font-size: 9px; line-height: 12px; }
  .solves > :nth-child(2) > :nth-child(1) { left: 24.06px; top: 18.67px; width: 90px; }
  .solves > :nth-child(2) > :nth-child(2) { left: 163.13px; top: 15.67px; width: 115px; }
  .solves > :nth-child(3) > :nth-child(1) { left: 23.08px; top: 50.87px; width: 104.3px; }
  .solves > :nth-child(3) > :nth-child(2) { left: 154.3px; top: 50.87px; width: 186.3px; }
  .solves > :nth-child(4) > :nth-child(1) { left: 23.08px; top: 121.94px; width: 104.3px; }
  .solves > :nth-child(4) > :nth-child(2) { left: 154.3px; top: 121.94px; width: 169.1px; }
  .solves > :nth-child(5) > :nth-child(1) { left: 23.08px; top: 208.02px; width: 104.3px; }
  .solves > :nth-child(5) > :nth-child(2) { left: 154.3px; top: 208.02px; width: 169.7px; }
  .solves > :nth-child(6) > :nth-child(1) { left: 23.08px; top: 278.01px; width: 114.4px; }
  .solves > :nth-child(6) > :nth-child(2) { left: 154.3px; top: 279.08px; width: 181.5px; }
  .solves > :nth-child(7) > :nth-child(1) { left: 23.08px; top: 363.75px; width: 114.4px; }
  .solves > :nth-child(7) > :nth-child(2) { left: 154.3px; top: 364.82px; width: 171.2px; }
  .solves > :nth-child(8) > :nth-child(1) { left: 23.08px; top: 454.41px; width: 105.4px; }
  .solves > :nth-child(8) > :nth-child(2) { left: 154.3px; top: 451.41px; width: 169px; }

  .compare {
    display: block !important; position: relative; height: 429.5px; min-height: 0;
    width: 333.84px !important; margin-left: -0.64px !important;
  }
  .compare-col { position: absolute; top: 0; height: 428.8px; padding: 0 !important; }
  .compare .compare-col p { margin: 0 !important; padding: 0 !important; height: 62.85px; }
  .compare .compare-col .compare-head { height: 54.85px; white-space: normal; }
  .compare .compare-col--ss .compare-head, .compare .compare-col--ct .compare-head { height: 49.85px; }
  .compare-col--area { left: 0; top: 0.69px; width: 72.63px; padding: 17.88px 0 0 12.36px !important; }
  .compare-col--wd { left: 76.01px; width: 90.58px; padding: 18.57px 0 0 19.63px !important; }
  .compare-col--wd p:not(.compare-head) { padding-left: 0.5px !important; }
  .compare-col--ss { left: 169.98px; width: 83.65px; padding: 18.57px 0 0 11.65px !important; }
  .compare-col--ct { left: 258.57px; top: 0.61px; width: 75.27px; padding: 17.96px 0 0 3.35px !important; }
  .compare-col--ct p:not(.compare-head) { padding-left: 9.08px !important; }
  .compare-col--ct .compare-head { height: 49.85px; width: 64px; }
  .compare .w117 { width: 56px; }
  .compare-col--ct p:nth-child(6) { width: 54.5px; }
  .compare-col--ct p:nth-child(7) { width: 64.6px; }

  .bar--choose { width: 332.63px !important; margin-left: -0.64px !important; padding-left: 23.95px !important; }
  .panel--choose { position: relative; height: 89.51px; min-height: 0; padding: 0; }
  .panel--choose p, .panel--choose a { position: absolute; left: 10.73px; margin: 0; }
  .panel--choose p { top: 16.68px; width: 289px; }
  .panel--choose a { top: 48.81px; width: 269px; max-width: none; }

  /* reasons: Figma indents reasons 4-6 further left, and each "The problem" heading differently */
  .reason--4 { margin-left: 1.67px !important; }
  .reason--5 { margin-left: -0.3px !important; }
  .reason--6 { margin-left: -0.9px !important; }
  .reason--2 .prose { margin-left: 0.7px; }
  .h3--problem::before { top: -2.42px; }
  .reason--1 .h3--problem { padding-left: 14px !important; }
  .reason--1 .h3--problem::before { top: -1.47px; height: 16.96px; }
  .reason--2 .h3--problem { padding-left: 14px !important; }
  .reason--3 .h3--problem { padding-left: 9.4px !important; }
  .reason--4 .h3--problem { padding-left: 10.13px !important; }
  .reason--4 .h3--problem::before { left: -0.87px !important; }
  .reason--5 .h3--problem { padding-left: 7.87px !important; }
  .reason--6 .h3--problem { padding-left: 10.58px !important; }
  .reason--6 .h3--problem::before { left: 0.6px !important; }
  .reason--6 .prose .h3::before { left: 1.7px; }

  .prose--solves2 { margin-left: 0 !important; max-width: 324.6px; }
  /* Figma text box width of each reason's body copy */
  .reason--1 .prose, .reason--1 .prose-note { max-width: 318.3px; }
  .reason--2 .prose { max-width: 314.6px; }
  .reason--3 .prose { max-width: 314.1px; }
  .reason--4 .prose { max-width: 317.4px; }
  .reason--5 .prose { max-width: 325.3px; }
  .reason--6 .prose, .prose--real { max-width: 321.7px; }
  /* the mobile frame drops the underline on links from Reason #4 onward */
  .reason--4 a.u, .reason--5 a.u, .reason--6 a.u, .real a.u { text-decoration: none; }
  .prose--better .hl { color: inherit; }
  .faq-a > p { padding-right: 13.7px !important; }
  .prose--solves2 .h3 { padding-left: 9.2px !important; }

  /* trust row: title at x 36, badges group at x 195 */
  .trust { position: relative; display: block; height: 54.35px; padding: 0 0 0 36px; }
  .trust-title { margin-top: 20.34px; }
  .trust-badges { position: absolute; left: 195px; top: 0; gap: 0; align-items: flex-start; }
  .badge-2 { margin-left: 7.95px; }
  .badge-3 { margin: 2.39px 0 0 3.49px; }

  .footer-inner { padding-left: 37.4px; padding-bottom: 13.87px; }   /* footer box is 486.04px tall */
  .real { margin-left: -0.9px !important; }
  .prose--real { margin-left: 1.7px !important; }
  .article .bar--compare { margin-left: -0.9px !important; }
  .bar--glance { padding-top: 7.81px; }
  .bar--solves { padding-top: 8.22px; }
  .bar--hidden, .bar--compare { padding-top: 8.84px; }
  .cta-box .cta-box-text, .cta-wide .cta-box-text { top: 20.6px; }
  .talk { margin-left: 14.67px; margin-right: auto; }
  .faq { padding-left: 28.13px; }
  .faq .section-title, .faq .section-sub { margin-left: 0.87px; }
  .faq-q { padding-left: 15px !important; padding-top: 17px !important; }
  .faq-item.is-open .faq-q { padding-top: 17px !important; }
  .faq-item.is-open .faq-a > p { padding-bottom: 22.34px !important; }
  .faq-a > p { padding-left: 15px !important; }
  /* vertical rhythm: each block's margin-top solved so its first line lands on the Figma y */
  .bar--hidden { margin-top: 22.23px !important; }
  .panel--hidden { margin-top: 6.67px !important; }
  .reason--1 { margin-top: 38.35px !important; }
  .reason--1 .h2 { margin-top: 13.8px !important; }
  .reason--1 .h3--problem { margin-top: 14.28px !important; }
  .reason--1 .prose { margin-top: 17.82px !important; }
  .reason--1 .prose-note { margin-top: 17.22px !important; }
  .reason--2 { margin-top: 33.8px !important; }
  .reason--2 .h2 { margin-top: 13.82px !important; }
  .reason--2 .h3--problem { margin-top: 27.75px !important; }
  .reason--2 .prose { margin-top: 28.25px !important; }
  .reason--3 { margin-top: 43.57px !important; }
  .reason--3 .h2 { margin-top: 15.3px !important; }
  .reason--3 .h3--problem { margin-top: 18.34px !important; }
  .reason--3 .prose { margin-top: 20.0px !important; }
  .bar--glance { margin-top: 39.81px !important; }
  .glance { margin-top: 3.65px !important; }
  .cta-box--2 { margin-top: 19.41px !important; }
  .reason--4 { margin-top: 46.59px !important; }
  .reason--4 .h2 { margin-top: 12.78px !important; }
  .reason--4 .h3--problem { margin-top: 24.71px !important; }
  .reason--4 .prose { margin-top: 25.25px !important; }
  .reason--5 { margin-top: 30.75px !important; }
  .reason--5 .h2 { margin-top: 7.65px !important; }
  .reason--5 .h3--problem { margin-top: 18.52px !important; }
  .reason--5 .prose { margin-top: 19.02px !important; }
  .reason--6 { margin-top: 34.97px !important; }
  .reason--6 .h2 { margin-top: 15.13px !important; }
  .reason--6 .h3--problem { margin-top: 22.56px !important; }
  .reason--6 .prose { margin-top: 23.09px !important; }
  .real { margin-top: 20.59px !important; }
  .prose--real { margin-top: 19.13px !important; }
  .bar--solves { margin-top: 27.99px !important; }
  .solves { margin-top: 7.52px !important; }
  .prose--solves2 { margin-top: 28.37px !important; }
  .prose--solves2 > h3 + p { margin-top: 8.79px !important; }
  .bar--compare { margin-top: 30.59px !important; }
  .compare { margin-top: 4.15px !important; }
  .bar--choose { margin-top: 8.13px !important; }
  .panel--choose { margin-top: 8.83px !important; }
  .better { margin-top: 20.78px !important; }
  .prose--better { margin-top: 14.75px !important; }
  .trust { margin-top: 37.09px !important; }
  .cta-wide { margin-top: 37.59px !important; }
  .faq { margin-top: 38.1px !important; }
  .faq .section-sub { margin-top: 9.42px !important; }
  .faq-list { margin-top: 17.81px !important; }
  .faq-item:nth-child(2) { margin-top: 8.01px !important; }
  .faq-item + .faq-item:nth-child(n+3) { margin-top: 8.01px !important; }
  .recommended { margin-top: 40.51px !important; }
  .recommended .section-sub { margin-top: 8.01px !important; }
  .cards { margin-top: 27.28px !important; }
  .talk { margin-top: 32.0px !important; }
  .site-footer { margin-top: 32.02px !important; }
  .footer-col + .footer-col { margin-top: 16.3px !important; }
  .footer-social { margin-top: 16.32px !important; }
  .footer-credits { margin-top: 22.52px !important; }
  .footer-legal { margin-top: 7.71px !important; }
}