/* ===========================================================================
   /contact — Figma 3225:23657 (1512 x 6470), file 2N553Cls5WgWmoHrH1EVVv.
   Needs atlas-tokens.css. Bands 3 and 4b reuse the existing stories, payouts
   and final bands and bring their own stylesheets.

   Every number here is read from the node JSON. Where the file and the render
   disagree the render wins and the line says so.
   ========================================================================= */

/* Own this rather than relying on atlas-promo.css, whose copy is scoped to the
   promo popup - the email label rendered visibly on the page without it. */
.ctx-cta .afx-vh {
  position: absolute !important; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}

.ctx-hero, .ctx-channels, .ctx-cta {
  position: relative; overflow-x: clip; overflow-y: visible; isolation: isolate;
}

/* shared ----------------------------------------------------------------- */
.ctx-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; height: 56px; padding: 18px 32px; box-sizing: border-box;
  border-radius: 100px; text-decoration: none; white-space: nowrap;
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 16px; line-height: 19px; letter-spacing: -.48px;
  transition: transform var(--t-instant) var(--e-out), box-shadow var(--t-fast) var(--e-out),
              background-color var(--t-fast) var(--e-out);
}
/* ink is set explicitly: a lime label on a lime pill is invisible, and this
   button inherits a white link colour from the dark hero */
