@charset "UTF-8";
/*!
 * Asana Consulting landing page — template-asana-consulting.php.
 *
 * Figma "Remote Sensei Universe", frame `[in progress] Asana Consulting -
 * desktop - eng` (29809:25273). Sections carried so far: hero (29809:25736),
 * the trusted-clients strip (42412:35742) and `issues` (42063:35763).
 *
 * WHAT IS NOT IN THIS FILE, ON PURPOSE
 * - The button box. `.btn.btn-atom` in main.scss is the design system's atom and
 *   is already on this page via main.min.css; only the two colour faces the
 *   focus/passive swap needs are declared here, as `--bs-btn-*` overrides so
 *   Bootstrap keeps owning hover and :active.
 * - The logo marquee. `.rs-trusted-strip` is 40 top / 60 bottom / 40 gap, which
 *   is this frame to the pixel, so the shared component carries the whole strip
 *   and only the title block above it is page CSS. The component's own logo
 *   treatment (40px margins, 40% opacity, desaturate) differs slightly from what
 *   this frame draws (30px gap, 50%, luminosity) — that is Raman's fixed
 *   cross-page component and is deliberately not overridden here.
 *
 * THE ONE WIDTH — AND THE GUTTER THAT HAS TO GO
 * `$container-max-widths.xl` is 1146px, which is exactly 1440 minus the frame's
 * 147px side padding. But Bootstrap's `.container` spends 12px of that on its own
 * inline padding, so out of the box the content box is 1122 at x=159 — measured
 * on /about/, which is what every migrated page renders. That 12px is a real
 * error against this frame and it compounds: every column, card and text block
 * inherits it.
 *
 * So the gutter is zeroed on this page's two capped containers, and the frame's
 * 147/1146 is reproduced exactly. It is restored below `lg`, where `.container`
 * is a percentage and the gutter is the only thing keeping text off the screen
 * edge. This page is therefore 24px wider than /about/ — deliberate: the two are
 * never seen side by side, and this frame is the newer spec.
 *
 * The `issues` split is a plain flex row, not `.row`/`.col-lg-6`. Bootstrap's row
 * bleeds ±15px outside the container to cancel its columns' padding, so the row
 * box measures 1176 where the frame has 1146 — the columns land right and the
 * wrapper does not. Two flex children at `flex: 1 1 0` with a 30px gap give the
 * same 558 + 30 + 558 with nothing to explain away.
 *
 * DESKTOP ONLY, FOR NOW
 * The 375px Figma frame is still the previous design, so there is nothing to
 * build against below 992px. Everything under that breakpoint gets a plain
 * single-column stack with the focus states neutralised — readable, not
 * designed. Replace when the mobile frames land.
 */
/* Borders are drawn as inset box-shadows, not `border`. Figma's stroke is
   `inside`, which does not eat into an auto-layout frame's content width — a
   real 2px border would take the card's content from 458 to 454 and make the
   focused and passive cards different widths. */
/* ---- Section shells ------------------------------------------------------ */
/*
 * The dark band's grain. Figma tiles the texture at 15% over #34383C, and the
 * tile is pure black with the grain entirely in its alpha channel — so it needs
 * its own layer: `background-blend-mode` cannot give 10–15% to the image alone.
 * 64x64 crop of the 250px original; the source is white noise, so any crop tiles
 * seamlessly. See outputs/handoff-guarantee-noise.md in RS_main. Asset lives in
 * `img/` (versioned), not `images/` (gitignored legacy dump).
 *
 * `isolation` rather than a z-index on every child: the pseudo-element is
 * positioned and would otherwise paint over static content.
 */
.rs-ac-grain {
  position: relative;
  isolation: isolate;
  /* Both knobs exist because the closing band reuses this block over a yellow
     gradient at 0.05 instead of over the dark fill at 0.15. Everything else
     about the mechanism — one tile, its own layer, children lifted above it —
     is identical, so it would be a duplicate block rather than a new one. */
  background-color: var(--rs-grain-bg, var(--rs-black-prime, #34383c));
}

.rs-ac-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--rs-grain-opacity, 0.15);
  background: url("../img/noise-64.webp") repeat;
}

/* ------------------------------------------------------------------
   THE DOT GRID — ONE GRID FOR THE WHOLE PAGE.

   13.5px period, ~2.5px dot. Measured off Figma's own 2x renders as 27.00px on
   both axes, independently in two places: the `issues` focused card
   (42063:35763, light dots on the dark fill — ground 56, dot peak 65, which is
   exactly #3E4145) and the `guarantee` panel (43031:13895, asset 1b63fe3b).

   ⚠️ This page shipped 24px in FOUR rules until 2026-08-26 — the issues card, the
   flow row, the light benefit/roadmap card and the toolkit stages. That was wrong;
   Oskar spotted the two grids not matching. The numbers live here now so the next
   consumer cannot pick a different one by accident.

   Textures on this page, since three of them are easy to confuse:
     `3044afad`  noise/grain  -> `.rs-ac-grain`, its own layer, alpha in the tile
     `2be6b71e`  noise/grain  -> ditto, the closing CTA card
     `1b63fe3b`  DOT GRID     -> everything below
   The dot grid is written as a gradient rather than given its own layer because,
   unlike the noise, it is exactly describable.
   ------------------------------------------------------------------ */
.rs-ac-dots {
  background-image: radial-gradient(rgba(var(--rs-dots-rgb, 0, 0, 0), var(--rs-dots-alpha, 0.075)) 1.25px, rgba(0, 0, 0, 0) 1.75px);
  background-size: 13.5px 13.5px;
}

.rs-ac-grain > * {
  position: relative;
  z-index: 1;
}

/* ---- 1. Hero ------------------------------------------------------------- */
/* See the header: `.container`'s own 12px gutter is not in the frame. */
.rs-ac-hero .container,
.rs-ac-issues__inner {
  --bs-gutter-x: 0;
}