.ctx-btn--lime  { background: #E1FFA0; color: #001D21; box-shadow: 2px 14px 24px rgba(38,63,66,.12); }
.ctx-btn--ghost { background: rgba(255,255,255,.10); color: #FFFFFF; font-weight: var(--w-medium);
                  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
/* 3227:222066 — the email pill is glass, not lime, and its ink is #053F3B */
.ctx-btn--glass {
  background: linear-gradient(180deg, rgba(5,63,59,.12) 0%, rgba(5,63,59,.04) 100%);
  color: #053F3B; font-weight: var(--w-medium);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(27.8px); backdrop-filter: blur(27.8px);
}
.ctx-btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .ctx-btn--lime:hover  { box-shadow: 2px 18px 30px rgba(38,63,66,.18); }
  .ctx-btn--ghost:hover { background: rgba(255,255,255,.16); }
  .ctx-btn--glass:hover { background: linear-gradient(180deg, rgba(5,63,59,.18) 0%, rgba(5,63,59,.08) 100%); }
}
.ctx-chev {
  width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: url("/assets/figma/steps-chevron.svg") center / contain no-repeat;
          mask: url("/assets/figma/steps-chevron.svg") center / contain no-repeat;
  transition: transform var(--t-fast) var(--e-out);
}
@media (hover: hover) and (pointer: fine) { .ctx-btn:hover .ctx-chev { transform: translateX(3px); } }

/* 3227:187564 / 3226:187514 — the faded first line of each 80px heading */
.ctx-fade {
  background: linear-gradient(90deg, #3F4547 0%, #CECECE 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  /* ink guard: background-clip:text gives descenders no paint and slices them
     flat, so push the paint box down and take the space back */
  padding-bottom: .18em; margin-bottom: -.18em;
}
.ctx-fade--dark { background: linear-gradient(90deg, #3F4547 0%, #EDEDED 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* --- BAND 1, hero — 3225:23664 ------------------------------------------ */
/* The navbar is a flow child of this section (spliced at the MPX-NAV marker),
   so the hero's own top padding cannot be the 189px gap to the eyebrow - that
   pushed the nav 375px down the page. Padding places the NAV (Figma has it at
   y66, 10px below the bar) and the grid carries the rest of the offset. */
.ctx-hero { min-height: 870px; padding: 10px 10px 20px; background: #062B29; }
.ctx-hero__bg {
  position: absolute; inset: 0; z-index: -3;
  background: url("/assets/contact/hero.webp") center / cover no-repeat;
}
/* 3225:157072 — a 1693x956 #051F1D ellipse under a blur(516), centred near
   x70 y651 of the 1512 stage. It is not decoration: it is the only reason
   white text is legible over this photograph. Sampled down the reference's
   left edge the plate runs (128,156,155) at the top to (11,49,47) behind the
   buttons; without it we measured (241,243,244) and the headline vanished. */
.ctx-hero__glow {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(80% 74% at 4% 70%, rgba(5,31,29,.90) 0%, rgba(5,31,29,.74) 24%, rgba(5,31,29,.44) 46%, rgba(5,31,29,.16) 68%, rgba(5,31,29,0) 86%);
}/* 3225:157073 — a teal vignette top and bottom, kept in CSS rather than baked
   into the bitmap so it stays a clean gradient at every width */
.ctx-hero__veil {
  position: absolute; inset: 0; z-index: -1;
  /* 3225:157073's own vertical vignette, PLUS a left-edge wash. The file gets
     the left darkness from the blurred ellipse alone; a radial gradient cannot
     hold the flat plateau the reference shows between y120 and y220, so the
     plateau is carried here and the falloff by the glow. Tuned by sampling
     both renders at x15/300/600 down eight rows - mean channel error 40 with
     this pair, against 54 for the glow alone. */
  background: linear-gradient(100deg, rgba(5,31,29,.34) 0%, rgba(5,31,29,.12) 26%, rgba(5,31,29,0) 48%),
              linear-gradient(180deg, rgba(5,63,59,.62) 0%, rgba(194,213,213,0) 21%,
                              rgba(194,213,213,0) 83%, rgba(5,63,59,.40) 100%);
}
/* Figma puts the navbar at x10 w1492 and the copy at x40, so the hero pads
   10 for the nav and the grid carries the remaining 30. */
.ctx-hero__grid { position: relative; max-width: 1432px; margin: 120px auto 0; padding: 0 30px; box-sizing: border-box; }
/* Figma's copy column is 720 wide because SF Pro fits "The Atlas Team" into it
   at 110px. SF Pro cannot be served as a webfont, so off Apple platforms this
   falls back to a wider face and the same string measures 766px — it wrapped
   to four lines. The column is widened rather than the type shrunk, and each
   line is nowrap so it can only ever break where the design breaks it. */
.ctx-hero__copy { position: relative; z-index: 1; display: flex; flex-direction: column;
                  align-items: flex-start; gap: 32px; max-width: 800px; }
.ctx-hero__eyebrow {
  margin: 0; font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; color: #FFFFFF;
  /* The eyebrow sits at y189, the lightest part of the plate: white measures
     3.0:1 there, and the Figma has exactly the same problem. Rather than
     darken the plate and walk away from the reference, lift this one label
     with a shadow - the look is unchanged and 14px text stops failing AA. */
  text-shadow: 0 1px 14px rgba(5,31,29,.75), 0 0 3px rgba(5,31,29,.55);
}
.ctx-hero__h1 span { display: block; white-space: nowrap; }
.ctx-hero__h1 {
  margin: 0; font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 110px; line-height: 99px; letter-spacing: -3.3px;
  background: linear-gradient(180deg, #F8F8F8 0%, #FFFFFF 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  padding-bottom: .06em; margin-bottom: -.06em;
}
/* the lede is white at NODE opacity .8 in Figma, not a dimmer fill */
.ctx-hero__lede {
  margin: 0; max-width: 560px;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 18px; line-height: 27px; letter-spacing: -.36px; color: rgba(255,255,255,.8);
}
.ctx-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* the chip cluster, 3225:156759. The Figma masks it with a horizontal
   gradient (transparent 8% -> opaque 40-60% -> transparent 92%) so the outer
   chips fall away; that fade is the whole effect, so it is reproduced rather
   than approximated with per-chip opacity. */
/* absolute at the file's coordinates: x 620 y 417 on the 1512 stage, i.e.
   580 / 172 from this container's top-left (stage padding is 40, copy starts
   at y 245). It overlaps the copy on purpose; the mask handles the collision. */
/* Anchored to the RIGHT edge, not the left. In the file the cluster sits at
   x620..1486 on a 1512 stage - +14px past the 1432 container's right edge -
   and its left side is masked to nothing anyway. Pinning the left edge instead
   pushed it off the viewport between 1281 and 1511, where it was silently
   clipped; pinning the right keeps the visible chips whole at every width the
   cluster is shown at. */
.ctx-hero__cluster { position: absolute; right: -14px; top: 172px; width: 866px; }
/* -14px is the file's own overhang at the 1512 design width. Below it the grid
   box narrows faster than the cluster does, so the overhang starts clipping;
   pull it back to the grid edge instead. */
@media (max-width: 1511px) { .ctx-hero__cluster { right: 0; } }
.ctx-chips {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  width: 866px;
  -webkit-mask-image: linear-gradient(90deg, transparent 8%, #000 40%, #000 60%, transparent 92%);
          mask-image: linear-gradient(90deg, transparent 8%, #000 40%, #000 60%, transparent 92%);
}
.ctx-chiprow { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ctx-chip {
  display: flex; align-items: center; gap: 12px;
  width: 212px; height: 73px; padding: 12px; box-sizing: border-box;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.42) 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
.ctx-chiprow:last-child .ctx-chip { width: 220px; }
.ctx-chip__ic {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none; border-radius: 999px;
  background: rgba(255,255,255,.55); color: #053F3B;
  box-shadow: inset 0 0 0 1px rgba(5,63,59,.10);
}
.ctx-chip__svg { width: 16px; height: 16px; display: block; }
.ctx-chip__tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ctx-chip__tx b {
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 16px; line-height: 21px; letter-spacing: -.48px; color: #0D0D0D;
}
.ctx-chip__tx i {
  font-style: normal; font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 12px; line-height: 12px; color: rgba(13,13,13,.6);
}

/* 3225:156725 — three equal columns, each a 1px rule with the pair under it */
.ctx-hero__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
  max-width: 1432px; margin: 120px auto 0; padding: 0 60px; box-sizing: border-box;
}
.ctx-stat { display: flex; flex-direction: column; gap: 4px; padding-top: 16px;
            border-top: 1px solid rgba(255,255,255,.25); }
.ctx-stat__l { font-family: var(--font-display); font-weight: var(--w-regular);
               font-size: 14px; line-height: 21px; color: rgba(255,255,255,.8); }
.ctx-stat__v { font-family: var(--font-display); font-weight: var(--w-semi);
               font-size: 32px; line-height: 48px; color: #FFFFFF; }

/* --- BAND 2, support channels — 3225:44127 ------------------------------ */
.ctx-channels {
  padding: 120px 40px;
  background: linear-gradient(180deg, #FFFFFF 53%, #EBEDF2 93%);
}
.ctx-channels__head { display: flex; flex-direction: column; align-items: center; gap: 16px;
                      text-align: center; margin-bottom: 40px; }
.ctx-pill {
  display: inline-flex; align-items: center; gap: 7px; margin: 0;
  padding: 6px 14px; border-radius: 57px; background: rgba(13,13,13,.05);
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; letter-spacing: -.42px; color: #0D0D0D;
}
.ctx-pill__svg { width: 16px; height: 16px; flex: none; display: block; color: #0D0D0D; }
.ctx-channels__h2 {
  margin: 0; font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 80px; line-height: 80px; letter-spacing: -2.4px; color: #0D0D0D;
}
.ctx-channels__h2 span { display: block; }
.ctx-channels__lede {
  margin: 0; font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 16px; line-height: 21px; letter-spacing: -.48px; color: rgba(13,13,13,.8);
}
.ctx-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  max-width: 1432px; margin: 0 auto; padding: 0; list-style: none;
}
.ctx-card {
  display: flex; flex-direction: column; gap: 64px;
  min-height: 360px; padding: 24px; box-sizing: border-box; border-radius: 32px;
  background: linear-gradient(180deg, rgba(142,188,185,.322) 0%, #FFFFFF 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.55);
}
.ctx-card__well {
  display: flex; align-items: center; justify-content: center;
  width: 80px; height: 80px; flex: none; border-radius: 999px;
  background: linear-gradient(180deg, rgba(5,63,59,.20) 32%, rgba(5,63,59,.06) 100%),
              rgba(255,255,255,.10);
  color: #053F3B;
}
.ctx-card__svg { width: 32px; height: 32px; display: block; }
.ctx-card__body { display: flex; flex-direction: column; gap: 24px; margin-top: auto; }
.ctx-card__t { margin: 0; font-family: var(--font-display); font-weight: var(--w-semi);
               font-size: 24px; line-height: 32px; letter-spacing: -.72px; color: #0D0D0D; }
.ctx-card__d { margin: 0; font-family: var(--font-display); font-weight: var(--w-medium);
               font-size: 20px; line-height: 26px; letter-spacing: -.6px; color: #3F4547; }
.ctx-card .ctx-btn { align-self: flex-start; height: 48px; padding: 14px 32px; }

/* --- BAND 4, closing CTA — 3226:167108 + 3225:82864 --------------------- */
.ctx-cta { padding: 0 40px 120px; background: #0D0D0D; text-align: center; }
/* 3226:167108 is a 1512x839 frame and the face grid lives in its top 473px
   (the art group is 752x429 at y44). Drawing it at full width and cropping to
   473 shows exactly that; `contain` inside the same box instead scaled the
   whole 839 into 473 and left the art marooned in the middle. */
.ctx-cta__art {
  position: relative; z-index: -1;
  width: min(1512px, 100%); height: 473px; margin: 0 auto -40px;
  background: url("/assets/contact/community.webp") center top / 100% auto no-repeat;
}
.ctx-cta__inner { display: flex; flex-direction: column; align-items: center; gap: 32px;
                  max-width: 1432px; margin: 0 auto; }
.ctx-cta__h2 { margin: 0; font-family: var(--font-display); font-weight: var(--w-medium);
               font-size: 80px; line-height: 80px; letter-spacing: -2.4px; color: #FFFFFF; }
.ctx-cta__h2 span { display: block; }
/* Figma has this lede at w700, heavier than the other bands' ledes */
.ctx-cta__lede { margin: 0; max-width: 620px;
                 font-family: var(--font-display); font-weight: var(--w-bold);
                 font-size: 16px; line-height: 21px; letter-spacing: -.32px; color: #FFFFFF; }
.ctx-cta__form { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ctx-cta__input {
  width: 370px; max-width: 100%; height: 56px; padding: 18px 32px; box-sizing: border-box;
  border: 0; border-radius: 100px; background: rgba(255,255,255,.04); color: #FFFFFF;
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 16px; line-height: 20px; letter-spacing: -.48px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
.ctx-cta__input::placeholder { color: rgba(255,255,255,.72); }
.ctx-cta__input:focus-visible { outline: 2px solid #E1FFA0; outline-offset: 2px; }

/* --- responsive --------------------------------------------------------- */
@media (max-width: 1280px) {
  .ctx-hero__h1 { font-size: 88px; line-height: 84px; letter-spacing: -2.6px; }
  .ctx-hero__grid { grid-template-columns: 1fr; }
  /* the cluster is decorative; below the design width it stops earning its
     space next to the copy, so it goes rather than squeezing the headline */
  .ctx-hero__cluster { display: none; }
  .ctx-channels__h2, .ctx-cta__h2 { font-size: 60px; line-height: 62px; letter-spacing: -1.8px; }
}
@media (max-width: 900px) {
  .ctx-hero { padding: 10px 12px 20px; min-height: 0; }
  .ctx-hero__grid { margin-top: 90px; padding: 0 12px; }
  .ctx-hero__h1 { font-size: 60px; line-height: 60px; letter-spacing: -1.8px; }
  .ctx-hero__stats { margin-top: 72px; padding: 0 12px; gap: 24px; }
  .ctx-stat__v { font-size: 26px; line-height: 34px; }
  .ctx-channels, .ctx-cta { padding-left: 24px; padding-right: 24px; }
  .ctx-channels { padding-top: 80px; padding-bottom: 80px; }
  .ctx-cards { grid-template-columns: 1fr; }
  .ctx-card { min-height: 0; gap: 32px; }
  .ctx-channels__h2, .ctx-cta__h2 { font-size: 44px; line-height: 46px; letter-spacing: -1.32px; }
  .ctx-cta__art { height: 260px; margin-bottom: -30px; }
}
@media (max-width: 560px) {
  .ctx-hero__h1 { font-size: 44px; line-height: 46px; letter-spacing: -1.32px; }
  .ctx-hero__stats { grid-template-columns: 1fr; gap: 16px; }
  .ctx-channels__h2, .ctx-cta__h2 { font-size: 34px; line-height: 38px; letter-spacing: -1px; }
  .ctx-cta__form { flex-direction: column; align-items: stretch; width: 100%; }
  .ctx-cta__input { width: 100%; }
  .ctx-btn { width: 100%; }
  .ctx-hero__actions { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ctx-btn, .ctx-chev { transition: none; }
}

/* --- BAND 3, the trader wall — 3225:157076 ------------------------------ */
.ctw { position: relative; overflow: hidden; isolation: isolate;
       padding: 120px 40px; background: #0F0F0F; text-align: center; }
.ctw__glow {
  position: absolute; inset: 0 0 auto; height: 1027px; z-index: -1; pointer-events: none;
  background: radial-gradient(52% 44% at 50% 18%, rgba(57,107,106,.30) 0%, rgba(57,107,106,0) 72%);
}
.ctw__head { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 40px; }
.ctx-pill--dark { background: rgba(255,255,255,.08); color: #FFFFFF; }
.ctw__eye { width: 16px; height: 16px; flex: none;
            background: url("/assets/contact/ic-support24.svg") center / contain no-repeat; color: #FFFFFF; }
.ctw__h2 { margin: 0; font-family: var(--font-display); font-weight: var(--w-medium);
           font-size: 80px; line-height: 80px; letter-spacing: -2.4px; color: #FFFFFF; }

/* The file's Content frame is 1432x928 with clipsContent:true while the columns
   inside are 1400 tall and start at -107 / +53. The clip is the whole effect -
   it is a window onto a larger wall, not a grid that happens to end. */
.ctw__stage { position: relative; max-width: 1432px; margin: 0 auto; height: 928px; overflow: hidden; }
.ctw__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14.67px; align-items: start; }
.ctw__col { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
/* odd columns pulled up 107, even ones pushed down 53 */
.ctw__col:nth-child(odd)  { margin-top: -107px; }
.ctw__col:nth-child(even) { margin-top: 53px; }
/* 3261:67650 — a 280px #0F0F0F ramp over the bottom edge */
.ctw__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 280px; pointer-events: none;
             background: linear-gradient(180deg, rgba(15,15,15,0) 0%, #0F0F0F 100%); }
.ctw__cta { margin-top: 40px; }

.ctw-card {
  position: relative; z-index: 0;
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  min-height: 456px; padding: 24px; box-sizing: border-box; border-radius: 32px;
  background: linear-gradient(180deg, #1F1F1F 0%, #151515 100%);
  text-align: left;
}
/* 2px inside gradient hairline; border-color cannot take a gradient */
.ctw-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.22) 0%, rgba(202,202,202,0) 51%, rgba(153,153,153,.22) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.ctw-card__head { display: flex; align-items: center; gap: 16px; }
.ctw-card__av { width: 70px; height: 70px; flex: none; border-radius: 50%; object-fit: cover; }
.ctw-card__who { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ctw-card__name {
  display: flex; align-items: center; gap: 4px; margin: 0;
  font-family: var(--font-display); font-weight: var(--w-bold);
  font-size: 20px; line-height: 30px; letter-spacing: -.6px; color: #FFFFFF;
}
.ctw-card__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.ctw-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 8px; border-radius: 57px;
  background: linear-gradient(90deg, #7CB1AC 0%, rgba(124,177,172,.8) 60%, #FFFFFF 100%);
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 16px; line-height: 24px; letter-spacing: -.48px; color: #FFFFFF;
}
.ctw-chip img { width: 16px; height: 16px; border-radius: 100px; flex: none; }
/* white at NODE opacity .8 in the file */
.ctw-card__q {
  margin: 0; font-family: var(--font-display); font-weight: var(--w-regular);
  font-size: 20px; line-height: 26px; letter-spacing: -.6px; color: rgba(255,255,255,.8);
}
.ctw-card__amt {
  margin: 0; font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 32px; line-height: 38px; letter-spacing: -.96px; color: #FFFFFF;
}

/* 3261:67379 / 3261:67515 - the Trustpilot card. Every child is placed at its
   own offset from the card's top-left, because the file positions them
   absolutely and they overlap: the face mosaic runs from y162 to past the
   bottom edge and the CTA sits ON TOP of it at y219. A flex column cannot
   express that. Offsets straight off the nodes:
     Trustpilot block  x+62  y+64   224x119
     face mosaic       x-105 y+162  529x312   (overflows both sides, clipped)
     CTA               x+78  y+219  191x48 */
.ctw-card--promo {
  display: block; padding: 0; overflow: hidden;
  background: linear-gradient(180deg, #396B6A 0%, rgba(34,55,54,.20) 100%);
}
.ctw-card--promo::before { display: none; }
.ctw-promo__faces {
  position: absolute; left: -105px; top: 162px;
  width: 529px; height: 312px; max-width: none; z-index: 0; opacity: .85;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
}
.ctw-promo__mark {
  position: absolute; left: 62px; top: 64px; width: 224px; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
}
.ctw-promo__tp { width: 224px; height: auto; display: block; }
/* 3261:67436 is logo + 32 + [stars + 9 + rating] = 119 tall. Flattening those
   three into one 32-gap column made the block 142 and pushed the mark off the
   position the file gives it. */
.ctw-promo__rate { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.ctw-promo__stars { display: flex; gap: 0; }
.ctw-promo__stars img { width: 28px; height: 28px; }
.ctw-promo__rating { font-family: var(--font-display); font-weight: var(--w-medium);
                     font-size: 14px; line-height: 21px; color: #FFFFFF; }
.ctw-promo__cta {
  position: absolute; left: 78px; top: 219px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 191px; height: 48px; box-sizing: border-box; padding: 14px 24px;
  border-radius: 28px; background: #E1FFA0; color: #001D21; text-decoration: none;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 16px; line-height: 19px; letter-spacing: -.48px; white-space: nowrap;
  box-shadow: inset 0 0 0 1.5px rgba(5,63,59,.55);
}
@media (hover: hover) and (pointer: fine) {
  .ctw-promo__cta:hover .ctx-chev { transform: translateX(3px); }
}

@media (max-width: 1280px) {
  .ctw__h2 { font-size: 60px; line-height: 62px; letter-spacing: -1.8px; }
  .ctw__stage { height: 820px; }
  .ctw__cols { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  /* the fourth column would be cut in half at this width, so it goes rather
     than showing a sliver */
  .ctw__col:nth-child(4) { display: none; }
}
@media (max-width: 900px) {
  .ctw { padding: 80px 24px; }
  .ctw__h2 { font-size: 44px; line-height: 46px; letter-spacing: -1.32px; }
  .ctw__stage { height: 700px; }
  .ctw__cols { grid-template-columns: repeat(2, 1fr); }
  .ctw__col:nth-child(3) { display: none; }
  .ctw-card { min-height: 400px; }
}
@media (max-width: 560px) {
  .ctw__h2 { font-size: 34px; line-height: 38px; letter-spacing: -1px; }
  .ctw__stage { height: 560px; }
  .ctw__cols { grid-template-columns: 1fr; }
  .ctw__col:nth-child(2) { display: none; }
  .ctw__col:nth-child(odd), .ctw__col:nth-child(even) { margin-top: 0; }
  .ctw-card__q { font-size: 18px; line-height: 24px; }
}