.rs-ac-hero {
  padding: 90px 0;
  background-color: var(--rs-white-pure, #fffffe);
}

.rs-ac-hero__inner {
  display: flex;
  align-items: center;
  gap: 30px;
}

.rs-ac-hero__content {
  display: flex;
  flex: 0 0 588px;
  flex-direction: column;
  gap: 48px;
  max-width: 588px;
}

/*
 * `asana-badge-gold-light.svg`, NOT the `asana-badge-gold.svg` that About, Home and
 * asana-vs use. Same Figma layer name, different face: the shared one is the dark
 * plum lockup, this frame draws the light-background one (white plate, black
 * right block). Oskar supplied the asset on 2026-08-26. The other three templates
 * still point at the dark file — swapping them is a separate, designer-visible
 * decision.
 *
 * Natively 453x76; 179 wide is what the frame draws, and 453:76 puts the height
 * at 30.03 — i.e. the frame's 30 — so the aspect ratio is left to do the work.
 */
.rs-ac-hero__badge {
  width: 179px;
  height: auto;
}

.rs-ac-hero__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/*
 * Bold is the default here and the emphasis is the *light* half — that is how the
 * frame is drawn, not a transcription slip.
 *
 * No `hyphens: auto`, unlike the rest of the migrated display type. At 48px in a
 * 588 column it breaks "deliver" as "de-/liver", which is both wrong to read and
 * a line-break the frame does not have. `overflow-wrap` stays as the safety net.
 * ⚠️ Polish compounds are the reason that rule exists elsewhere — when the PL
 * page is built, check this headline at 375 and reach for `­` in the msgid
 * rather than turning `hyphens` back on globally here.
 */
.rs-ac-hero__title {
  margin: 0;
  color: var(--rs-black-prime, #34383c);
  font-family: var(--rs-font-display, "Montserrat"), sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: break-word;
}

/*
 * PL headline runs one line longer than EN and the frame only has room for three.
 * "Wdrożenie Asany, po którym zespoły dowożą projekty na czas" is 58 characters
 * against the English 63, but Polish has no short word for "deliver" and
 * `dowożą projekty` will not break, so it wraps to four at 48px in the 588px column.
 *
 * ⚠️ 47px is a ONE-PIXEL margin, measured on staging 2026-08-29: 48px = 4 lines,
 * 47px = 3. Anything that nudges the metrics — Montserrat failing to load and
 * falling back, a word added to the msgid, a different rasteriser — puts the
 * fourth line back with no error anywhere. If this needs to be robust rather than
 * maximal, 45px holds three lines with room to spare and is visually
 * indistinguishable at this size; dropping "projekty" from the msgid fits three
 * lines at the full 48px and needs no per-language rule at all.
 *
 * :lang(pl) matches WPML's lang="pl-PL" on <html>; same selector home.scss uses.
 *
 * ⚠️ THE MEDIA QUERY IS LOAD-BEARING, not tidiness. `:lang(pl) .rs-ac-hero__title`
 * is (0,2,0); the mobile cut at the bottom of this file is a bare
 * `.rs-ac-hero__title` at (0,1,0) inside `@media (max-width: 991.98px)`. Specificity
 * beats source order, so an unscoped version of this rule silently overrides the
 * mobile size and the PL headline renders 47px at 375 — measured: 7 lines, 395px
 * tall. Bounding it to min-width 992px leaves the mobile rule to win by itself.
 */
@media (min-width: 992px) {
  :lang(pl) .rs-ac-hero__title {
    font-size: 47px;
  }
}
.rs-ac-hero__lede {
  max-width: 499px;
  margin: 0;
  color: var(--rs-black-second, #5d636a);
  font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
}

/* Hug, not stretch: Figma's frame is exactly as wide as its widest child, and
   the caption below reads that width off it. */
.rs-ac-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: flex-start;
  gap: 24px;
}

.rs-ac-hero__note {
  /* Figma's caption is a fill-width child of a hug-width frame, i.e. exactly as
     wide as the button above it. `align-items: flex-start` on the parent is what
     keeps the button hugging, so the caption opts back out of it. */
  align-self: stretch;
  max-width: 437px;
  margin: 0;
  color: var(--rs-black-second, #5d636a);
  font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
  font-size: 16px;
  line-height: 1.5;
  /* Centred ON the button above it — which is what `align-self: stretch` is for:
     the caption is exactly as wide as the button, so centring inside it centres
     under it. (Oskar, 2026-08-26.) */
  text-align: center;
}

/*
 * The collage stage. Everything inside is absolutely placed at the frame's own
 * coordinates on this 528 square, so each rule below is a transcription of one
 * Figma node and nothing is doing layout. It deliberately does not clip: one
 * face hangs 13px off the left edge and three hang up to 85px off the right.
 */
.rs-ac-hero__art {
  position: relative;
  flex: 0 0 528px;
  height: 528px;
}

/*
 * The orbit ring is a rendered node, not CSS. Figma draws it as a 747x519 ellipse
 * rotated 48deg with a GRADIENT stroke, inside an 802x528 frame that starts 127px
 * left of the stage and clips it. The rotation and the clip are reproducible in
 * CSS; the gradient stroke is not, without inventing stops the file will not hand
 * over. So the whole frame ships as one 2x transparent WebP — 29 KB, exact.
 */
.rs-ac-hero__orbit {
  position: absolute;
  left: -127px;
  top: 0;
  width: 802px;
  height: 528px;
  /* The ring is 274px wider than the stage it hangs off, and the theme's global
     `img { max-width: 100% }` was silently squashing it back to 528. */
  max-width: none;
  pointer-events: none;
}

/*
 * The screenshot ships as its rendered node too, which means the 4px outside
 * stroke and the two-step drop shadow are already in the pixels — do not add them
 * again here.
 *
 * That render is 517 x 341.5, not the node's 449 x 253: Figma's bounds include
 * the shadow bleed. Measured on the file itself, the opaque frame sits at (30, 0)
 * inside it, so placing the image at (16, 134) lands the node box on the frame's
 * own (50, 138). Re-measure if the asset is ever re-exported.
 */
.rs-ac-hero__screen {
  position: absolute;
  left: 16px;
  top: 134px;
  width: 517px;
  height: 341.5px;
}

/* ---- 1b. The orbit entrance, and the pointer parallax --------------------
 *
 * Raman, Figma comment 1900325138: "lets make avatars move according to the orbit
 * - just once during the hero section loading. After - just simple paralax?"
 *
 * WHERE THE CENTRE COMES FROM, AND WHY NOT FROM FIGMA
 * Every arc below is struck about one point, so that point is the whole effect.
 * The Figma node cannot supply it: `ellipse-139` (43031:36337) reports a 747x519
 * box against a 680x325 vectorPath and a rotation of -1032deg, and no ellipse
 * satisfies all three. So it was fitted from the pixels the browser actually
 * paints — a least-squares conic over the alpha channel of ac-hero-orbit.webp:
 *
 *   centre       (273.2, 278.9) on this 528x528 stage
 *   semi-axes    339.2 x 161.3, major axis 18deg above horizontal
 *   residual     mean 0.46px, p95 0.98px, max 1.17px  (the stroke is 2px wide)
 *
 * That centre lands 0.6px from the one implied by the frame nesting
 * (frame-1834 at -127,0 holding the ellipse at 27,20), which is the cross-check.
 * The tilt is NOT 48deg as the note on `.rs-ac-hero__orbit` above says — re-fit
 * before trusting either number if the asset is ever re-exported.
 *
 * WHY CONCENTRIC ROTATION AND NOT A PATH
 * The avatars do not sit on the ring: their radii are 166, 172, 182, 196, 257,
 * 328 and 331px. There is no single path to send them along, so each one sweeps
 * its own arc about the shared centre — same angular travel, seven different
 * distances, which is exactly what orbiting looks like. A rotation about a point
 * traces a CIRCULAR arc, not this ellipse; across an 18deg sweep the two are a
 * few pixels apart and nobody can see it. Do not "fix" that with seven
 * hand-fitted offset-paths.
 */
.rs-ac-hero__art {
  --cx: 273.2px;
  --cy: 278.9px;
  /* The sweep every face travels, and the beat between arrivals. One angle for
     all seven: equal ANGULAR travel is what makes them read as one system, and
     it is why the outer faces cover more ground than the inner ones. */
  --sweep: 18deg;
  --beat: 70ms;
}

/*
 * Layer 1 of 3: position, and the parallax. `--px`/`--py` are unitless -1..1,
 * written to the stage by js/asana-consulting.js; unset they fall back to 0 and
 * every transform below collapses to none, which is the no-JS rendering.
 *
 * Parallax depth scales with the avatar's diameter — a bigger face reads as
 * nearer, so it moves further. 0.22 puts the 38px faces at 8px of travel and the
 * 79px one at 17, against the ring's 6 and the screenshot's 10 below.
 */
.rs-ac-hero__orbiter {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--d);
  height: var(--d);
  transform: translate3d(calc(var(--px, 0) * var(--d) * 0.22), calc(var(--py, 0) * var(--d) * 0.22), 0);
}

/*
 * The damping. `--px`/`--py` land on every pointermove, so without this the
 * layers snap and the collage reads as jitter rather than depth; a transition on
 * the same property the pointer drives is what turns a stream of positions into a
 * glide, and it is why the JS does not need its own easing loop.
 *
 * Safe against the entrance: that animates `transform` on `.rs-ac-hero__swing`,
 * a different element, so there is nothing here for it to fight.
 */
.rs-ac-hero__orbit,
.rs-ac-hero__orbiter {
  transition: transform 220ms ease-out;
  will-change: transform;
}

/*
 * Layer 2 of 3: the sweep. `transform-origin` is the ORBIT centre expressed in
 * this box's own coordinates — the stage centre minus this box's offset — which
 * is what turns a plain `rotate()` into travel along the ring. The parallax
 * translate on the parent does not disturb it: the origin is resolved against
 * this element's own border box.
 */
.rs-ac-hero__swing {
  width: 100%;
  height: 100%;
  transform-origin: calc(var(--cx) - var(--x)) calc(var(--cy) - var(--y));
  animation: rs-ac-orbit-in 1100ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: calc(200ms + var(--seq) * var(--beat));
}

/*
 * Layer 3 of 3: the counter-rotation. These are photographs of people, so the
 * face must stay upright while its box travels. Identical duration, easing and
 * delay to the swing above — that, and only that, is what makes the two cancel
 * at every frame rather than just at the ends.
 */
.rs-ac-hero__face {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  animation: rs-ac-orbit-in-upright 1100ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: calc(200ms + var(--seq) * var(--beat));
}

.rs-ac-hero__orbit {
  transform: translate3d(calc(var(--px, 0) * 6px), calc(var(--py, 0) * 6px), 0);
}

/*
 * The centre screenshot is DELIBERATELY NOT in the parallax — Raman, 2026-08-27.
 * It is the subject of the collage, so it holds still and the ring and the
 * avatars move around it; drifting it too made the whole composition swim. It had
 * 10px of travel in the first build. Do not re-add it.
 */
/*
 * COUNTER-CLOCKWISE. Raman's call, 2026-08-27, after seeing the first build go
 * the other way.
 *
 * The sweep starts at `+sweep` and unwinds to 0, so each avatar travels toward
 * DECREASING angle — anti-clockwise on screen. It read clockwise before because
 * this started at `-sweep`. The sign here and the sign in `-upright` below must
 * always be opposites; they are the rotation and its cancellation.
 */
@keyframes rs-ac-orbit-in {
  from {
    opacity: 0;
    transform: rotate(var(--sweep));
  }
  to {
    opacity: 1;
    transform: rotate(0deg);
  }
}
@keyframes rs-ac-orbit-in-upright {
  from {
    transform: rotate(calc(var(--sweep) * -1));
  }
  to {
    transform: rotate(0deg);
  }
}
/*
 * Reduced motion takes the whole thing off, entrance included — a decorative
 * sweep is precisely what this setting is for. `animation: none` also restores
 * the faces to opacity 1, so the final state is the static collage rather than
 * seven invisible avatars. The parallax is disarmed in the JS as well, so the
 * `transform: none` here is belt and braces for a viewport that changes the
 * setting after load.
 */
@media (prefers-reduced-motion: reduce) {
  .rs-ac-hero__swing,
  .rs-ac-hero__face {
    animation: none;
  }
  .rs-ac-hero__orbit,
  .rs-ac-hero__orbiter {
    transform: none;
    transition: none;
  }
}
/* ---- 2. Trusted clients -------------------------------------------------- */
.rs-ac-logos {
  background-color: var(--rs-grey-light-50, #f9f9f9);
}

/* `.container-fluid` is full-bleed, so the title block carries the frame width
   itself rather than a hard 147px of padding — same result at 1440 and correct
   at every other width too. */
.rs-ac-logos__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  /* `width` is load-bearing: `margin-inline: auto` on a column-flex child cancels
     the default stretch, and without a definite width the block collapses to the
     width of its longest line instead of centring inside the frame. */
  width: 100%;
  max-width: 1146px;
  margin-inline: auto;
}

.rs-ac-rate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.rs-ac-rate__stars {
  display: flex;
  gap: 4px;
  color: var(--rs-yellow-btn-hover, #ffb710);
  font-size: 10px;
  line-height: 1;
}

/* The frame draws each star in a 12px box; the glyph's own advance is 12.5, which
   is enough to push the five-star row 2.5px past the design. */
.rs-ac-rate__stars i {
  width: 12px;
  text-align: center;
}

.rs-ac-rate__link {
  max-width: 172px;
  color: var(--rs-black-second, #5d636a);
  font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
}

.rs-ac-rate__link:hover,
.rs-ac-rate__link:focus-visible {
  color: var(--rs-black-prime, #34383c);
  text-decoration: underline;
}

/* Hug, as the frame has it — the box is the line, not the column it sits in. */
.rs-ac-logos__claim {
  width: fit-content;
  max-width: 1146px;
  margin: 0 auto;
  color: var(--rs-black-prime, #34383c);
  font-family: var(--rs-font-display, "Montserrat"), sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
}

.rs-ac-logos__claim strong {
  font-weight: 700;
}

/* ---- 3. Issues ----------------------------------------------------------- */
.rs-ac-issues {
  padding: 90px 0 110px;
}

.rs-ac-issues__inner {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* The sticky-title-plus-cards split, shared by `issues` and `benefits`. */
.rs-ac-split {
  display: flex;
  gap: 30px;
}

.rs-ac-split__col {
  flex: 1 1 0;
  min-width: 0;
}

.rs-ac-issues__title {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px;
}

/*
 * THE 151 LINE — every sticky left-hand heading on this page and on /about/ pins
 * its HEADING TEXT 151px from the viewport top: the fixed header is 79px tall
 * (measured, /about/ and this page) and Raman's ruling of 2026-08-27 is 72px of
 * clear space below it. It replaced a first pass at 120 — 41px of clear space —
 * which he reviewed on staging and called too close to the nav bar.
 *
 * `.sticky-lg-top` pins at `top: 0`, which parks the title under the header. So
 * the offset is what does the work, and each heading's OWN top padding counts
 * toward the 151: this card carries 40 of its own, so it offsets to 111. The ones
 * with no top padding offset to a flat 151.
 *
 * The paddings are deliberately left alone. They are each frame's internal card
 * padding, and on /about/'s Values column the 96px is what aligns the heading
 * with the first value item beside it — stripping them to make every BOX land on
 * one line would deviate from Figma and break that alignment, to tidy up an edge
 * nobody can see. The text is the thing on the line.
 *
 * Change 72 and every one of the six has to be re-derived — the offsets differ
 * precisely because the paddings do.
 *
 * Same media query as the utility it corrects, so the two cannot disagree about
 * which widths they apply to.
 */
@media (min-width: 992px) {
  .rs-ac-issues__title.sticky-lg-top {
    top: 111px; /* + this card's own 40px padding-top = the 151 line. */
  }
}
.rs-ac-issues__title h2 {
  margin: 0;
  color: var(--rs-white-pure, #fffffe);
  font-family: var(--rs-font-display, "Montserrat"), sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
  hyphens: auto;
  overflow-wrap: break-word;
}

/*
 * The arrow, inline rather than an asset: it is one path and it inherits `color`,
 * which a background image or a rendered PNG would not.
 *
 * Path taken verbatim from Figma's own SVG render of 42420:36345 — the node reads
 * as a bare 120x0 line through the plugin API, with the arrowhead living in a
 * `strokeCap` that does not survive extraction. Rendering the node is the only way
 * to see it.
 *
 * 121 wide, not the frame's 120: the last 0.7px is the head's round cap, which
 * Figma also paints outside its own frame.
 */
.rs-ac-arrow {
  display: block;
  width: 121px;
  height: 37px;
}

.rs-ac-issues__title .rs-ac-arrow {
  color: var(--rs-white-pure, #fffffe);
}

/* The 20/20 is clearance for the focused card's 20x16 offset shadow, which
   would otherwise be clipped by the column. */
.rs-ac-cards {
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding: 0 20px 20px 0;
}

/*
 * The card is shared between the dark `issues` band and the white `benefits` one.
 * Dark is the base because it shipped first; `--light` is the skin, and the only
 * things that vary are ink, border colour, shadow colour and the dot grid's alpha.
 * `position` is for the certification badge that hangs off the benefits card.
 */
.rs-ac-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px;
  border-radius: 8px;
  transition: box-shadow 0.3s ease-out, background-color 0.3s ease-out;
}

.rs-ac-card.is-focus {
  background-color: var(--rs-black-prime, #34383c);
  /* The card's texture is the page's dot grid — see the block at the top of this
     file. It used to say 24px here and be "verified pixel-for-pixel"; it was not.
     Remeasured off Figma at 27.00px/2x = 13.5. */
  background-image: radial-gradient(var(--rs-dot-ink, #3e4145) 1.25px, rgba(0, 0, 0, 0) 1.75px);
  background-size: 13.5px 13.5px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 254, 0.102), 20px 16px 0 0 rgba(36, 38, 42, 0.6);
}

.rs-ac-card__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Two rows, as the frame has them: `.rs-ac-card__label` is the full-width header
   the chip sits in, `__chip` is the hug-width icon+text pair itself. */
.rs-ac-card__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  color: var(--rs-grey-light-30, #d8e2e3);
  font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

.rs-ac-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.rs-ac-card__label i {
  width: 24px;
  font-size: 18px;
  line-height: 1;
  text-align: center;
}

/*
 * Flex column for the sake of the multi-paragraph cards: Figma writes those as one
 * text node with a newline and its own paragraph spacing, which `<br>` cannot do.
 * A single-paragraph body has no gap to apply and is unaffected.
 *
 * 14, not the 16 the flow rows use — paragraph spacing is set per text style in the
 * frame and these two disagree. Measured: 4 lines at 16/1.5 is 96, the frame's text
 * box is 110.
 */
.rs-ac-card__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  color: var(--rs-grey-light-30, #d8e2e3);
  font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.rs-ac-card.is-focus .rs-ac-card__label,
.rs-ac-card.is-focus .rs-ac-card__body {
  color: var(--rs-white-pure, #fffffe);
}

.rs-ac-card__actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

/*
 * The focused card's CTA flips to the white face. The `--bs-btn-*` half is what
 * keeps hover and :active working without a second rule — but `background-color`
 * has to be stated outright as well, because main.scss:492 paints `.btn-dark`
 * with a plain declaration rather than through `--bs-btn-bg`, and a custom
 * property cannot beat a real one no matter how specific the selector.
 */
.rs-ac-card.is-focus .rs-ac-card__cta {
  background-color: var(--rs-white-pure, #fffffe);
  border-color: var(--rs-white-pure, #fffffe);
  color: var(--rs-black-prime, #34383c);
  --bs-btn-bg: var(--rs-white-pure, #fffffe);
  --bs-btn-border-color: var(--rs-white-pure, #fffffe);
  --bs-btn-color: var(--rs-black-prime, #34383c);
  --bs-btn-hover-bg: var(--rs-grey-light-40, #ebf2f2);
  --bs-btn-hover-border-color: var(--rs-grey-light-40, #ebf2f2);
  --bs-btn-hover-color: var(--rs-black-prime, #34383c);
  --bs-btn-active-bg: var(--rs-grey-light-30, #d8e2e3);
  --bs-btn-active-border-color: var(--rs-grey-light-30, #d8e2e3);
  --bs-btn-active-color: var(--rs-black-prime, #34383c);
}

/* ---- 3b. Issues — the connected flow ------------------------------------- */
.rs-ac-flow {
  display: flex;
  flex-direction: column;
  max-width: 754px;
  margin-inline: auto;
}

.rs-ac-flow__link {
  align-self: center;
  width: 2px;
  height: 40px;
  background-color: rgba(255, 255, 254, 0.102);
}

/*
 * `display: flex` for the sake of one row: Figma's second row is a single text
 * node with a newline in it and 16px of paragraph spacing, which `<br>` cannot
 * reproduce. Each paragraph is a `<span>`; a row with one paragraph has no gap to
 * apply and is unaffected.
 */
.rs-ac-flow__row {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 40px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 254, 0.102);
  color: var(--rs-white-pure, #fffffe);
  font-family: var(--rs-font-display, "Montserrat"), sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  transition: box-shadow 0.3s ease-out, background-color 0.3s ease-out;
}

.rs-ac-flow__row.is-focus {
  background-color: var(--rs-black-prime, #34383c);
  background-image: radial-gradient(var(--rs-dot-ink, #3e4145) 1.25px, rgba(0, 0, 0, 0) 1.75px);
  background-size: 13.5px 13.5px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 254, 0.102), 20px 16px 0 0 rgba(36, 38, 42, 0.6);
}

/* The scroll-driven focus IS the animation here. Honouring the preference means
   dropping the crossfade, not the state. */
@media (prefers-reduced-motion: reduce) {
  .rs-ac-card,
  .rs-ac-flow__row {
    transition: none;
  }
}
/* ---- 4. Benefits --------------------------------------------------------- */
.rs-ac-benefits {
  padding: 90px 0;
  background-color: var(--rs-white-pure, #fffffe);
}

.rs-ac-benefits__inner {
  --bs-gutter-x: 0;
}

/*
 * No top padding, unlike the `issues` title — the frame hangs the heading off the
 * section's own 90px and only pads the other three sides.
 */
.rs-ac-benefits__title {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 0 40px 40px;
}

/* The 151 line — see the block above `.rs-ac-issues__title.sticky-lg-top`. Flat
   151 here, not `issues`' 111: this column carries no top padding of its own. */
@media (min-width: 992px) {
  .rs-ac-benefits__title.sticky-lg-top {
    top: 151px;
  }
}
.rs-ac-benefits__text {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.rs-ac-benefits__title h2 {
  margin: 0;
  color: var(--rs-black-prime, #34383c);
  font-family: var(--rs-font-display, "Montserrat"), sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.rs-ac-benefits__sub {
  margin: 0;
  color: var(--rs-black-second, #5d636a);
  font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.rs-ac-benefits__title .rs-ac-arrow {
  color: var(--rs-black-prime, #34383c);
}

.rs-ac-benefits__cards {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* The light skin. Everything else comes from `.rs-ac-card`. */
.rs-ac-card--light .rs-ac-card__label,
.rs-ac-card--light .rs-ac-card__body {
  color: var(--rs-black-second, #5d636a);
}

.rs-ac-card--light.is-focus {
  background-color: var(--rs-white-pure, #fffffe);
  /* Same 24px dot grid as the dark band, but the frame tiles it at 15% here
     instead of full — so the alpha goes on the ink rather than on a layer of its
     own. Colour is --rs-dot-ink; it is written out because a token cannot carry
     the alpha with it. */
  background-image: radial-gradient(rgba(62, 65, 69, 0.15) 1.25px, rgba(0, 0, 0, 0) 1.75px);
  background-size: 13.5px 13.5px;
  /* Opaque #34383c on both, unlike the dark band's translucent pair. */
  box-shadow: inset 0 0 0 2px var(--rs-black-prime, #34383c), 20px 16px 0 0 var(--rs-black-prime, #34383c);
}

.rs-ac-card--light.is-focus .rs-ac-card__label,
.rs-ac-card--light.is-focus .rs-ac-card__body {
  color: var(--rs-black-prime, #34383c);
}

/*
 * The certification badge. Pinned to the third card and NOT to the focus state, so
 * it stays put while the highlight travels.
 *
 * Positioning, layer and visibility are Bootstrap utilities on the element —
 * `position-absolute z-3 d-none d-lg-block`. Only the offsets and the size are here,
 * because those are the frame's numbers and nothing else has them. `right`, not
 * Figma's `left: 459`, so the 23px overhang survives a narrower card; and the badge
 * overlaps the card above it, which is what `z-3` is for.
 */
.rs-ac-card__badge {
  right: -23px;
  top: -33px;
  width: 122px;
  height: 122px;
  max-width: none;
}

/* ---- 5. Graphics --------------------------------------------------------- */
/*
 * `graphics` and `toolkit` are one visual surface: this pads 45 at the bottom, that
 * one 60 at the top, and both sit on the same dark grain.
 */
.rs-ac-graphics {
  padding: 90px 0 45px;
}

.rs-ac-graphics__inner,
.rs-ac-toolkit__inner,
.rs-ac-teammates__inner,
.rs-ac-roadmap__inner,
.rs-ac-pricing__inner {
  --bs-gutter-x: 0;
}

.rs-ac-graphics__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

.rs-ac-graphics__lede {
  max-width: 568px;
  margin: 0;
  color: var(--rs-grey-light-30, #d8e2e3);
  font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
}

/*
 * The two lobes overlap by 166px, which is what the -166 item spacing in the frame
 * means. The second one is later in the DOM, so it paints over the first without a
 * z-index — and the mark, being absolute, sits above both.
 */
.rs-ac-venn {
  position: relative;
  display: flex;
  align-items: center;
  width: 754px;
  margin-inline: auto;
}

.rs-ac-venn__lobe {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 460px;
  /* Inside stroke, so an inset shadow rather than a border — a real border would
     take 4px off the content box the frame sizes from. */
  box-shadow: inset 0 0 0 2px rgba(255, 255, 254, 0.102);
}

/* A lozenge: square on the side that meets its twin, fully round on the outside. */
.rs-ac-venn__lobe--business {
  height: 356px;
  padding: 40px 40px 0;
  border-radius: 4px 178px 178px 4px;
}

.rs-ac-venn__lobe--technical {
  /* Its content adds up to 352 and the frame reports 356; matching its twin is
     clearly the intent, and `circles` centres them so 4px would show as a shift. */
  min-height: 356px;
  align-items: flex-end;
  margin-left: -166px;
  padding: 40px;
  border-radius: 178px 4px 4px 178px;
}

.rs-ac-venn__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 8px 16px;
  border-radius: 4px;
  /* One step darker than the band it sits on; not in the token set. */
  background-color: #24262a;
  color: var(--rs-white-pure, #fffffe);
  font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

.rs-ac-venn__lobe--business .rs-ac-venn__chip {
  align-self: flex-start;
}

.rs-ac-venn__labels {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rs-ac-venn__labels li {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-radius: 4px;
  color: var(--rs-white-pure, #fffffe);
  font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.rs-ac-venn__lobe--business .rs-ac-venn__labels li {
  align-self: flex-start;
}

/* Hug, like the frame — a block-level list would fill the lobe and report a width
   the design does not have, even though the rows look identical. */
.rs-ac-venn__lobe--business .rs-ac-venn__labels {
  align-self: flex-start;
  width: fit-content;
}

/* The technical side reads right-to-left: the frame puts the dot after the text and
   pins the row to the lobe's inner edge. Same markup, reversed. */
.rs-ac-venn__lobe--technical .rs-ac-venn__labels {
  width: 243px;
}

.rs-ac-venn__lobe--technical .rs-ac-venn__labels li {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

.rs-ac-venn__dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--rs-yellow-00, #ffc94b);
}

.rs-ac-venn__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
}

/* ---- 6. CTA — the toolkit ------------------------------------------------ */
.rs-ac-toolkit {
  padding: 60px 0 90px;
}

.rs-ac-toolkit__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}

.rs-ac-toolkit__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}

.rs-ac-toolkit__title {
  /* Fill, not hug: the frame's heading spans the container and centres its text
     inside, which `align-items: center` on the parent would otherwise undo. */
  align-self: stretch;
  margin: 0;
  color: var(--rs-white-pure, #fffffe);
  font-family: var(--rs-font-display, "Montserrat"), sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.rs-ac-toolkit__sub {
  display: flex;
  flex-direction: column;
  /* Same 14px paragraph spacing as the cards — see .rs-ac-card__body. */
  gap: 14px;
  max-width: 568px;
  color: var(--rs-grey-light-30, #d8e2e3);
  font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
}

/*
 * Four stages joined by short rules. The rules are drawn in the flex gap rather
 * than as elements, which keeps the list a clean `<ol>` of four items.
 */
.rs-ac-stages {
  display: flex;
  align-items: center;
  gap: 30px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rs-ac-stages__item {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border-radius: 4px;
  /* OUTSIDE stroke here, unlike the cards — so a spread shadow, not an inset one. */
  box-shadow: 0 0 0 2px rgba(255, 255, 254, 0.102);
  /* The frame gives these the dot grid with no colour under it, so the band shows
     through. Full opacity, as on the dark `issues` cards. */
  background-image: radial-gradient(var(--rs-dot-ink, #3e4145) 1.25px, rgba(0, 0, 0, 0) 1.75px);
  background-size: 13.5px 13.5px;
}

.rs-ac-stages__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: 30px;
  height: 2px;
  background-color: rgba(255, 255, 254, 0.102);
}

.rs-ac-stages__title {
  margin: 0;
  color: var(--rs-white-ivory, #f9faf4);
  font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

/*
 * `min-height` because the frame fixes all four of these text boxes at 42px rather
 * than letting them hug — which is what keeps the four cards the same 107px height
 * when one body is a line shorter than the rest. Without it they stagger.
 */
.rs-ac-stages__body {
  min-height: 42px;
  margin: 0;
  color: var(--rs-grey-light-30, #d8e2e3);
  font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

/* ---- 7. CTA — teammates -------------------------------------------------- */
.rs-ac-teammates {
  padding: 90px 0;
  /* One step darker than the other dark bands, and not in the token set. */
  background-color: #2a2d31;
}

.rs-ac-teammates__inner {
  display: flex;
  justify-content: center;
}

.rs-ac-teammates__panel {
  display: flex;
  align-items: center;
  gap: 32px;
  width: 1080px;
  padding: 40px 40px 40px 60px;
  border-radius: 8px;
  /* Outside stroke again. */
  box-shadow: 0 0 0 2px rgba(255, 255, 254, 0.102);
}

.rs-ac-teammates__left {
  display: flex;
  flex: 0 0 518px;
  flex-direction: column;
  gap: 40px;
}

.rs-ac-teammates__text {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.rs-ac-teammates__title {
  margin: 0;
  color: var(--rs-white-pure, #fffffe);
  font-family: var(--rs-font-display, "Montserrat"), sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
}

.rs-ac-teammates__sub {
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--rs-grey-light-30, #d8e2e3);
  font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

/* The arrow link, shared by `teammates` (white, on the dark band) and by the
   closing band's "Get the Toolkit" (ink, on the yellow). Figma draws the arrow
   as a sibling of the link instance rather than a child, but a single <a> is
   the accessible shape — one target, one focus ring. */
.rs-ac-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--rs-white-pure, #fffffe);
  font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}

/*
 * NO UNDERLINE ON HOVER — Raman, 2026-08-27: "we never use underline style for
 * hover effects". It is also what the design system says: the `Link text`
 * component set (33721:24628) carries 28 variants across four colours and three
 * states, and not one of them has a text decoration in any state. The hover is a
 * COLOUR change, and for both the black and teal defaults that colour is coral:
 *
 *   default black #34383c / teal #408897  ->  hover #f35b54  ->  click #d9514b
 *   default yellow #ffc94b                ->  hover #ffb710  ->  click #e5b137
 *   default coral #f35b54                 ->  hover #d9514b  ->  click #c64843
 *
 * The white default below is not one of the DS's four — it is this page's dark
 * bands — but coral reads on charcoal and is the same move the theme already
 * makes for bare links (`a:hover` in style.css is #f35b54), so both variants land
 * there and the page stays internally consistent.
 *
 * The arrow's 3px nudge stays and now carries the whole affordance. That was
 * already the accepted trade against WCAG 1.4.1 when `.rs-linktext` shipped
 * without an underline (Raman, 2026-08-13); this only brings the page in line.
 */
.rs-ac-link:hover,
.rs-ac-link:focus-visible {
  color: var(--rs-coral-00, #f35b54);
  text-decoration: none;
}

/* 14px, not the 18 the buttons use — this arrow is the link atom's, not the atom
   button's. */
.rs-ac-link i {
  font-size: 14px;
  line-height: 1;
  transition: transform 0.2s ease-out;
}

.rs-ac-link:hover i,
.rs-ac-link:focus-visible i {
  transform: translateX(3px);
}

/* Figma 43031:36384, props color=black. */
.rs-ac-link--ink {
  color: var(--rs-black-prime, #34383c);
}

/*
 * This variant used to pin hover to the same black, which is what made it look
 * like the underline WAS the hover state. The DS `color=black` variant hovers to
 * coral (33721:24631), so it does — same as the white default above, so the rule
 * there already covers it and this only has to stop overriding it.
 */
.rs-ac-link--ink:hover,
.rs-ac-link--ink:focus-visible {
  color: var(--rs-coral-00, #f35b54);
}

/* Was baked into the link itself; it is the teammates column's business, not
   the link's — the closing band centres the same element. */
.rs-ac-teammates__left .rs-ac-link {
  align-self: flex-start;
}

.rs-ac-teammates__art {
  flex: 0 0 430px;
  width: 430px;
  height: 360px;
  max-width: none;
}

/* ---- 8. Roadmap ---------------------------------------------------------- */
.rs-ac-roadmap {
  padding: 90px 0;
  background-color: var(--rs-white-pure, #fffffe);
}

/* Same shape and the same reasoning as `benefits`: no top padding on the title, so
   the sticky offset carries the 40 instead. */
.rs-ac-roadmap__title {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 0 40px 40px;
}

/* ---- 9b. Extra — the pricing note ----------------------------------------
 *
 * Figma "extra" 43031:13611. Static. Same 754 column as `guarantee` below it, and
 * the same ivory the testimonials wall uses.
 *
 * Note the asymmetric band padding: 90 top, 110 bottom. That is the frame's, and it
 * is what leaves room for the card's 16px downward lift without crowding the section
 * under it.
 */
.rs-ac-extra {
  padding: 90px 0 110px;
  background-color: var(--rs-white-ivory, #f9faf4);
}

.rs-ac-extra__inner {
  display: flex;
  flex-direction: column;
  gap: 60px;
  width: 100%;
  max-width: 754px;
  margin: 0 auto;
}

.rs-ac-extra__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}

/* Its own line in the frame — a 754-wide text node holding one 20px glyph, centred. */
.rs-ac-extra__mark {
  width: 100%;
  margin: 0;
  color: var(--rs-black-prime, #34383c);
  font-size: 20px;
  line-height: 1;
  text-align: center;
}

/* Bold default, light emphasis — the same inversion as the hero and the guarantee's
   proof box. */
.rs-ac-extra__title {
  width: 100%;
  margin: 0;
  color: var(--rs-black-prime, #34383c);
  font-family: var(--rs-font-display, Montserrat), sans-serif;
  font-size: 32px;
  font-weight: 700;
  /* 42px, not 1.3 (= 41.6). Figma lays the line box out in whole pixels, so the
     frame's text node is 42 — the same rounding that put the testimonials quote on
     26 rather than 26.4. It only shows where the product is fractional. */
  line-height: 42px;
  text-align: center;
}

.rs-ac-extra__lede {
  width: 568px;
  max-width: 100%;
  margin: 0;
  color: var(--rs-black-second, #5d636a);
  font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
}

/*
 * Inset stroke here, NOT a real border — the opposite of the guarantee's boxes, and the
 * arithmetic is why: this card hugs its height, and 196 = 40 + 28 + 40 + 48 + 40 with
 * the stroke contributing nothing. The guarantee's frames are fixed and only add up
 * WITH it. Check the sum before picking.
 *
 * The hard offset shadow is the page's `lift`, in teal and fully opaque here.
 */
.rs-ac-extra__card {
  --rs-dots-alpha: 0.075;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px;
  border-radius: 8px;
  background-color: var(--rs-white-pure, #fffffe);
  box-shadow: inset 0 0 0 2px #35717d, 20px 16px 0 0 #35717d;
}

.rs-ac-extra__card-title {
  margin: 0;
  color: #35717d;
  font-family: var(--rs-font-display, Montserrat), sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.rs-ac-extra__card-body {
  margin: 0;
  color: var(--rs-black-second, #5d636a);
  font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 991.98px) {
  .rs-ac-extra {
    padding: 40px 0 60px;
  }
  .rs-ac-extra__inner {
    gap: 40px;
    padding: 0 20px;
  }
  .rs-ac-extra__head {
    gap: 24px;
  }
  .rs-ac-extra__title {
    font-size: 24px;
    /* 31, not 1.3 (= 31.2) — Figma's whole-pixel line box, and its 62px two-line
       title only adds up at 31. */
    line-height: 31px;
  }
  .rs-ac-extra__lede,
  .rs-ac-extra__card-body {
    font-size: 14px;
  }
  /*
   * The frame keeps the FULL 20/16 lift on mobile — an earlier build shrank it to
   * 10/8 assuming it would not fit. It fits because the card is inset 20 from the
   * right instead: the wrapper is 335 and the card 315, and that 20 is exactly the
   * room the shadow falls into.
   */
  .rs-ac-extra__card {
    gap: 20px;
    margin-right: 20px;
    padding: 20px;
    box-shadow: inset 0 0 0 2px #35717d, 20px 16px 0 0 #35717d;
  }
  .rs-ac-extra__card-title {
    font-size: 15px;
    line-height: 1.4;
  }
}
/* ---- 10. Guarantee --------------------------------------------------------
 *
 * Figma "guarantee" 43031:13895; the 375 frame is 43109:10837.
 *
 * Two things here are unlike every other section on this page:
 *
 * 1. The content column is 754, not 1146 — the frame pads the band 343 a side.
 *    So it does not use `.container` at all; a plain max-width is honest about
 *    being a different measure rather than a container someone has narrowed.
 * 2. The boxes use a REAL `border`, not the inset box-shadow the cards elsewhere
 *    use. Those cards hug their content, where a border would eat into it. These
 *    are fixed-size frames, and the frame's numbers only add up WITH the stroke:
 *    182 = 2 + 16 + (24 + 12 + 102) + 24 + 2, and 52 = 2 + 12 + 24 + 12 + 2. Same
 *    for the proof box: 754 = 2 + 40 + 670 + 40 + 2.
 */
.rs-ac-guar {
  padding: 90px 0;
  background-color: #35717d;
}

/*
 * Two measures, not one. The prose column is 754; the panel is 950 and deliberately
 * wider than the prose it sits between. So the wrapper is capped at the WIDER of the
 * two and the text children cap themselves — capping the wrapper at 754 instead would
 * clamp the panel to the column, which is exactly backwards.
 *
 * No horizontal padding above `lg`: the band is full-bleed and 950 fits inside 1440
 * with 245 to spare. It is added back below, where it is the only thing keeping the
 * panel off the screen edge.
 */
.rs-ac-guar__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  width: 100%;
  max-width: 950px;
  margin: 0 auto;
}

.rs-ac-guar__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
  max-width: 754px;
}

.rs-ac-guar__title {
  width: 100%;
  margin: 0;
  color: var(--rs-white-pure, #fffffe);
  font-family: var(--rs-font-display, Montserrat), sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.rs-ac-guar__lede {
  width: 568px;
  max-width: 100%;
  margin: 0;
  color: var(--rs-grey-light-30, #d8e2e3);
  font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
}

/*
 * The panel is WIDER than the column it sits in — 950 against 754 — and carries a
 * second grain layer at 10% on top of the band's own. Measured against the frame's
 * render that is a 1-3/255 difference, i.e. all but invisible; it ships because it
 * is what the frame specifies and it costs one declaration.
 */
.rs-ac-guar__panel {
  /*
   * `.rs-ac-dots`, not `.rs-ac-grain`. This panel's asset is `1b63fe3b`, the dot
   * grid — the first build gave it the noise tile, which was wrong twice over: wrong
   * texture, and applied at full strength it painted the panel almost black (the
   * noise tile is pure black with its texture in the alpha channel).
   *
   * LIGHTER THAN THE FRAME, on Oskar's call. Figma tiles a dark dot here, which over
   * the teal reads as grime rather than texture — measurably darker than the band
   * (87 against 96 in its own render). The dots are white instead, at the same
   * rgba(255,255,254,.102) the section's wires and box borders already use, so the
   * texture and the linework are one material.
   */
  --rs-dots-rgb: 255, 255, 254;
  --rs-dots-alpha: 0.102;
  display: flex;
  flex-direction: column;
  gap: 60px;
  width: 100%;
  margin: 0;
  padding: 40px 98px;
  overflow: hidden;
}

/* ---- the flow ---- */
/*
 * A fixed 754x232 stage with absolutely-positioned nodes, which is how the frame
 * is built — the wires are drawn to those exact coordinates, so the nodes have to
 * land on them. `--rs-guar-wire` is the frame's stroke colour, shared by the SVG
 * (via currentColor) and by every box border.
 *
 * 0.302, not the 0.102 this carried until 2026-08-27. Every stroke in the `schem`
 * group (43031:14019) is #FFFFFE4D — the two boxes, the decision diamond and all
 * three connector vectors — and 0x4D/255 is 30.2%, not 10%. Raman caught it on
 * staging: at 10% the wires were nearly invisible against the teal.
 *
 * Not to be confused with `--rs-dots-alpha` above, which really is 0.102 — that
 * is the panel's dot texture, a different token that happens to share the digits.
 */
.rs-ac-guar__flow {
  --rs-guar-wire: rgba(255, 255, 254, 0.302);
  position: relative;
  width: 754px;
  max-width: 100%;
  height: 232px;
  color: var(--rs-guar-wire);
}

.rs-ac-guar__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
}

/* Only ever one of the two. */
.rs-ac-guar__wires--m {
  display: none;
}

.rs-ac-guar__node,
.rs-ac-guar__test,
.rs-ac-guar__branch {
  position: absolute;
  margin: 0;
  color: var(--rs-white-pure, #fffffe);
  font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.rs-ac-guar__node {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 182px;
  height: 52px;
  padding: 12px 24px 12px 16px;
  border: 2px solid var(--rs-guar-wire);
  border-radius: 8px;
}

/* Figma's icon frame is 24x24 and the glyph inside it is 14 — so the box is 24 square
   and the glyph is centred in it, not a 14px box that happens to be 24 wide. */
.rs-ac-guar__node i {
  display: flex;
  flex: 0 0 24px;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 14px;
  line-height: 1;
}

.rs-ac-guar__node--start {
  top: 74px;
  left: 0;
}

.rs-ac-guar__node--finish {
  top: 74px;
  left: 572px;
}

/* The label stack inside the diamond. The diamond itself is drawn by the SVG. */
.rs-ac-guar__test {
  display: flex;
  top: 58px;
  left: 327px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 102px;
}

.rs-ac-guar__test-op {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background-color: var(--rs-white-ivory, #f9faf4);
  color: var(--rs-black-prime, #34383c);
  font-size: 14px;
  line-height: 1;
}

.rs-ac-guar__test-value {
  font-size: 16px;
}

.rs-ac-guar__branch--yes {
  top: 71px;
  left: 520px;
}

.rs-ac-guar__branch--no {
  top: 203px;
  left: 394px;
}

.rs-ac-guar__branch--cost {
  top: 203px;
  left: 177px;
}

/* ---- the rule under the diagram ---- */
/* `figcaption` qualified, and `font-style` restated: the parent theme's reset.css
   styles EVERY figcaption italic. Second time in this build — the testimonials
   person block is a figcaption too. Any <figcaption> in this codebase needs it. */
figcaption.rs-ac-guar__extra {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  font-style: normal;
}

.rs-ac-guar__rule {
  /* 714, not the 754 its parent gives it — the frame insets this one paragraph
     20 a side. The footnote below it is not inset; it hugs. */
  max-width: 714px;
  margin: 0;
  color: var(--rs-grey-light-30, #d8e2e3);
  font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
}

.rs-ac-guar__foot {
  margin: 0;
  color: var(--rs-grey-light-30, #d8e2e3);
  font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

/* ---- the proof box ---- */
/* Bold is the default and the emphasis is the LIGHT half, same inversion as the
   hero headline — that is how the frame draws it. */
.rs-ac-guar__proof {
  width: 100%;
  max-width: 754px;
  margin: 0;
  padding: 40px;
  border: 2px solid rgba(255, 255, 254, 0.102);
  border-radius: 8px;
  color: var(--rs-white-pure, #fffffe);
  font-family: var(--rs-font-display, Montserrat), sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

/*
 * Below lg the absolute stage is abandoned. The 375 frame (43109:10837) reorders
 * the same nodes vertically — start, diamond, finish, with the NO loop running
 * down the left — so stacking them in source order keeps the reading order that
 * design already implies. The wires go with it: they are drawn to desktop
 * coordinates and mean nothing once the nodes move.
 */
@media (max-width: 991.98px) {
  .rs-ac-guar {
    padding: 40px 0;
  }
  .rs-ac-guar__inner {
    gap: 40px;
    padding: 0 20px;
  }
  .rs-ac-guar__panel {
    padding: 20px;
  }
  .rs-ac-guar__head {
    gap: 24px;
  }
  .rs-ac-guar__title {
    font-size: 30px;
    line-height: 1.2;
  }
  .rs-ac-guar__lede {
    font-size: 14px;
  }
  .rs-ac-guar__panel {
    gap: 40px;
    padding: 20px;
  }
  /*
   * The flow turns through 90 degrees — Figma 43109:10842, a 282x294 stage. It is
   * still absolutely positioned, just to a different set of coordinates: the spine
   * runs down x=182 and the NO loop comes back up the LEFT edge instead of along
   * the bottom. An earlier build stacked the nodes and hid the wires, which lost
   * the diagram entirely — the boxes read as an unordered list.
   */
  .rs-ac-guar__flow {
    width: 282px;
    max-width: 100%;
    height: 294px;
    margin: 0 auto;
  }
  .rs-ac-guar__wires {
    display: none;
  }
  .rs-ac-guar__wires--m {
    display: block;
  }
  .rs-ac-guar__node {
    gap: 12px;
    height: 37px;
    padding: 8px 16px 8px 12px;
    font-size: 12px;
    line-height: 1.4;
  }
  .rs-ac-guar__node i {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
  }
  .rs-ac-guar__node--start {
    top: 0;
    left: 109px;
    width: 146px;
  }
  .rs-ac-guar__node--finish {
    top: 257px;
    left: 137px;
    width: 89px;
  }
  .rs-ac-guar__test {
    top: 117px;
    left: 138px;
    gap: 6px;
    width: 88px;
    font-size: 12px;
    line-height: 1.4;
  }
  .rs-ac-guar__test-op {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }
  .rs-ac-guar__test-value {
    font-size: 12px;
  }
  .rs-ac-guar__branch {
    font-size: 12px;
    line-height: 1.4;
  }
  .rs-ac-guar__branch--yes {
    top: 226px;
    left: 192px;
  }
  .rs-ac-guar__branch--no {
    top: 157px;
    left: 36px;
  }
  /* Two lines here, unlike the desktop's one — the loop's left channel is 74 wide. */
  .rs-ac-guar__branch--cost {
    top: 66px;
    left: 10px;
    width: 74px;
  }
  .rs-ac-guar__rule {
    font-size: 14px;
  }
  .rs-ac-guar__foot {
    font-size: 12px;
  }
  .rs-ac-guar__proof {
    padding: 20px;
    font-size: 15px;
  }
}
/* ---- 12. Closing CTA ------------------------------------------------------
 *
 * Figma "CTA - Toolkit" 43031:36192 — 1440x918, the page's last band before the
 * FAQ. Two blocks 80px apart: a dark card carrying the booking CTA, and a plain
 * pair of lines offering the toolkit to anyone not ready to book.
 *
 * The frame's own name collides with section 6, which is also "CTA - Toolkit".
 * That one is the toolkit pitch; this one is the close, hence `rs-ac-close`.
 *
 * Sections 5-8 tile grain over a flat dark fill. This band tiles the same
 * texture over a gradient at a third of the alpha, which is why `.rs-ac-grain`
 * grew its two custom properties instead of gaining a near-copy.
 */
.rs-ac-close {
  --rs-grain-opacity: 0.05;
  /* Nothing shows through the gradient; stated so the fallback is not black. */
  --rs-grain-bg: var(--rs-yellow-prime, #ffc94b);
  padding: 90px 0;
  /* 135.3deg is the frame's own angle. Measuring it back off a 2x render of the
     node put it at 130.1 +/- a few degrees (rms 4.6 of a 50-level ramp), which
     is the value's own noise floor, not a discrepancy worth chasing: the two
     stops are a shade apart and the axis is invisible at any angle near this. */
  background-image: linear-gradient(135.3deg, #ffd87d 0%, #ffc94b 100%);
}

.rs-ac-close__inner {
  --bs-gutter-x: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}

/* -- the dark card -- */
.rs-ac-close__card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  width: 100%;
  padding: 60px;
  border-radius: 8px;
  background-color: #2a2d31;
  /*
   * The glow. Figma's handles are not in the extraction, so the ellipse was
   * measured off a 2x render of the node: invert the composite per pixel to
   * recover the gradient's own t, then fit centre and radii. It lands on
   * (50%, 100%) with radii 50% x 100% — the designer dragged the handles to
   * the box edges.
   *
   * Five stops, not two, because Figma interpolates gradient alpha straight
   * and CSS premultiplies. Premultiplied, the transparent end contributes its
   * colour anyway and the midtone blows out by 10.6/255; sampling the straight
   * ramp at quarters brings that to 0.73/255. The stop alphas already carry
   * the layer's own 0.3.
   */
  background-image: radial-gradient(ellipse 50% 100% at 50% 100%, rgba(182, 169, 141, 0.3) 0%, rgba(147, 138, 119, 0.225) 25%, rgba(112, 108, 96, 0.15) 50%, rgba(76, 78, 74, 0.075) 75%, rgba(41, 47, 52, 0) 100%);
}

/* Its own grain, at twice the band's alpha and over its own fill. */
.rs-ac-close__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.1;
  background: url("../img/noise-64.webp") repeat;
}

.rs-ac-close__card > * {
  position: relative;
  z-index: 1;
}

.rs-ac-close__title {
  max-width: 658px;
  margin: 0;
  color: var(--rs-white-pure, #fffffe);
  font-family: var(--rs-font-display, "Montserrat"), sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.rs-ac-close__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.rs-ac-close__note {
  max-width: 304px;
  margin: 0;
  color: var(--rs-grey-light-30, #d8e2e3);
  font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
}

.rs-ac-close__scarcity {
  margin: 0;
  color: var(--rs-yellow-prime, #ffc94b);
  font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

/* -- the toolkit offer under it -- */
.rs-ac-close__aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.rs-ac-close__asidetext {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.rs-ac-close__asidetitle {
  margin: 0;
  color: var(--rs-black-prime, #34383c);
  font-family: var(--rs-font-display, "Montserrat"), sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.rs-ac-close__asidesub {
  max-width: 568px;
  margin: 0;
  color: var(--rs-black-prime, #34383c);
  font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
}

/* ---- Closing CTA, mobile — Figma 43109:10881, 375x692 ----
 *
 * The desktop band is full-bleed with a 1146 card; here the card is 335 and its
 * padding drops 60 -> 40, which puts the inner column at 255. The aside below it
 * loses its 754 cap and its title drops 24 -> 18.
 *
 * 40 + 414 + 40 + 158 + 40 = 692, which is the frame.
 */
@media (max-width: 991.98px) {
  .rs-ac-close {
    padding: 40px 0;
  }
  .rs-ac-close__inner {
    gap: 40px;
    padding: 0 20px;
  }
  .rs-ac-close__card {
    gap: 40px;
    padding: 40px;
  }
  .rs-ac-close__title {
    max-width: none;
    font-size: 30px;
    line-height: 1.2;
  }
  .rs-ac-close__actions {
    align-self: stretch;
    gap: 16px;
  }
  .rs-ac-close__actions .btn {
    width: 100%;
  }
  .rs-ac-close__note {
    max-width: none;
    font-size: 14px;
  }
  .rs-ac-close__scarcity {
    font-size: 14px;
    line-height: 1.6;
  }
  .rs-ac-close__aside {
    gap: 24px;
  }
  .rs-ac-close__asidetext {
    gap: 24px;
  }
  .rs-ac-close__asidetitle {
    font-size: 18px;
    line-height: 1.4;
  }
  .rs-ac-close__asidesub {
    max-width: none;
    font-size: 14px;
  }
}
/* The 151 line — see the block above `.rs-ac-issues__title.sticky-lg-top`. */
@media (min-width: 992px) {
  .rs-ac-roadmap__title.sticky-lg-top {
    top: 151px;
  }
}
.rs-ac-roadmap__text {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.rs-ac-roadmap__title h2 {
  margin: 0;
  color: var(--rs-black-prime, #34383c);
  font-family: var(--rs-font-display, "Montserrat"), sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.rs-ac-roadmap__sub {
  margin: 0;
  color: var(--rs-black-second, #5d636a);
  font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.rs-ac-roadmap__title .rs-ac-arrow {
  color: var(--rs-black-prime, #34383c);
}

.rs-ac-roadmap__cards {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/*
 * `title.actions` (43115:37184) — 24 between the button and the scarcity line, and
 * 40 above it from `.rs-ac-roadmap__title`'s own gap.
 *
 * `align-items: flex-start` is what keeps the button at its hug width (199 in the
 * frame) instead of stretching to the 478 column.
 */
.rs-ac-roadmap__actions {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

/*
 * The scarcity line. Was `.rs-ac-card__note` and lived inside the last card, which
 * is also where its light `#f9f9f9` plate came from — it read as a plate against
 * that card's dark, dotted face. Out here in the title column the frame's
 * `free-space` carries no fill at all, and #f9f9f9 on #fffffe would be a smudge
 * rather than a plate, so it goes.
 */
.rs-ac-roadmap__note {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  width: fit-content;
  margin: 0;
  border-radius: 4px;
  color: var(--rs-black-prime, #34383c);
  font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.rs-ac-roadmap__note-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--rs-yellow-btn-hover, #ffb710);
}

/* ---- 9a. Pricing — Figma `roadmap` 43031:13225, 1440x1668 ----------------
 *
 * Named `pricing` because the page already has an `.rs-ac-roadmap` and Figma
 * gave two different sections the same name.
 *
 * The CARD needs almost nothing here: `.rs-ac-card`'s dark base already is this
 * card, down to the 20/16 lift and the 2px hairline on `.is-focus`. The price
 * chip is the only new part, and `.rs-ac-card__label` was already a
 * `space-between` row waiting for a second child.
 *
 * The cards wrapper reuses `.rs-ac-cards` rather than declaring its own: the two
 * frames give identical numbers (gap 60, padding 0 20 20 0 for the lift), and the
 * mobile block already lists that class alongside its siblings.
 */
.rs-ac-pricing {
  padding: 90px 0;
}

.rs-ac-pricing__inner {
  display: flex;
  flex-direction: column;
  gap: 90px;
}

/* Same shape as `roadmap`: no top padding, the sticky offset carries the 40. */
.rs-ac-pricing__title {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 0 40px 40px;
}

/*
 * The 151 line — see the block above `.rs-ac-issues__title.sticky-lg-top`.
 *
 * This one was MISSING, not wrong: the comment above claimed the sticky offset
 * carried the 40, but no rule was ever written, so `.sticky-lg-top` pinned at
 * `top: 0` and the heading sat behind the fixed header — measured at 0px on
 * staging while its three siblings measured 119. That is the worst of the six
 * offsets this ruling normalises, and it is why the section looked broken rather
 * than merely inconsistent.
 */
@media (min-width: 992px) {
  .rs-ac-pricing__title.sticky-lg-top {
    top: 151px;
  }
}
.rs-ac-pricing__text {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.rs-ac-pricing__title h2 {
  margin: 0;
  color: var(--rs-white-pure, #fffffe);
  font-family: var(--rs-font-display, "Montserrat"), sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.rs-ac-pricing__sub {
  /* Flex column at 14, which is Figma's paragraph spacing for this text style —
     see the note in the template. Six lines are 144; the frame's box is 172. */
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  color: var(--rs-grey-light-30, #d8e2e3);
  font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.rs-ac-pricing__title .rs-ac-arrow {
  color: var(--rs-white-pure, #fffffe);
}

/*
 * The price chip. Passive is a 10% white plate on the band; the lit card swaps it
 * for the brand yellow, and has to restate the ink because
 * `.rs-ac-card.is-focus .rs-ac-card__label` paints the whole row white and ties
 * this selector on specificity — order is what decides it, so this block stays
 * BELOW that one.
 */
.rs-ac-card__price {
  flex: 0 0 auto;
  padding: 0 8px;
  border-radius: 4px;
  background-color: rgba(255, 255, 254, 0.102);
  color: var(--rs-grey-light-30, #d8e2e3);
}

.rs-ac-card.is-focus .rs-ac-card__price {
  background-color: var(--rs-yellow-00, #ffc94b);
  color: var(--rs-black-prime, #34383c);
}

/*
 * `square-chevron-right` goes SOLID on the highlighted tier and stays Regular on
 * the other two — Oskar, 2026-08-27. It follows `.is-focus`, i.e. the card wearing
 * the dark box, not `:hover`: the highlight is the state being expressed, and on a
 * touch device there is no hover to express it with.
 *
 * No class swap and no JS: Font Awesome Pro keeps every cut in ONE family and
 * picks the face by weight, so 900 IS the solid one. Measured on canvas — 979px of
 * ink at 400 against 1531 at 900, neither equal to its tofu baseline (1157 / 1391),
 * so both faces are really loaded. That is only true because Solid was added to the
 * kit on 2026-08-26 for the guarantee rocket; if this ever renders as a box, the
 * kit lost the cut.
 *
 * ⚠️ The frame draws Regular in BOTH states (the focus card's icon is 400 at
 * 43031:13319). This is a deliberate departure Oskar asked for, not a reading of
 * the file.
 */
.rs-ac-pricing .rs-ac-card.is-focus .rs-ac-card__label i {
  font-weight: 900;
}

/* `vector-1395` — 2px at 8% white. Bootstrap's own `hr` ships `opacity: .25` and a
   1px border, both of which have to go or the rule renders at 2% of the ink. */
.rs-ac-pricing__rule {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 2px solid rgba(255, 255, 254, 0.08);
  opacity: 1;
}

.rs-ac-pricing__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

.rs-ac-pricing__info-title {
  /* Stretch, not hug: it is centred either way, but the 1146 is what the rule and
     the factor grid share, and a hug title makes that relationship invisible. */
  width: 100%;
  margin: 0;
  color: var(--rs-white-pure, #fffffe);
  font-family: var(--rs-font-display, "Montserrat"), sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.rs-ac-pricing__factors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * 362 fixed, not a fraction: 3 x 362 + 2 x 30 is the 1146 content width exactly,
 * and the fifth card then centres on its own row the way the frame draws it. A
 * percentage basis would leave the last row stretched.
 *
 * The 2px stroke is `strokeAlign: outside` in the frame, so it is a box-shadow
 * rather than a border — a border would eat 4px of the 362 and break that sum.
 */
.rs-ac-pricing__factor {
  display: flex;
  flex: 0 0 362px;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(255, 255, 254, 0.102);
  background-image: radial-gradient(var(--rs-dot-ink, #3e4145) 1.25px, rgba(0, 0, 0, 0) 1.75px);
  background-size: 13.5px 13.5px;
}

.rs-ac-pricing__factor-n {
  color: var(--rs-white-ivory, #f9faf4);
  font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.rs-ac-pricing__factor-body {
  color: var(--rs-grey-light-30, #d8e2e3);
  font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

/* ---- Below lg: the undesigned stack -------------------------------------- */
/*
 * There is no mobile frame for these sections yet, so this is a legibility
 * floor, not a design. Every card and row takes the hairline so they read as
 * separate objects; nothing is singled out, because "which one is highlighted"
 * has no meaning without the sticky column driving it.
 */
@media (max-width: 991.98px) {
  /* The 375 frame pads every band 20 a side, i.e. a 335 content column. Bootstrap's
     own 1.5rem gutter is 12 a side and was leaving each section 16px too wide —
     caught by measuring the toolkit's stage strip at 351 against the frame's 335. */
  .rs-ac-hero .container,
  .rs-ac-issues__inner {
    --bs-gutter-x: 2.5rem;
  }
  /* ---- 1. Hero — Figma 43109:10523, 375x741 ----
     40/20 padding and a 40 gap, which is the mobile band for almost every section
     in that frame. Content stacks above the art rather than beside it. */
  .rs-ac-hero {
    padding: 40px 0;
  }
  .rs-ac-hero__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }
  .rs-ac-hero__content {
    flex: 1 1 auto;
    gap: 24px;
    max-width: none;
  }
  .rs-ac-hero__badge {
    width: 143px;
  }
  .rs-ac-hero__text {
    gap: 24px;
  }
  .rs-ac-hero__title {
    font-size: 32px;
    line-height: 1.2;
  }
  .rs-ac-hero__lede {
    max-width: none;
    font-size: 16px;
    line-height: 1.6;
  }
  .rs-ac-hero__actions {
    align-self: stretch;
    gap: 16px;
  }
  /* Full-bleed button, unlike the desktop's hug. */
  .rs-ac-hero__actions .btn {
    width: 100%;
  }
  .rs-ac-hero__note {
    max-width: none;
    font-size: 14px;
  }
  /*
   * The art is SHOWN on mobile — the 375 frame draws it, 335x219, under the copy.
   * It is not the desktop composition scaled: Figma re-lays it out anisotropically
   * (x about x0.63, y about x0.45), so the ring goes from 802x528 to 335x191 and
   * every face moves independently. Each face therefore carries a second set of
   * coordinates, --mx/--my/--md, alongside the desktop --x/--y/--d, and this block
   * switches to them. Same markup, two layouts, no duplicated elements.
   *
   * ⚠️ Fixed at the frame's 335. Below a 375 viewport the outermost faces clip —
   * the hero already clips, so it degrades quietly rather than pushing the page
   * sideways. Revisit if analytics show meaningful traffic under 375.
   */
  .rs-ac-hero__art {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    max-width: 335px;
    height: 219px;
    margin: 0 auto;
    /*
     * The orbit centre again, carried through the same anisotropic squash the
     * ring itself gets: the fitted centre is (400.2, 278.9) in the asset's own
     * 802x528 box, and this block paints that box at 335x191 offset (0, 14) —
     * so 400.2 * 335/802 = 167.2 and 278.9 * 191/528 + 14 = 114.9.
     *
     * Derived, not measured, and it has to be: there is no separate mobile
     * asset to fit. If the mobile ring's box ever changes, recompute both from
     * the numbers on `.rs-ac-hero__orbit` below rather than nudging these.
     *
     * A circular arc is a rougher stand-in for the squashed ellipse here than
     * it is on desktop, but the whole stage is 335 wide, so the sweep covers
     * ~30px and the error stays under a pixel.
     */
    --cx: 167.2px;
    --cy: 114.9px;
  }
  .rs-ac-hero__orbit {
    left: 0;
    top: 14px;
    width: 335px;
    height: 191px;
  }
  .rs-ac-hero__screen {
    left: 39px;
    top: 32px;
    width: 256px;
    height: 144px;
  }
  /*
   * The orbiter is the positioned box, so the mobile coordinates land on it. The
   * `.rs-ac-hero__face` image inside is 100% of its box at both widths and needs
   * nothing here.
   *
   * Every `--x/--y/--d` below is respelled as `--mx/--my/--md` rather than
   * shadowed. `--d: var(--md)` would read like the tidier move and would not
   * work: those properties are set in the element's `style` attribute, and an
   * inline custom property beats a stylesheet one exactly as an inline `width`
   * would. The mobile values have to be named at every use site.
   */
  .rs-ac-hero__orbiter {
    left: var(--mx);
    top: var(--my);
    width: var(--md);
    height: var(--md);
    transform: translate3d(calc(var(--px, 0) * var(--md) * 0.22), calc(var(--py, 0) * var(--md) * 0.22), 0);
  }
  /* Same reason: the sweep's pivot is the orbit centre relative to the orbiter,
     and the orbiter is at --mx/--my here. Left on --x/--y this would pivot about
     a point up to 300px away from the ring and fling the avatars across the
     stage — the loudest possible symptom, which is the only good thing about it. */
  .rs-ac-hero__swing {
    transform-origin: calc(var(--cx) - var(--mx)) calc(var(--cy) - var(--my));
  }
  /* ---- 3. Issues — Figma 43109:10569, 375x1668 ----
     ⚠️ The cards KEEP their lift and their dot texture on mobile. The first build
     stripped both as a "legibility floor"; the 375 frame draws them. */
  .rs-ac-issues {
    padding: 40px 0;
  }
  .rs-ac-split {
    flex-direction: column;
    gap: 30px;
  }
  .rs-ac-issues__title {
    padding: 20px;
  }
  .rs-ac-issues__title h2 {
    font-size: 30px;
    line-height: 1.2;
  }
  /* The desktop arrow is a horizontal connector between two columns; stacked, it
     points at nothing. */
  .rs-ac-arrow {
    display: none;
  }
  /* The asymmetric padding is the room the 20/16 lift needs — right and bottom
     only, which is the direction it falls. */
  .rs-ac-cards,
  .rs-ac-benefits__cards,
  .rs-ac-roadmap__cards {
    gap: 40px;
    padding: 0 20px 20px 0;
  }
  .rs-ac-card,
  .rs-ac-flow__row {
    padding: 20px;
  }
  .rs-ac-card__label {
    font-size: 14px;
    line-height: 1.6;
  }
  .rs-ac-card__body {
    gap: 12px;
    font-size: 14px;
    line-height: 1.5;
  }
  .rs-ac-card__cta {
    width: 100%;
  }
  /* The note chain: 15/1.4 Montserrat, 20 padding, and a 40px connector between
     each pair — the frame keeps the rail on mobile, just vertical. */
  .rs-ac-flow__row {
    gap: 32px;
    font-size: 15px;
    line-height: 1.4;
  }
  /* ---- 4. Benefits — Figma 43109:10601, 375x976 ---- */
  .rs-ac-benefits {
    padding: 40px 0;
  }
  .rs-ac-benefits__title {
    gap: 20px;
    padding: 0 20px;
  }
  .rs-ac-benefits__title h2 {
    font-size: 30px;
    line-height: 1.2;
  }
  .rs-ac-benefits__sub {
    font-size: 14px;
    line-height: 1.5;
  }
  /* ---- 5. Graphics — Figma 43109:10616, 375x961 ----
     The two lobes stay overlapped, just vertically: the frame stacks them with a
     -96px gap and pins the mark on the seam. Each keeps two square corners and two
     pill corners, so the pair still reads as one shape. */
  .rs-ac-graphics {
    padding: 40px 0;
  }
  .rs-ac-graphics__lede {
    font-size: 14px;
    line-height: 1.5;
  }
  /* The overlap is a negative margin on the lower lobe, not a negative gap —
     flex `gap` clamps at 0 and silently does nothing. */
  .rs-ac-venn {
    position: relative;
    flex-direction: column;
    gap: 0;
    width: auto;
  }
  .rs-ac-venn__lobe--business,
  .rs-ac-venn__lobe--technical {
    width: auto;
    height: 416px;
    margin-left: 0;
  }
  .rs-ac-venn__lobe--business {
    align-items: flex-start;
    padding: 20px 20px 0;
    border-radius: 4px 4px 167.5px 167.5px;
  }
  .rs-ac-venn__lobe--technical {
    align-items: flex-end;
    margin-top: -96px;
    padding: 120px 20px 20px;
    border-radius: 167.5px 167.5px 4px 4px;
  }
  .rs-ac-venn__labels {
    width: auto;
  }
  .rs-ac-venn__lobe--technical .rs-ac-venn__labels li {
    flex-direction: row-reverse;
  }
  .rs-ac-venn__mark {
    display: block;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  /* ---- 6. CTA Toolkit — Figma 43109:10674, 375x815 ----
     The stage row becomes a stack, and the connectors turn with it: 24px of
     vertical rail between cards instead of a horizontal one. */
  .rs-ac-toolkit {
    padding: 40px 0;
  }
  .rs-ac-toolkit__text {
    gap: 32px;
  }
  .rs-ac-toolkit__sub {
    font-size: 14px;
    line-height: 1.5;
  }
  .rs-ac-stages {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  /*
   * `flex: 0 0 auto` is the load-bearing line. Desktop gives the item `flex: 1 1 0`
   * so four stages share a row equally; turned to a column that basis of 0 means a
   * height of 0, and the card collapsed to its 32px of padding with the text
   * measuring zero. Nothing looked broken in the CSS — it needed the box measured.
   */
  .rs-ac-stages__item {
    flex: 0 0 auto;
    gap: 12px;
    min-height: 0;
    padding: 16px;
    border-radius: 4px;
  }
  .rs-ac-stages__title,
  .rs-ac-stages__body {
    min-height: 0;
    font-size: 12px;
    line-height: 1.4;
  }
  /*
   * `:not(:last-child)` is required, not decorative. The desktop connector is
   * `.rs-ac-stages__item:not(:last-child)::after` — a 24x2 HORIZONTAL line. A bare
   * `.rs-ac-stages__item::after` here is one pseudo-class LESS specific, so desktop
   * kept winning and the rail stayed horizontal between vertically stacked cards.
   * Matching the selector exactly lets source order decide, which is what we want.
   */
  .rs-ac-stages__item:not(:last-child)::after {
    left: 50%;
    top: 100%;
    width: 2px;
    height: 24px;
    transform: translateX(-50%);
  }
  .rs-ac-toolkit__cta {
    width: 100%;
  }
  /* ---- 7. CTA Teammates — Figma 43109:10699, 375x737 ---- */
  .rs-ac-teammates {
    padding: 40px 0;
  }
  .rs-ac-teammates__panel {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    width: auto;
    padding: 20px;
  }
  .rs-ac-teammates__left {
    flex: 1 1 auto;
    gap: 24px;
  }
  .rs-ac-teammates__text {
    gap: 24px;
  }
  .rs-ac-teammates__sub {
    font-size: 14px;
    line-height: 1.5;
  }
  .rs-ac-teammates__link {
    font-size: 14px;
    line-height: 1.6;
  }
  .rs-ac-teammates__art {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
  }
  /* ---- 8. Roadmap — Figma 43109:36728, 375x1164 ---- */
  .rs-ac-roadmap {
    padding: 40px 0;
  }
  .rs-ac-roadmap__title {
    gap: 20px;
    padding: 0 20px;
  }
  /*
   * The 375 frame flattens the title: its children are the heading, the subtitle
   * and `actions` on one 20px rhythm, with no `text` wrapper between them
   * (72 + 20 + 42 + 20 + 81 = 235, the title box exactly). Desktop keeps 40 in
   * both places, so the wrapper has to be told separately.
   */
  .rs-ac-roadmap__text {
    gap: 20px;
  }
  /* 16px/1.5 on desktop; the 375 frame's subtitle is 14/1.5 (42 tall = two lines
     of 21, and 72 + 20 + 42 + 20 + 81 is the 235 title exactly). */
  .rs-ac-roadmap__sub {
    font-size: 14px;
  }
  .rs-ac-roadmap__actions {
    gap: 16px;
  }
  /* `atom/btns` is `sizing: w fill` at 375 — 295 wide, the whole column. */
  .rs-ac-roadmap__cta {
    width: 100%;
  }
  /*
   * ⚠️ The frame's `atom/btns` here measures 48 tall (a 14px glyph in an 18-tall
   * icon box, 15 + 18 + 15). The atom ships 44, and it stays 44: config/_btn-atom
   * records Raman's 2026-08-17 ruling that the mobile cut is 44 at 14px/1 and that
   * the frames — which already disagree with each other — are what is expected to
   * move. This instance is one of those frames. The 4px is the known deviation;
   * do not chase it from a fresh extraction without re-confirming with him.
   */
  /* `free-space` text is 700 12/1.4 at 375, not the desktop 14/1.5 — which is also
     what keeps the scarcity line on ONE line inside 295. */
  .rs-ac-roadmap__note {
    font-size: 12px;
    line-height: 1.4;
  }
  /*
   * The card's label -> body gap tightens to 24 at 375 (the frame's `content`
   * is `$l8`, gap 24; 24 + 24 + 21 = the 69 its shortest card measures). 32 is a
   * desktop number and stays right there — 24 + 32 + 24 = the 80 the desktop
   * card's content box measures inside its 160.
   *
   * No longer scoped to the roadmap. Every other mobile frame that uses this card
   * has since been read — `issues` 43109:10569, `benefits` 43109:10601, `pricing`
   * 43115:37084 — and all three draw the card at `gap: 24, pad: 20` with the
   * `content` frame inside it at `gap: 24`. That is the roadmap's number exactly,
   * which is the expected answer: they are instances of one component, and the
   * component is 24 at 375. So the rule is unscoped and the page stops carrying a
   * 32/24 split the design does not have.
   *
   * This also made the `.rs-ac-pricing .rs-ac-card__content` override further
   * down redundant — it said 24 too — so it went with it.
   */
  .rs-ac-card__content {
    gap: 24px;
  }
  /* ---- 9a. Pricing — Figma 43115:37084, 375x1848 ---- */
  .rs-ac-pricing {
    padding: 40px 0;
  }
  .rs-ac-pricing__inner {
    --bs-gutter-x: 2.5rem;
    gap: 60px;
  }
  /* The frame's `1` is a 40px column, not the 30 every other split uses here. */
  .rs-ac-pricing .rs-ac-split {
    gap: 40px;
  }
  .rs-ac-pricing__title,
  .rs-ac-pricing__text {
    gap: 20px;
  }
  .rs-ac-pricing__title {
    padding: 0 20px;
  }
  .rs-ac-pricing__title h2 {
    font-size: 30px;
    line-height: 1.2;
  }
  .rs-ac-pricing__sub {
    font-size: 14px;
  }
  .rs-ac-pricing__info {
    gap: 40px;
  }
  .rs-ac-pricing__info-title {
    font-size: 24px;
  }
  /* One column at 375, so the fixed 362 basis has to go with it. */
  .rs-ac-pricing__factors {
    flex-direction: column;
    gap: 24px;
  }
  .rs-ac-pricing__factor {
    flex: 0 0 auto;
    width: 100%;
  }
  /* Both lines drop to 12/1.4 at 375 — the frame's numbers, and what makes its
     shortest factor card 78 tall (16 + 17 + 12 + 17 + 16). */
  .rs-ac-pricing__factor-n,
  .rs-ac-pricing__factor-body {
    font-size: 12px;
    line-height: 1.4;
  }
  .rs-ac-pricing__cta {
    width: 100%;
  }
  .rs-ac-roadmap__title h2 {
    font-size: 30px;
    line-height: 1.2;
  }
  /* ---- shared mobile type ---- */
  .rs-ac-toolkit__title,
  .rs-ac-teammates__title {
    font-size: 30px;
    line-height: 1.2;
  }
  /* 40 is the mobile band's gap everywhere in the 375 frame; several of these carry
     60 or 80 from desktop. */
  .rs-ac-graphics__inner,
  .rs-ac-toolkit__inner,
  .rs-ac-teammates__inner,
  .rs-ac-roadmap__inner {
    --bs-gutter-x: 2.5rem;
    gap: 40px;
  }
  .rs-ac-logos__claim {
    font-size: 20px;
  }
}