/* universities.css -- palette: "Quadrangle". Colours here were shifted
   off school.html's navy / cyan / lime so the two pages do not read as
   the same page: aubergine ink, brass and copper accents, aqua
   highlights. See universities-palette.css for the band map and the
   shared-sheet overrides. Hue only -- every colour kept its original
   relative luminance, so contrast ratios are unchanged. */

/* ============================================================
   universities.css — University page only
   ------------------------------------------------------------
   Solution/universities.html shares the generated School bundle
   (../dist/school/*) with cricos, corporate-training and
   tutoring-courses, so every School component it reuses is
   already covered and nothing here overrides it.

   Four sections on this page are ported from rto.html, which
   loads a different bundle. This file carries ONLY the component
   rules those four sections need, extracted from
   src/rto/css/blocks/* in the RTO bundle's own order by
   build-time script. Declaration values are the RTO values,
   byte for byte; the only edit is the section id, renamed so the
   markup does not claim to be the RTO page:

     #rto-utilities         -> #university-academic-structure
     #rto-portfolio-view    -> #university-command-centre
     #rto-usi-verification  -> #university-timetabling
     #rto-avetmiss-reporting-> #university-admissions

   Loading the whole RTO bundle beside the School one was not an
   option: the two share class names (.hiw-chat, .hiw-table,
   .stat-card, .numbers-*) with different values, and the RTO
   reset would fight the School page shell. Extracting the four
   components keeps both bundles intact.

   Kept OUT of the shared School bundle deliberately: that bundle
   is budgeted (BUDGET in build/check-school.mjs) and four pages
   load it; none of the others carries this markup.

   Regenerate rather than hand-edit. No inline <style> and no new
   design decisions live here.
   ============================================================ */

/* ---------- src/rto/css/blocks/09-rto-arrow-numbers-embed.css ---------- */
#university-academic-structure {
  font-family: 'AnekBangla', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #eeece0;
  color: #1a1a1a;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#university-academic-structure *, #university-academic-structure *::before, #university-academic-structure *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#university-academic-structure .numbers-section {
  background: #eeece0;
  padding: 40px 0;
  position: relative;
  overflow: visible;
}
#university-academic-structure .numbers-container {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 0 0 clamp(40px, 5vw, 120px);
  display: flex;
  gap: clamp(28px, 3vw, 52px);
  align-items: flex-start;
}
#university-academic-structure .numbers-left {
  flex: 0 1 auto;
  width: min(760px, 62vw);
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  overflow: visible;
}
#university-academic-structure .numbers-pill {
  display: inline-block;
  background: #ffb543;
  color: #1a1a1a;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 6px;
  border: 2px solid #1a1a1a;
  margin-bottom: 8px;
}
#university-academic-structure .numbers-title {
  font-family: 'welfare', 'Inter', system-ui, sans-serif;
  font-size: clamp(2rem, 5vw, 3.1rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #1a1a1a;
  margin-bottom: 24px;
  max-width: 100%;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#university-academic-structure .numbers-title__line {
  display: block;
  max-width: 100%;
  line-height: 0.88;
}
#university-academic-structure .numbers-title > .numbers-title__line + .numbers-title__line {
  margin-top: -0.055em;
}
#university-academic-structure .numbers-title > .numbers-title__line:first-child {
  white-space: normal;
  overflow-wrap: break-word;
}
#university-academic-structure .numbers-title > .numbers-title__line:last-child {
  white-space: nowrap;
}
#university-academic-structure .numbers-title .grad-text {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  vertical-align: baseline;
}
#university-academic-structure .numbers-desc {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: #4a4a4a;
  max-width: 100%;
}
#university-academic-structure .numbers-desc--lead {
  font-size: clamp(17px, 1.2vw, 18px);
  font-weight: 700;
  font-style: italic;
  color: #504717;
  line-height: 1.62;
  /* The section's own reset, #rto-utilities *, zeroes every margin at ID
  specificity, so the 16px .rto-il-gap the supporting paragraphs carry
  never lands and the lead ran flush into the copy below it. Setting the
  gap here keeps it above that reset without touching the reset itself. */
  margin-bottom: clamp(18px, 1.6vw, 24px);
}
#university-academic-structure .numbers-right {
  flex: 0 0 auto;
  width: min(100%, clamp(640px, 54vw, 1200px));
  margin-left: auto;
  position: relative;
  height: 560px;
}
#university-academic-structure .stat-card {
  position: absolute;
  left: 0;
  right: 0;
}
#university-academic-structure .stat-card:nth-child(1) {
  top: 0;
  z-index: 1;
}
#university-academic-structure .stat-card:nth-child(2) {
  top: 20px;
  z-index: 2;
}
#university-academic-structure .stat-card:nth-child(3) {
  top: 40px;
  z-index: 3;
}
#university-academic-structure .stat-card:nth-child(4) {
  top: 60px;
  z-index: 4;
}
#university-academic-structure .stat-card__inner {
  border-radius: 0;
  position: relative;
  padding: 22px clamp(28px, 3.5vw, 64px) 68px 40px;
  /* 500px was sized around the checklist being pinned to the card's base. The
  list now follows its paragraph, so the floor only has to clear the corner
  artwork (~220px tall at bottom: 18px) plus the heading block. */
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  will-change: transform;
}
#university-academic-structure .stat-card__art {
  position: absolute;
  right: clamp(18px, 2.4vw, 40px);
  bottom: 18px;
  width: clamp(160px, 16vw, 220px);
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
#university-academic-structure .stat-card:nth-child(n + 2) .stat-card__inner {
  visibility: hidden;
  opacity: 1;
}
#university-academic-structure .stat-card--black .stat-card__inner {
  background: #431134;
  box-shadow: 0 4px 30px rgba(67, 17, 52, 0.3);
}
#university-academic-structure .stat-card--yellow .stat-card__inner {
  background: #ff6780;
  box-shadow: 0 4px 30px rgba(255, 103, 128, 0.3);
}
#university-academic-structure .stat-card--green .stat-card__inner {
  background: #e6c010;
  box-shadow: 0 4px 30px rgba(230, 192, 16, 0.3);
}
#university-academic-structure .stat-card--pink .stat-card__inner {
  background: #77f2e8;
  box-shadow: 0 4px 30px rgba(119, 242, 232, 0.3);
}
#university-academic-structure .stat-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 16px;
  right: clamp(18px, 2.4vw, 40px);
  margin-bottom: 0;
  flex-shrink: 0;
}
#university-academic-structure .stat-card--black .stat-card__icon {
  background: rgba(255, 255, 255, 0.15);
}
#university-academic-structure .stat-card--yellow .stat-card__icon, #university-academic-structure .stat-card--green .stat-card__icon, #university-academic-structure .stat-card--pink .stat-card__icon {
  background: rgba(0, 0, 0, 0.08);
}
#university-academic-structure .stat-card__icon svg {
  width: 26px;
  height: 26px;
}
#university-academic-structure .stat-card__heading {
  font-family: 'AnekBangla', 'AnekBangla', 'Inter', system-ui, sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
  margin: 0 0 20px 0;
  max-width: min(560px, calc(100% - 96px));
}
#university-academic-structure .stat-card--black .stat-card__heading {
  color: #ffffff;
}
#university-academic-structure .stat-card--yellow .stat-card__heading, #university-academic-structure .stat-card--green .stat-card__heading, #university-academic-structure .stat-card--pink .stat-card__heading {
  color: #1a1a1a;
}
#university-academic-structure .stat-card__desc {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  max-width: 320px;
  margin-top: auto;
}
#university-academic-structure .stat-card--black .stat-card__desc {
  color: rgba(255, 255, 255, 0.85);
}
#university-academic-structure .stat-card--yellow .stat-card__desc, #university-academic-structure .stat-card--green .stat-card__desc, #university-academic-structure .stat-card--pink .stat-card__desc {
  color: #1a1a1a;
}
#university-academic-structure .stat-card__body--ops {
  --stat-bullets-accent: #aeffe9;
  --stat-bullets-line: #0a0a0a;
  --stat-bullets-border: #000000;
  --stat-bullets-fg: #260e26;
  --stat-slogan-color: #260e26;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  padding: 0;
  max-width: min(560px, calc(100% - 8px));
  align-self: flex-start;
}
#university-academic-structure .stat-card--black .stat-card__body--ops {
  --stat-bullets-accent: #aeffe9;
  --stat-bullets-line: rgba(255, 255, 255, 0.38);
  --stat-bullets-border: #ffffff;
  --stat-bullets-fg: rgba(255, 255, 255, 0.92);
  --stat-slogan-color: #aeffe9;
}
#university-academic-structure .stat-card--yellow .stat-card__body--ops {
  --stat-bullets-accent: #fdceaa;
  --stat-slogan-color: #570e38;
}
#university-academic-structure .stat-card--green .stat-card__body--ops {
  --stat-bullets-accent: #aeffe9;
  --stat-slogan-color: #4a3f03;
}
#university-academic-structure .stat-card--pink .stat-card__body--ops {
  --stat-bullets-accent: #e54eff;
  --stat-slogan-color: #04615f;
}
#university-academic-structure .stat-card__body--ops .stat-card__slogan {
  margin: 0 0 clamp(0.72rem, 1.65vw, 0.95rem);
  font-size: clamp(0.92rem, 2.1vw, 1.12rem);
  line-height: 1.22;
  display: block;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--stat-slogan-color);
}
#university-academic-structure .stat-card__body--ops > p:not(.stat-card__slogan) {
  font-size: clamp(0.78rem, 1.45vw, 0.95rem);
  line-height: 1.45;
  font-weight: 400;
  display: block;
  margin: 0 0 clamp(0.32rem, 0.85vw, 0.48rem);
  color: var(--stat-bullets-fg);
}
#university-academic-structure .stat-card__body--ops ul {
  list-style: none;
  /* Was `auto 0 0`, which pushed the checklist to the bottom of the card and
  left a tall dead band between the paragraph and the first bullet. The list
  now sits under the copy it belongs to — with a deliberate gap, so the
  dotted rule reads as the start of a new block rather than as underlining
  for the paragraph above it. */
  margin: clamp(1.15rem, 2.2vw, 1.75rem) 0 0;
  padding: 0.55rem 0;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  flex: 0 0 auto;
  max-width: 100%;
  align-self: flex-start;
  gap: 0;
  background-image:
  radial-gradient(circle closest-side, var(--stat-bullets-line) 0.85px, transparent 1px),
  radial-gradient(circle closest-side, var(--stat-bullets-line) 0.85px, transparent 1px);
  background-size: 8px 2px, 8px 2px;
  background-position: 0 0, 0 100%;
  background-repeat: repeat-x, repeat-x;
}
#university-academic-structure .stat-card__body--ops li {
  font-size: clamp(0.74rem, 1.35vw, 0.9rem);
  line-height: 1.32;
  font-weight: 400;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.48rem 0;
  position: relative;
  color: var(--stat-bullets-fg);
}
#university-academic-structure .stat-card__body--ops li + li {
  padding-top: 0.58rem;
  margin-top: 0;
  background-image: radial-gradient(circle closest-side, var(--stat-bullets-line) 0.85px, transparent 1px);
  background-size: 8px 2px;
  background-repeat: repeat-x;
  background-position: 0 0;
}
#university-academic-structure .stat-card__body--ops li::before {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border-radius: 0;
  border: 1.5px solid var(--stat-bullets-border);
  background-color: var(--stat-bullets-accent);
  box-shadow: none;
  position: relative;
  margin: 0;
  align-self: center;
}
#university-academic-structure .stat-card__body--ops li::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  width: 10px;
  height: 8px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11' fill='none'%3E%3Cpath d='M2 5.5L5.5 9.2L12 1.8' stroke='%23000' stroke-width='1.35' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}
#university-academic-structure .numbers-spacer {
  height: 0;
}
@media (max-width: 1280px) {
  #university-academic-structure .numbers-container {
    padding-left: clamp(32px, 4vw, 64px);
    padding-right: 0;
  }
}
@media (max-width: 1024px) {
  #university-academic-structure .numbers-container {
    flex-direction: column;
    gap: 48px;
    max-width: 1340px;
    margin: 0 auto;
    padding-left: 48px;
    padding-right: 48px;
  }
  #university-academic-structure .numbers-left {
    flex: 1;
    max-width: 100%;
  }
  #university-academic-structure .numbers-title {
    font-size: clamp(2rem, 5vw, 3.1rem);
  }
  #university-academic-structure .numbers-right {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    height: auto;
  }
  #university-academic-structure .stat-card {
    position: relative !important;
    top: auto !important;
  }
  #university-academic-structure .stat-card__heading {
    font-size: 26px;
    letter-spacing: 0.04em;
  }
  #university-academic-structure .stat-card:nth-child(n + 2) .stat-card__inner {
    visibility: visible;
    opacity: 1;
  }
}
@media (max-width: 640px) {
  #university-academic-structure .numbers-section {
    padding: 32px 0;
  }
  #university-academic-structure .numbers-container {
    padding: 0 16px;
  }
  #university-academic-structure .numbers-title {
    font-size: clamp(1.75rem, 5.5vw, 3.1rem);
  }
  #university-academic-structure .stat-card__inner {
    border-radius: 0;
    padding: 20px 32px 40px;
    min-height: 300px;
  }
  #university-academic-structure .stat-card__heading {
    font-size: 26px;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
    max-width: calc(100% - 70px);
  }
  #university-academic-structure .stat-card__icon {
    width: 44px;
    height: 44px;
    top: 14px;
    right: 20px;
  }
  #university-academic-structure .stat-card__icon svg {
    width: 20px;
    height: 20px;
  }
}
@media (max-width: 1024px) {
  #university-academic-structure.numbers-stack-mobile .numbers-right {
    position: relative;
    /* height is set inline by the script to match the tallest card */
  }
  #university-academic-structure.numbers-stack-mobile .stat-card {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }
  #university-academic-structure.numbers-stack-mobile .stat-card:nth-child(1) {
    z-index: 1;
  }
  #university-academic-structure.numbers-stack-mobile .stat-card:nth-child(2) {
    z-index: 2;
  }
  #university-academic-structure.numbers-stack-mobile .stat-card:nth-child(3) {
    z-index: 3;
  }
  #university-academic-structure.numbers-stack-mobile .stat-card:nth-child(4) {
    z-index: 4;
  }
  #university-academic-structure.numbers-stack-mobile .stat-card:nth-child(n + 2) .stat-card__inner {
    visibility: hidden;
  }
  #university-academic-structure .stat-card__art {
    width: 150px;
    bottom: 16px;
  }
}
@media (max-width: 640px) {
  #university-academic-structure .stat-card__art {
    display: none;
  }
}
@media (max-width: 1024px) {
  #university-academic-structure.numbers-stack-mobile .numbers-desc:not(.numbers-desc--lead) {
    display: none;
  }
  #university-academic-structure.numbers-stack-mobile .numbers-desc--lead {
    margin-bottom: 0;
  }
  #university-academic-structure.numbers-stack-mobile .numbers-container {
    gap: 20px;
  }
  #university-academic-structure.numbers-stack-mobile .numbers-section {
    padding: 24px 0;
  }
  #university-academic-structure.numbers-stack-mobile .stat-card__inner {
    min-height: 0;
  }
}

/* ---------- src/rto/css/blocks/13-rto-numbers-title.css ---------- */
#university-academic-structure h2.numbers-title, #university-academic-structure h2.numbers-title .numbers-title__line, #university-academic-structure h2.numbers-title .grad-text {
  font-family: 'welfare', 'Inter', system-ui, sans-serif !important;
  font-synthesis: none;
}

/* ---------- src/rto/css/blocks/25-rto-faq-extra.css ---------- */
.pp-intro-para, .pp-card-para, .rto-id-gov-embed .id-card-body p:not(.id-card-slogan), .fg-box-text .fg-text-btn-row > p, .fg-li-text p, .hiw-step__desc, .hiw-step__copy, .ds1-card__desc, #university-academic-structure .numbers-desc, #university-academic-structure .stat-card__body--ops > p:not(.stat-card__slogan), .ds5-intro__desc, .ds5-card__desc, .tree-preview-panel .simple-preview-footer {
  font-family: NibPro, 'Inter', system-ui, sans-serif !important;
  font-size: 17px !important;
  font-synthesis: none !important;
}
.rto-id-gov-embed .id-card-body li, .fg-bullet-list li, .hiw-step__content .fg-bullet-list li, #university-academic-structure .stat-card__body--ops li {
  font-family: NibPro, 'Inter', system-ui, sans-serif !important;
  font-size: 17px !important;
  font-synthesis: none !important;
}

/* ---------- src/rto/css/blocks/34-rto-type-and-mobile-overrides.css ---------- */
.fg-grid .fg-box-title, .fg-box-text h2, .fg-box-text .fg-box-title, .hiw-steps .hiw-step__title, .ds1-grid .ds1-card__title, .ds9-stats-wrapper .ds9-metric, #university-academic-structure .stat-card__heading, [data-stats-scroll] .ssc-stat-number, [data-stats-scroll] .ssc-cta-title, .ds2-benefits .ds2-card-title, .pp-ds13-card-title, .pp-intro-title, .hiw-rto-embed .hiw-card h3, .hiw-rto-embed .hiw-card .hiw-card__title, .hiw-rto-embed .hiw-step__title, .rto-id-gov-embed .id-card-cap h3 {
  font-family:AnekBangla,Inter,system-ui,sans-serif!important;font-size:1.9rem!important;font-weight:600!important;font-synthesis:weight!important;-webkit-text-stroke:0!important;letter-spacing:0!important
}
@media(max-width:768px) {
  #university-academic-structure .numbers-container {
    padding-left:16px!important;padding-right:16px!important;gap:34px!important
  }
  #university-academic-structure .numbers-left {
    flex:0 0 auto!important;width:100%!important;max-width:100%!important;align-items:stretch!important
  }
  #university-academic-structure .numbers-title {
    width:100%!important;max-width:none!important;font-size:clamp(1.72rem,6.35vw,2.08rem)!important;line-height:.94!important;letter-spacing:.005em!important;text-wrap:nowrap!important;margin-bottom:24px!important
  }
  #university-academic-structure .numbers-title__line, #university-academic-structure h2.numbers-title .numbers-title__line {
    display:block!important;width:100%!important;max-width:none!important;line-height:.94!important;white-space:nowrap!important
  }
  #university-academic-structure .numbers-title>.numbers-title__line+.numbers-title__line {
    margin-top:.04em!important
  }
  #university-academic-structure .numbers-desc {
    width:100%!important;max-width:none!important;font-size:clamp(1rem,4vw,1.14rem)!important;line-height:1.52!important;text-wrap:pretty!important
  }
  #university-academic-structure .numbers-desc--lead {
    font-size:clamp(1.02rem,4.1vw,1.16rem)!important;line-height:1.5!important
  }
}
@media(max-width:480px) {
  #university-academic-structure .numbers-container {
    padding-left:14px!important;padding-right:14px!important
  }
  #university-academic-structure .numbers-title {
    font-size:clamp(1.45rem,6vw,1.65rem)!important;letter-spacing:0!important
  }
  #university-academic-structure .numbers-desc {
    font-size:clamp(.98rem,4.2vw,1.08rem)!important;line-height:1.5!important
  }
}

/* ---------- src/rto/css/blocks/36-rto-workspace-tools.css ---------- */
@media (max-width: 680px) {
  #university-academic-structure .stat-card__heading {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
  }
}

/* ---------- src/rto/css/blocks/38-rto-reduced-motion-final.css ---------- */
@media (prefers-reduced-motion: reduce) {
  #university-academic-structure .numbers-right {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    height: auto !important;
  }
  #university-academic-structure .stat-card {
    position: relative !important;
    top: auto !important;
    height: auto !important;
  }
  #university-academic-structure .stat-card__inner {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    height: auto !important;
  }
  #university-academic-structure .numbers-spacer {
    display: none !important;
  }
}

/* ---------- src/rto/css/blocks/42-rto-narrow-phone.css ---------- */
@media (max-width: 480px) {
  #university-academic-structure .numbers-title, #university-academic-structure .numbers-title__line, #university-academic-structure h2.numbers-title .numbers-title__line {
    white-space: normal !important;
    text-wrap: pretty !important;
  }
}
@media (max-width: 400px) {
  #university-academic-structure .numbers-title {
    font-size: clamp(1.35rem, 7.4vw, 1.72rem) !important;
  }
}

/* ---------- src/rto/css/blocks/50-rto-fx-kit.css ---------- */
.rto-flow-sec, .rto-cock-sec, .rto-pil-sec {
  /* -- palette ---------------------------------------------------- */
  --rx-accent: #a37610;
  --rx-accent-deep: #7d5a0c;
  --rx-accent-soft: #f9f5f1;
  --rx-aqua-deep: #776708;
  --rx-container: 1280px;
  --rx-coral: #dc4c4d;
  --rx-coral-deep: #b6282d;
  --rx-dur: 240ms;
  --rx-ease: cubic-bezier(.4, 0, .2, 1);
  --rx-ff-label: 'AnekBangla', system-ui, sans-serif;
  --rx-fs-eyebrow: 13px;
  --rx-fs-h2: clamp(24px, 2.8vw, 38px);
  --rx-fs-lead: clamp(17px, 1.25vw, 20px);
  --rx-fs-micro: 13px;
  --rx-gutter: clamp(20px, 4vw, 56px);
  --rx-ink: #281229;
  --rx-ink-faint: #805e81;
  --rx-ink-soft: #573658;
  --rx-lavender: #a4388e;
  --rx-lavender-deep: #7d306e;
  --rx-lh-lead: 1.34;
  --rx-line: #f0e5f1;
  --rx-line-strong: #e1cde2;
  --rx-ls-eyebrow: 0.1em;
  --rx-nav-offset: 116px;
  --rx-r-lg: 14px;
  --rx-r-md: 10px;
  --rx-r-pill: 999px;
  --rx-r-sm: 6px;
  --rx-saffron: #a78d0d;
  --rx-saffron-deep: #7e6803;
  --rx-section-y: clamp(56px, 6.5vw, 104px);
  --rx-sh-frame: 0 18px 48px rgba(40, 18, 41, .12), 0 3px 10px rgba(40, 18, 41, .06);
  --rx-sky: #bf28cc;
  --rx-sky-deep: #951d9f;
  --rx-stack-2: 12px;
  --rx-stack-4: 32px;
  --rx-stack-5: 48px;
  --rx-surface: #ffffff;
  --rx-surface-cool: #fdf7fd;
  --rx-surface-saffron: #fcf7db;
  --rx-surface-sky: #fceefd;
  --rx-surface-sunken: #f9f3fa;
  --rx-teal: #a37610;
  --rx-teal-deep: #7d5a0c;
  --rx-why-hue: #e7bc12;
  --rx-container-narrow: 940px;
  --rx-container-wide: 1480px;
  --rx-ink-muted: #775578;
  --rx-line-soft: #f6eff6;
  --rx-r-xl: 20px;
  --rx-section-y-tight: clamp(40px, 4.5vw, 68px);
  --rx-sh-lg: 0 10px 30px rgba(40, 18, 41, .09), 0 2px 6px rgba(40, 18, 41, .05);
  --rx-sh-md: 0 2px 6px rgba(40, 18, 41, .07), 0 1px 2px rgba(40, 18, 41, .05);
  --rx-stack-3: 20px;
  --rx-surface-warm: #fbfbf2;
  /* -- Type roles ---------------------------------------------------
  The RTO page runs four type roles and they are not interchangeable.
  Taken from the sibling #rto-finance section so a showcase section
  sets type exactly the way the rest of the page does:
  display  welfare     the one main title per section (h2)
  heading  AnekBangla  secondary headers and card titles (h3)
  body     NibPro      ALL ordinary text — paragraphs, bullets,
  footnotes, callout copy
  label    Agency      badges, eyebrows and sublines
  ui       system      the authored product mocks only, so they
  render as application chrome rather than
  page copy (matches .hiw-section-wrapper)
  ------------------------------------------------------------------ */
  --rx-ff-display: 'welfare', 'Inter', system-ui, sans-serif;
  --rx-ff-heading: 'AnekBangla', 'Inter', system-ui, sans-serif;
  --rx-ff-body: NibPro, 'Inter', system-ui, sans-serif;
  --rx-ff-label: 'Agency', 'Inter', system-ui, sans-serif;
  --rx-ff-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Badges are a pale pill with a coloured rule at the head, not a
  filled colour chip. --rx-badge-rule is the only colour in them. */
  --rx-badge-bg: #ffffff;
  --rx-badge-line: #ede0ef;
  --rx-badge-ink: #422943;
  --rx-badge-rule: var(--rx-accent, #a37610);
  /* Yellow for the line under a section title. Two values, because the
  pillars panel is dark and the other two sections sit on the page
  background. #7c7300 is a true yellow hue (45deg, full saturation)
  taken down to the lightness that clears WCAG AA with headroom
  (4.92 on white); #7e7600 also passes but only at 4.53 measured,
  which is too close to the 4.5 floor to rely on. #e8dc00 is the
  counterpart on the dark panel (14.9). A bright yellow on white
  would fail badly — the hue has to be paid for in lightness. */
  --rx-lead-yellow: #7c7300;
  --rx-sr-delay: 0ms;
}
.rto-fx-wrap {
  width: 100%;
  max-width: var(--rx-container);
  margin-inline: auto;
  padding-inline: var(--rx-gutter);
}
.rto-fx-wrap--narrow {
  max-width: var(--rx-container-narrow);
}
.rto-fx-wrap--wide {
  max-width: var(--rx-container-wide);
}
.rto-fx-section {
  position: relative;
  padding-block: var(--rx-section-y);
}
.rto-fx-section--tight {
  padding-block: var(--rx-section-y-tight);
}
.rto-fx-section--warm {
  background: var(--rx-surface-warm);
}
.rto-fx-section--cool {
  background: var(--rx-surface-cool);
}
.rto-fx-section--tint {
  background: var(--rx-accent-soft);
}
.rto-fx-section--ruled {
  border-top: 1px solid var(--rx-line-soft);
}
.rto-fx-h2 {
  font-size: var(--rx-fs-h2);
}
.rto-fx-h2 .rto-fx-hl {
  color: var(--rx-accent-deep);
}
.rto-fx-lead {
  max-width: 58ch;
  font-size: var(--rx-fs-lead);
  line-height: var(--rx-lh-lead);
  color: var(--rx-ink-soft);
}
.rto-fx-micro {
  font-size: var(--rx-fs-micro); color: var(--rx-ink-faint);
}
.rto-fx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--rx-ff-label);
  font-size: var(--rx-fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--rx-ls-eyebrow);
  text-transform: uppercase;
  color: var(--rx-accent-deep);
}
.rto-fx-eyebrow::before {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: var(--rx-r-pill);
  background: var(--rx-accent);
}
.rto-fx-head {
  max-width: 62ch;
}
.rto-fx-head > * + * {
  margin-top: var(--rx-stack-2);
}
.rto-fx-head .rto-fx-lead {
  margin-top: var(--rx-stack-2);
}
.rto-fx-icon {
  width: 20px;
  height: 20px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rto-fx-icon--sm {
  width: 16px; height: 16px;
}
.rto-fx-icon--lg {
  width: 26px; height: 26px;
}
.rto-fx-sronly {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.rto-fx-rv {
  opacity: 1;
  transform: none;
}
.rto-fx-frame {
  position: relative;
  border-radius: var(--rx-r-lg);
  background: var(--rx-surface);
  border: 1px solid var(--rx-line);
  box-shadow: var(--rx-sh-frame);
  overflow: hidden;
}
.rto-fx-frame__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--rx-surface-sunken);
  border-bottom: 1px solid var(--rx-line);
}
.rto-fx-frame__dots {
  display: flex; gap: 5px;
}
.rto-fx-frame__dots i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--rx-line-strong);
}
.rto-fx-frame__path {
  font-family: var(--rx-ff-label);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--rx-ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rto-fx-frame__media {
  display: block;
}
.rto-fx-frame__media img, .rto-fx-frame__media svg {
  display: block;
  width: 100%;
  height: auto;
}
.rto-fx-frame--flat {
  box-shadow: var(--rx-sh-md);
}
.rto-fx-crop {
  overflow: hidden;
  border-radius: var(--rx-r-lg);
}
.rto-fx-crop > img, .rto-fx-crop > svg {
  display: block;
  width: var(--rx-crop-scale, 100%);
  max-width: none;
  height: auto;
  margin-left: var(--rx-crop-x, 0);
}
.rto-fx-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  padding: 0;
  border: 2px solid var(--rx-surface);
  border-radius: 50%;
  background: var(--rx-accent-deep);
  color: #fff;
  font-family: var(--rx-ff-label);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(40, 18, 41, .28);
  transition: transform var(--rx-dur) var(--rx-ease), background-color var(--rx-dur) var(--rx-ease);
}
.rto-fx-marker::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}
.rto-fx-marker {
  position: relative;
}
.rto-fx-marker:hover {
  background: var(--rx-ink);
}
.rto-fx-marker[aria-pressed="true"], .rto-fx-marker[data-current] {
  background: var(--rx-ink);
  transform: scale(1.12);
}
.rto-fx-hilite {
  position: absolute;
  border: 2px solid var(--rx-accent-deep);
  border-radius: var(--rx-r-sm);
  background: color-mix(in srgb, var(--rx-accent) 10%, transparent);
  opacity: 0;
  transition: opacity var(--rx-dur) var(--rx-ease);
  pointer-events: none;
}
.rto-fx-hilite[data-on] {
  opacity: 1;
}
.rto-cocalls {
  display: grid;
  gap: 10px;
  /* The callouts used to be the sticky column. They now scroll normally so the
  screenshot beside them can be the thing that holds. */
}
.rto-cocall {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  width: 100%;
  /* Taller. These sit beside a 480px screenshot and were 13px-padded boxes
  hugging two lines of text; the column read as a list of captions rather
  than five things worth reading. The height comes from padding and leading
  rather than a min-height, so a three-line callout still sets naturally. */
  padding: 19px 20px;
  border: 1px solid var(--rx-line);
  border-left: 3px solid transparent;
  border-radius: var(--rx-r-md);
  background: var(--rx-surface);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--rx-dur) var(--rx-ease), background-color var(--rx-dur) var(--rx-ease);
}
.rto-cocall:hover {
  border-color: var(--rx-line-strong);
}
.rto-cocall[aria-expanded="true"], .rto-cocall[aria-pressed="true"] {
  border-left-color: var(--rx-accent);
  border-color: color-mix(in srgb, var(--rx-accent) 32%, var(--rx-line));
  background: var(--rx-accent-soft);
}
.rto-cocall__num {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(145deg,
  var(--rx-num-b, var(--rx-accent)) 0%, var(--rx-num-a, var(--rx-accent-deep)) 100%);
  color: #fff;
  font-family: var(--rx-ff-label);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  /* The inset highlight is what stops it reading as a flat filled circle, and
  the drop is tinted with the medallion's own hue rather than black. */
  box-shadow:
  inset 0 1px 0 rgba(255, 255, 255, .38),
  0 5px 14px -6px color-mix(in srgb, var(--rx-num-a, var(--rx-accent-deep)) 72%, transparent);
  transition: transform var(--rx-dur) var(--rx-ease), box-shadow var(--rx-dur) var(--rx-ease);
}
.rto-cocalls > .rto-cocall:nth-child(1) {
  --rx-num-a: var(--rx-teal-deep);     --rx-num-b: var(--rx-teal);
}
.rto-cocalls > .rto-cocall:nth-child(2) {
  --rx-num-a: var(--rx-saffron-deep);  --rx-num-b: var(--rx-saffron);
}
.rto-cocalls > .rto-cocall:nth-child(3) {
  --rx-num-a: var(--rx-coral-deep);    --rx-num-b: var(--rx-coral);
}
.rto-cocalls > .rto-cocall:nth-child(4) {
  --rx-num-a: var(--rx-sky-deep);      --rx-num-b: var(--rx-sky);
}
.rto-cocalls > .rto-cocall:nth-child(5) {
  --rx-num-a: var(--rx-lavender-deep); --rx-num-b: var(--rx-lavender);
}
.rto-cocall:hover .rto-cocall__num {
  transform: translateY(-1px);
}
.rto-cocall[aria-pressed="true"] .rto-cocall__num {
  box-shadow:
  inset 0 1px 0 rgba(255, 255, 255, .38),
  0 0 0 3px color-mix(in srgb, var(--rx-num-b, var(--rx-accent)) 28%, transparent),
  0 6px 16px -6px color-mix(in srgb, var(--rx-num-a, var(--rx-accent-deep)) 80%, transparent);
}
.rto-cocall__title {
  display: block;
  font-family: var(--rx-ff-heading);
  /* Up from a flat 15px — it now leads the paragraph under it rather than
  sitting at the same weight as a bolded first phrase. */
  font-size: clamp(16.5px, 1.3vw, 18.5px);
  font-weight: 700;
  line-height: 1.28;
  color: var(--rx-ink);
}
.rto-cocall__text {
  display: block;
  margin-top: 9px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--rx-ink-muted);
}
.rto-fx-demo {
  margin-top: 10px;
  padding-left: 14px;
  /* Red rather than the neutral --rx-line-strong: this is the "everything
  here is invented" disclaimer, so the rule should read as a flag, not as
  another hairline. #d51ba4 is already the page's red - it carries the
  ds9 card-1 badge and the ds2 card dividers. */
  border-left: 2px solid #d51ba4;
}
.as-cta-fallback .rto-fx-lead {
  margin-inline: auto;
}
.rto-fx-section--warm, .rto-fx-section--cool, .rto-fx-section--tint {
  background: transparent;
}
@media (hover: none) {
  .rto-cocall:hover {
    border-color: var(--rx-line);
  }
}
@media (max-height: 720px) {
  .rto-cocalls {
    position: static;
  }
}
@media (max-width: 1024px) {
  .rto-cocalls {
    position: static;
  }
  .rto-cocall {
    cursor: default;
  }
}
@media (max-width: 520px) {
  .rto-cocall {
    grid-template-columns: 26px minmax(0, 1fr); gap: 10px;
  }
  .rto-cocall__num {
    width: 26px; height: 26px; font-size: 12px;
  }
}
@media (max-width: 720px) {
  .rto-fx-micro {
    font-size: 13.5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rto-fx-marker[aria-pressed="true"], .rto-fx-marker[data-current] {
    transform: none; outline: 3px solid var(--rx-accent); outline-offset: 2px;
  }
  .rto-cocall__num {
    transition: none;
  }
  .rto-cocall:hover .rto-cocall__num {
    transform: none;
  }
}
.rto-fx-h2 {
  font-family: var(--rx-ff-display);
  font-size: clamp(2rem, 5vw, 3.1rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.04;
  color: #1a1a1a;
}
.rto-fx-lead {
  /* Body face, not the label face. 100-rto-section-subtitle-font.css
  puts every section subtitle on this page onto NibPro — .rto-fx-lead
  included — and loads last. This matched Agency before that block
  existed; pointing it at the body face means the two agree instead
  of one silently overriding the other. */
  font-family: var(--rx-ff-body);
  color: var(--rx-ink-soft);
}
.rto-fx-hl {
  /* The RTO page marks the emphasised half of a title with ink, not a
  rule or a wash, so the two heading styles agree.
  font-family: inherit is load-bearing, not tidiness. 04-rto-hero.css
  carries a `* { font-family: 'Inter', sans-serif }` reset, and a
  universal selector matches this span directly — which beats
  inheriting welfare from the h2 around it. Without this line the
  highlighted words render in a different typeface from the rest of
  the heading. The page's own .grad-text is pinned the same way. */
  font-family: inherit;
  color: var(--rx-accent-deep, var(--rx-teal-deep));
  font-style: normal;
}
.rto-fx-sronly {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.rto-fx-rv {
  opacity: 1;
}
.rto-flowcard__shot, .rto-cockmock__panel, .rto-pillars__pane {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.rto-flow-sec, .rto-cock-sec, .rto-pil-sec {
  font-family: var(--rx-ff-body);
}
.rto-fx-micro, .rto-fx-demo {
  font-family: var(--rx-ff-body);
}
.rto-flowcard__shot, .rto-pillars__pane, .rto-cockmock {
  font-family: var(--rx-ff-ui);
}
.rto-fx-br {
  display: none;
}
@media (min-width: 901px) {
  .rto-fx-br {
    display: inline;
  }
}
.rto-fx-eyebrow, .rto-flowcard__label, .rto-pillars__label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 13px;
  border-radius: var(--rx-r-pill);
  background: var(--rx-badge-bg);
  border: 1px solid var(--rx-badge-line);
  color: var(--rx-badge-ink);
  font-family: var(--rx-ff-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  /* A flex item has its display blockified — inside .rto-flowcard, which
  is a flex column, `inline-flex` computes to `flex` and the pill would
  stretch the full width of the card. align-self keeps it hugging its
  own text; it is inert wherever the badge is not a flex item. */
  align-self: flex-start;
  /* Tight to the heading it labels — it belongs to that heading, not to
  the whitespace above it. */
  margin: 0 0 6px;
}
.rto-fx-eyebrow::before, .rto-flowcard__label::before, .rto-pillars__label::before {
  content: "";
  flex: none;
  width: 20px;
  height: 3px;
  border-radius: var(--rx-r-pill);
  background: var(--rx-badge-rule);
}
.rto-fx-head > .rto-fx-eyebrow + .rto-fx-h2, .rto-pillars__head > .rto-fx-eyebrow + .rto-fx-h2 {
  margin-top: 2px;
}
.rto-fx-head > .rto-fx-lead {
  color: var(--rx-lead-yellow);
}
.rto-fx-micro {
  font-size: var(--rx-fs-micro, 13.5px);
  color: var(--rx-ink-faint, #805e81);
}
.rto-fx-micro, .rto-fx-demo {
  font-family: var(--rx-ff-body, NibPro, 'Inter', system-ui, sans-serif);
}

/* ---------- src/rto/css/blocks/51-rto-flow-steps.css ---------- */
.rto-flow__list, .rto-flow__nums {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rto-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
  margin-top: var(--rx-stack-4);
}
.rto-flow__head {
  align-self: start;
}
.rto-flow__rule, .rto-flow__rail {
  display: none;
}
.rto-flow__list {
  display: grid;
  /* The gap is the composition. It is what lets one card own the viewport
  at a time while the heading and rail hold still beside it. */
  gap: clamp(26px, 9vw, 190px);
}
.rto-flowcard {
  position: relative;
  overflow: hidden;
  /* A column with the copy pushed to the bottom. The cards are a uniform
  height, but their paragraphs are not the same length, so anchoring the
  copy to the foot keeps the titles on a line with each other instead of
  letting each one float wherever its own image ended. */
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
  padding: 20px;
  border-radius: 28px;
  background: var(--rx-card-surface, var(--rx-surface-sunken));
  /* Clears the fixed navbar when the rail's links jump here. */
  scroll-margin-top: calc(var(--rx-nav-offset) + 22px);
}
.rto-flowcard__shot {
  position: relative;
  border: 0;
  border-radius: var(--rx-r-xl);
  background: var(--rx-card-mat, var(--rx-accent-soft));
  box-shadow: none;
  padding: 8px;
}
.rto-flowcard__shot .rto-fx-crop {
  border-radius: var(--rx-r-md);
}
.rto-flowcard__shot::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  border-radius: 0 0 var(--rx-r-xl) var(--rx-r-xl);
  background: linear-gradient(180deg,
  transparent 0%,
  color-mix(in srgb, var(--rx-card-surface, var(--rx-surface-sunken)) 72%, transparent) 46%,
  var(--rx-card-surface, var(--rx-surface-sunken)) 100%);
  pointer-events: none;
}
.rto-flowcard__body {
  margin-top: auto; padding-top: 18px;
}
.rto-flowcard__t {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--rx-ff-heading);
  font-size: 21px;
  line-height: 1.25;
  color: var(--rx-ink);
}
.rto-flowcard__n {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--rx-accent-deep);
  color: #fff;
  font-family: var(--rx-ff-label);
  font-size: 13px;
  font-weight: 800;
}
.rto-flowcard__d {
  font-size: 15px;
  line-height: 1.55;
  color: var(--rx-ink-muted);
}
.rto-flowcard__t + .rto-flowcard__d {
  margin-top: 18px;
}
.rto-flowcard__d + .rto-flowcard__d {
  margin-top: 11px;
}
.rto-flowcard__sub + .rto-flowcard__d {
  margin-top: 18px;
}
.rto-flow-sec {
  background: linear-gradient(180deg, var(--rx-surface-saffron) 0%, var(--rx-surface) 62%);
}
.rto-flow-sec .rto-flowcard {
  --rx-card-surface: #f8f5e0;
  --rx-card-mat: #ebe4bc;
}
.rto-flow-sec .rto-flowcard[data-rto-step="2"] {
  --rx-card-surface: #f7f5e6;
  --rx-card-mat: #ece6c7;
  --rx-accent-deep: var(--rx-aqua-deep);
}
.rto-flow-sec .rto-flowcard[data-rto-step="3"] {
  --rx-card-surface: #fcefee;
  --rx-card-mat: #f6d9d7;
  --rx-accent-deep: var(--rx-coral-deep);
}
.rto-flow-sec .rto-flowcard[data-rto-step="4"] {
  --rx-card-surface: #fbedf8;
  --rx-card-mat: #f2d1ea;
  --rx-accent-deep: var(--rx-lavender-deep);
}
.rto-flowcard__shot .rto-fx-crop {
  --rx-crop-scale: 168%;
  --rx-crop-x: -10%;
  /* Sized to the space a 476px card has left once the copy is seated. The
  letterbox is wider than it was at 7:5 - two paragraphs of copy need the
  room, and the capture reads fine shorter because the crop scale is
  already showing one region of the interface rather than the whole of
  it. */
  aspect-ratio: 16 / 9;
}
.rto-flow-sec {
  background: transparent;
}
@media (max-width: 720px) {
  .rto-flowcard__shot .rto-fx-crop {
    --rx-crop-scale: 200%; --rx-crop-x: -13%;
  }
}
@media (min-width: 1025px) {
  .rto-flow {
    /* The heading is three short lines; the cards carry a 1280px-wide
    application screenshot. Splitting the row evenly gave the words room
    they did not need and the screenshots less than they did. */
    /* 1fr, not 0.62fr: a flex factor below 1 claims only that fraction of
    the free space and leaves the rest unused, which collapsed the
    heading to 182px and let the rail column absorb the slack. The
    heading takes what is left after the stage, which is how it ends up
    narrower than the cards rather than wider. */
    /* Both text and stage are proportional. A fixed 620px stage track
    cannot shrink, so between 1025 and 1100px it pushed the grid wider
    than the container and the whole page scrolled sideways. At 1:2.1 the
    stage still takes roughly twice the heading's width at every size and
    .rto-flowcard's own max-width stops it growing past 620. */
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 2.1fr) 44px;
    align-items: start;
    gap: 0 clamp(24px, 3vw, 46px);
  }
  .rto-flow__head, .rto-flow__rule, .rto-flow__rail {
    position: sticky; top: calc(var(--rx-nav-offset) + 16px);
  }
  .rto-flow__rule {
    display: block;
    width: 1px;
    height: 420px;
    background: var(--rx-line);
  }
  .rto-flow__rail {
    display: block;
  }
  .rto-flow__nums {
    display: grid; gap: 8px;
  }
  .rto-flow__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 56px;
    border: 1px solid var(--rx-line);
    border-radius: var(--rx-r-pill);
    /* Resting state is deliberately near-invisible, so the one filled pill
    reads as the answer to "where am I". Mixed from the section accent
    rather than a fixed grey: --surface-sunken is a cool tone and sat
    badly on a warm section. */
    background: var(--rx-surface);
    color: var(--rx-ink-faint);
    font-family: var(--rx-ff-label);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color var(--rx-dur) var(--rx-ease), color var(--rx-dur) var(--rx-ease),
    border-color var(--rx-dur) var(--rx-ease);
  }
  .rto-flow__num:hover {
    background: var(--rx-accent-soft); color: var(--rx-ink);
  }
  .rto-flow__num[aria-current="step"], .rto-flow:not([data-rto-enhanced]) .rto-flow__nums > li:first-child .rto-flow__num {
    border-color: transparent;
    background: color-mix(in srgb, var(--rx-accent) 26%, var(--rx-surface));
    color: var(--rx-accent-deep);
  }
}
@media (min-width: 768px) {
  .rto-flowcard {
    min-height: 520px;
  }
}
.rto-flow-sec {
  background: transparent;
}
.rto-flow-sec .rto-flowcard {
  --rx-card-surface: #f8f4ea; --rx-card-mat: #eee5cc; --rx-accent-deep: #7d5a0c;
}
.rto-flow-sec .rto-flowcard[data-rto-step="2"] {
  --rx-card-surface: #faeceb; --rx-card-mat: #f1d1cd; --rx-accent-deep: var(--rx-lavender-deep);
}
.rto-flow-sec .rto-flowcard[data-rto-step="3"] {
  --rx-card-surface: #fcedfd; --rx-card-mat: #f5d5f8; --rx-accent-deep: var(--rx-sky-deep);
}
.rto-flow-sec .rto-flowcard[data-rto-step="4"] {
  --rx-card-surface: #fcf4da; --rx-card-mat: #f2e1a5; --rx-accent-deep: var(--rx-saffron-deep);
}
.rto-flowcard__shot {
  display: block;
  margin: 0 0 18px;
  border-radius: var(--rx-r-lg);
  background: var(--rx-surface);
  border: 1px solid var(--rx-card-mat, var(--rx-line));
  padding: 14px;
  /* The demonstration tables have a min-content width the narrowest phones
  cannot give them. overflow:hidden silently cut the last column off;
  scrolling the slot keeps the table readable without letting it push the
  page sideways. Both axes are non-visible, so the box still clips its
  rounded corners exactly as before. */
  overflow-x: auto;
  overflow-y: hidden;
}
.rto-flowcard__t {
  font-family: var(--rx-ff-heading);
}
.rto-flowcard__label {
  --rx-badge-rule: var(--rx-accent-deep, var(--rx-teal-deep));
}
.rto-flowcard__sub {
  margin: 8px 0 0;
  font-family: var(--rx-ff-label);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--rx-accent-deep, var(--rx-teal-deep));
}
.rto-flowcard__list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}
.rto-flowcard__list li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--rx-ink-soft);
}
.rto-flowcard__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .42em;
  width: 13px;
  height: 7px;
  border-left: 2px solid var(--rx-accent-deep, var(--rx-teal-deep));
  border-bottom: 2px solid var(--rx-accent-deep, var(--rx-teal-deep));
  transform: rotate(-45deg);
}
.rto-flow__foot {
  margin: clamp(26px, 3vw, 40px) 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--rx-line);
  font-family: var(--rx-ff-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--rx-ink-faint);
}
.rto-flowcard__shot > * {
  width: 100%; max-width: 100%;
}
.rto-flowcard__shot .hiw-table {
  width: 100%;
}
.rto-flow__list {
  gap: clamp(24px, 3vw, 52px);
}
.rto-flowcard__d, .rto-flowcard__list li {
  font-family: var(--rx-ff-body);
}

/* ---------- src/rto/css/blocks/52-rto-cockpit.css ---------- */
.rto-cockpit {
  display: grid;
  /* The callout column takes the width, and the screenshot gives it up. Five
  numbered explanations at ~14px were setting to 30-odd characters a line in
  a 320px column — narrow enough that every one of them ran to four or five
  lines. The screenshot loses ~90px and is still the larger half. */
  grid-template-columns: minmax(0, 1fr) clamp(380px, 34vw, 520px);
  gap: clamp(22px, 2.6vw, 38px);
  align-items: start;
  margin-top: var(--rx-stack-5);
}
.rto-cockpit__canvas {
  /* Sticky, not merely relative: the screenshot holds its place while the
  numbered callouts scroll past it, then releases when the grid's bottom
  reaches it — i.e. the moment the last callout's bottom edge lines up with
  the bottom of the image, after which the two travel up together. Sticky
  still establishes the containing block the absolutely-positioned markers
  need, so nothing else has to change. Requires .rto-cockpit's align-items:
  start, which is already set — a stretched grid item can never stick. */
  position: sticky;
  top: var(--rx-nav-offset);
}
.rto-cockpit__markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.rto-cockpit__markers > * {
  pointer-events: auto;
}
@media (max-width: 1024px) {
  .rto-cockpit {
    grid-template-columns: minmax(0, 1fr);
  }
  .rto-cockpit__markers {
    display: none !important;
  }
  .rto-cockpit__canvas {
    position: relative; top: auto;
  }
}
@media (max-width: 1024px), (min-resolution: 1.5dppx) and (max-width: 1200px) {
  .rto-cockpit__markers {
    pointer-events: none;
  }
}
@media (max-width: 1280px) {
  .rto-cockpit {
    grid-template-columns: minmax(0, 1fr) clamp(300px, 30vw, 360px);
  }
}
@media (max-width: 720px) {
  .rto-cockpit__canvas .rto-fx-frame__media {
    display: block;
    overflow: hidden;
  }
  .rto-cockpit__canvas .rto-fx-frame__media {
    aspect-ratio: 4 / 5;
  }
  .rto-cockpit__canvas .rto-fx-frame__media img {
    width: 235%;
    max-width: none;
    margin-left: -28%;
  }
}
.rto-cocall {
  font-family: var(--rx-ff-body);
}
.rto-cocall__title {
  font-family: var(--rx-ff-heading);
}
.rto-cockmock {
  border-radius: var(--rx-r-lg);
  overflow: hidden;
  background: var(--rx-surface);
  border: 1px solid var(--rx-line);
  box-shadow: var(--rx-sh-frame);
  font-family: var(--rx-ff-ui);
}
.rto-cockmock__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  /* Reads as the window's title bar, so it carries colour instead of the pale
  sunken grey it shared with every other surface on the page. Teal-deep to
  aqua-deep are this section's own accent tokens, so the bar becomes the
  most saturated element in the mock without leaving the palette. #f8f4ec
  clears 6:1 against the lighter end of the gradient. */
  background: linear-gradient(90deg, var(--rx-teal-deep, #7d5a0c), var(--rx-aqua-deep, #776708));
  border-bottom: 1px solid rgba(0, 0, 0, .18);
  font-size: 12px; font-weight: 600; color: #f8f4ec;
}
.rto-cockmock__dots {
  display: inline-flex; gap: 5px;
}
.rto-cockmock__dots i {
  width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .42);
}
.rto-cockmock__body {
  padding: 16px; display: grid; gap: 14px;
}
.rto-cockmock__label {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--rx-ink-faint); margin: 0 0 8px;
}
.rto-cockmock__stat {
  font-size: 20px; font-weight: 700; color: var(--rx-ink); line-height: 1.1;
}
.rto-cockmock__stats {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px;
}
.rto-cockmock__line {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-top: 1px solid var(--rx-line-soft, #f6eff6);
  font-size: 13px; color: var(--rx-ink-soft);
}
.rto-cockmock__line:first-of-type {
  border-top: 0;
}
.rto-cockmock__pill {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 9px; border-radius: var(--rx-r-pill); white-space: nowrap;
}
.rto-cockmock__pill--ok {
  background: #f8ede6; color: #875017;
}
.rto-cockmock__pill--warn {
  background: #fbf0a0; color: #746505;
}
.rto-cockmock__pill--stop {
  background: #fbddde; color: #a12329;
}
@media (max-width: 720px) {
  .rto-cockmock__stats {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
.rto-cocalls__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.rto-cocalls__item {
  border: 1px solid var(--rx-line);
  border-radius: var(--rx-r-lg);
  background: var(--rx-surface);
  overflow: hidden;
  transition: border-color var(--rx-dur) var(--rx-ease),
  box-shadow var(--rx-dur) var(--rx-ease);
}
.rto-cocalls__item:has(.rto-cocall[aria-pressed="true"]) {
  border-color: var(--rx-sky);
  box-shadow: var(--rx-sh-md);
}
.rto-cocall {
  display: flex;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}
.rto-cocall__num {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--rx-surface-sunken);
  color: var(--rx-ink-soft);
  font-size: 13px;
  font-weight: 700;
  transition: background var(--rx-dur) var(--rx-ease), color var(--rx-dur) var(--rx-ease);
}
.rto-cocall[aria-pressed="true"] .rto-cocall__num {
  background: var(--rx-sky);
  color: #fff;
}
.rto-cocall__title {
  display: block;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--rx-ink);
}
.rto-cocall__text {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--rx-ink-muted);
}
.rto-cocalls__foot {
  margin: 16px 0 0;
  font-family: var(--rx-ff-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--rx-ink-faint);
}
.rto-cocall__body {
  display: block;
}
.rto-cocall__sub {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--rx-sky-deep);
}
.rto-cocall__text + .rto-cocall__text {
  margin-top: 7px;
}
.rto-cocall__text {
  font-family: var(--rx-ff-body);
}
.rto-cocall__sub, .rto-cockmock__label {
  font-family: var(--rx-ff-label);
}
.rto-cockpit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(380px, 34vw, 520px);
  gap: clamp(22px, 2.6vw, 38px);
  align-items: start;
  margin-top: var(--rx-stack-4);
}
.rto-cockpit__canvas {
  position: sticky;
  top: calc(var(--rx-nav-offset) + 16px);
}
.rto-cockmock__pane + .rto-cockmock__pane {
  margin-top: 14px;
}
[data-rto-enhanced] .rto-cockmock__pane {
  display: none; margin-top: 0;
}
[data-rto-enhanced] .rto-cockmock__pane[data-on] {
  display: block;
}
.rto-cockmock__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rx-ink-faint);
  margin: 0 0 12px;
}
.rto-cockmock__pane > .rto-fx-marker {
  position: static; flex: none;
}
.rto-cockmock__pane > .hiw-chat + .hiw-table, .rto-cockmock__pane > .hiw-table + .hiw-chat {
  margin-top: 14px;
}
.rto-cockmock__list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}
.rto-cockmock__list li {
  position: relative;
  padding-left: 16px;
  font-family: var(--rx-ff-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--rx-ink-soft);
}
.rto-cockmock__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rx-sky);
}
@media (max-width: 900px) {
  .rto-cockpit {
    grid-template-columns: minmax(0, 1fr);
  }
  .rto-cockpit__canvas {
    position: static;
  }
}
.rto-cock-sec > .rto-fx-wrap {
  max-width: 1440px;
}
.rto-cock-sec .rto-fx-head {
  max-width: min(760px, 100%);
}
.rto-cock-sec .rto-fx-h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
}
.rto-cock-sec .rto-fx-lead {
  max-width: 66ch;
}
.rto-cocalls__item {
  border: 1px solid var(--rx-box-line);
  background: var(--rx-box-bg);
  box-shadow: var(--rx-sh-md);
  transition: border-color var(--rx-dur) var(--rx-ease),
  box-shadow var(--rx-dur) var(--rx-ease),
  transform var(--rx-dur) var(--rx-ease);
}
.rto-cocalls__item:nth-child(4n + 1) {
  --rx-box-bg: #f7ddfd; --rx-box-line: #e6a2f6; --rx-box-accent: #a305c7;
}
.rto-cocalls__item:nth-child(4n + 2) {
  --rx-box-bg: #f9dacc; --rx-box-line: #ec8d61; --rx-box-accent: #a23c0c;
}
.rto-cocalls__item:nth-child(4n + 3) {
  --rx-box-bg: #f8ea86; --rx-box-line: #e2cb17; --rx-box-accent: #6b5e02;
}
.rto-cocalls__item:nth-child(4n + 4) {
  --rx-box-bg: #f9e8db; --rx-box-line: #f2cdb0; --rx-box-accent: #9b4f12;
}
.rto-cocalls__item:hover {
  box-shadow: var(--rx-sh-lg); transform: translateY(-1px);
}
.rto-cocalls__item:has(.rto-cocall[aria-pressed="true"]) {
  border-color: var(--rx-box-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rx-box-accent) 34%, transparent),
  var(--rx-sh-lg);
}
.rto-cocall__num {
  background: color-mix(in srgb, var(--rx-box-accent) 14%, #ffffff);
  color: var(--rx-box-accent);
}
.rto-cocall[aria-pressed="true"] .rto-cocall__num {
  background: var(--rx-box-accent);
  color: #fff;
}
.rto-cocall__sub {
  color: var(--rx-box-accent);
}
.rto-cocall:focus-visible {
  outline: 3px solid var(--rx-box-accent); outline-offset: -3px; border-radius: var(--rx-r-lg);
}

/* ---------- src/rto/css/blocks/53-rto-pillars.css ---------- */
.rto-pil-sec .rto-fx-wrap {
  max-width: 1360px;
}
.rto-pil-sec > .rto-fx-wrap {
  max-width: 1600px;
}
.rto-pillars {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 4vw, 58px) clamp(22px, 3.4vw, 64px);
  border-radius: 32px;
  background: var(--rx-panel-surface, var(--rx-ink));
  color: #fff;
}
.rto-pillars__flare {
  position: absolute;
  top: -52%;
  right: -18%;
  width: min(980px, 120%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
  color-mix(in srgb, var(--rx-accent) 88%, #fff) 0%,
  color-mix(in srgb, var(--rx-accent) 52%, transparent) 30%,
  transparent 64%);
  filter: blur(34px);
  opacity: .5;
  pointer-events: none;
}
.rto-pillars > *:not(.rto-pillars__flare) {
  position: relative;
}
#university-admissions .rto-fx-h2 {
  font-size: 2.4rem !important;
}
.rto-pillars__head {
  max-width: 1040px;
}
.rto-pillars__head > * + * {
  margin-top: var(--rx-stack-3);
}
.rto-pillars .rto-fx-h2 {
  font-size: clamp(30px, 3.5vw, 50px);
  color: #fff;
}
.rto-pillars .rto-fx-h2 .rto-fx-hl {
  color: color-mix(in srgb, var(--rx-accent) 52%, #fff);
}
.rto-pillars .rto-fx-eyebrow {
  color: color-mix(in srgb, var(--rx-accent) 46%, #fff);
}
.rto-pillars .rto-fx-eyebrow::before {
  background: color-mix(in srgb, var(--rx-accent) 58%, #fff);
}
.rto-pillars__lead {
  max-width: 62ch;
  font-size: var(--rx-fs-lead);
  line-height: var(--rx-lh-lead);
  color: rgba(255, 255, 255, .68);
}
.rto-pillars__btn {
  border-radius: var(--rx-r-pill);
  border-color: rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .1);
  color: #fff;
}
.rto-pillars__btn:hover {
  background: #fff; border-color: #fff; color: var(--rx-ink);
}
.rto-pillars__body {
  display: grid;
  /* The interface takes appreciably more than either text column now: it is
  the evidence, and at 1.3fr it was barely wider than the words. */
  /* Rebalanced with the wider wrap: the interface is still the widest thing
  in the row, but the two columns of copy now have room for a real
  paragraph rather than a caption. */
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.5fr) minmax(0, 1.25fr);
  /* stretch, not center: the interface is sized by the columns beside it —
  see .rto-pillars__shot — so it has to receive the row's full height. */
  align-items: stretch;
  gap: clamp(24px, 2.6vw, 40px);
  /* With the subtitle and the button gone the heading no longer needs a
  70px runway before the points begin. */
  margin-top: clamp(22px, 2.4vw, 34px);
}
.rto-pillars__col {
  display: grid;
  gap: clamp(24px, 2.8vw, 36px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.rto-pillars__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
}
.rto-pillars__item > .rto-pillars__icon, .rto-pillars__item > .rto-pillars__label {
  flex: 0 0 auto;
  margin-top: 0;
}
.rto-pillars__item > :not(.rto-pillars__icon):not(.rto-pillars__label) {
  width: 100%;
}
.rto-pillars__icon {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  padding: 0;
  color: color-mix(in srgb, var(--rx-why-hue, #fff) 45%, #fff);
}
.rto-pillars__icon svg {
  width: 26px; height: 26px;
}
.rto-pillars .rto-pillars__t {
  /* Close under its own icon, so the two group before the paragraph does. */
  margin-top: 9px;
  font-family: var(--rx-ff-heading);
  font-size: clamp(19px, 1.35vw, 23px);
  line-height: 1.25;
  font-weight: 700;
  color: var(--rx-why-hue, #fff);
}
.rto-pillars .rto-pillars__d {
  margin-top: 18px;
  font-size: clamp(15px, 1.02vw, 17px);
  line-height: 1.58;
  color: rgba(255, 255, 255, .68);
}
.rto-pillars__shot {
  align-self: stretch;
  min-height: 0;
  margin: 0;
  border-radius: var(--rx-r-xl);
  overflow: hidden;
  box-shadow: var(--rx-sh-lg);
}
.rto-pillars__shot .rto-fx-crop {
  height: 100%;
  aspect-ratio: auto;
}
.rto-pillars__shot .rto-fx-crop > picture, .rto-pillars__shot .rto-fx-crop > .rto-fx-frame__media {
  display: block;
  width: 100%;
  height: 100%;
}
.rto-pillars__shot .rto-fx-crop img {
  width: 100%;
  max-width: none;
  height: 100%;
  margin-left: 0;
  object-fit: cover;
}
.rto-pillars {
  --rx-panel-surface: #301630;
}
.rto-pillars__shot .rto-fx-crop img {
  object-position: 26% top;
}
.rto-pillars__item[data-rto-from="left"]:nth-child(1) {
  --rx-why-hue: #e7bc12;
}
.rto-pillars__item[data-rto-from="left"]:nth-child(2) {
  --rx-why-hue: #ebb28f;
}
.rto-pillars__item[data-rto-from="left"]:nth-child(3) {
  --rx-why-hue: #ddcb04;
}
.rto-pillars__item[data-rto-from="right"]:nth-child(1) {
  --rx-why-hue: #e28b05;
}
.rto-pillars__item[data-rto-from="right"]:nth-child(2) {
  --rx-why-hue: #db77f4;
}
.rto-pillars__item[data-rto-from="right"]:nth-child(3) {
  --rx-why-hue: #f865d0;
}
@media (max-width: 1180px) {
  .rto-pillars__body {
    grid-template-columns: minmax(0, 1fr);
  }
  .rto-pillars__shot {
    order: 3; max-width: 520px; margin-inline: auto;
  }
  .rto-pillars__col {
    gap: 26px;
  }
  .rto-pillars__shot .rto-fx-crop {
    height: auto;
    aspect-ratio: 16 / 10;
  }
  .rto-pillars__shot .rto-fx-crop img {
    width: 150%;
    max-width: none;
    height: auto;
    margin-left: -14%;
    object-fit: fill;
  }
}
.rto-pillars {
  --rx-why-hue: #e1ba1b;
  --rx-panel-surface: #351138;
}
.rto-pillars__t {
  font-family: var(--rx-ff-heading);
}
.rto-pil-sec .rto-fx-h2 {
  color: #ffffff;
}
.rto-pil-sec .rto-fx-lead {
  color: #e8dc00;
}
.rto-pil-sec .rto-pillars__label, .rto-pil-sec .rto-fx-eyebrow {
  --rx-badge-bg: #ffffff;
  --rx-badge-line: rgba(255, 255, 255, .35);
  --rx-badge-ink: #381639;
}
.rto-pil-sec .rto-fx-eyebrow {
  background: var(--rx-badge-bg); color: var(--rx-badge-ink);
}
.rto-pillars__shot {
  margin: 0;
  border-radius: var(--rx-r-lg);
  overflow: hidden;
  background: var(--rx-surface);
  box-shadow: var(--rx-sh-frame);
}
.rto-pillars__label {
  --rx-badge-rule: var(--rx-why-hue, #e7bc12); border-radius: 0;
}
.rto-pillars .rto-pillars__sub {
  margin-top: 8px;
  font-family: var(--rx-ff-label);
  font-size: clamp(14px, .98vw, 16px);
  line-height: 1.5;
  font-weight: 600;
  color: color-mix(in srgb, var(--rx-why-hue, #e7bc12) 72%, #ffffff);
}
.rto-pillars__list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.rto-pillars__list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .6);
}
.rto-pillars__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rx-why-hue, #e7bc12);
}
.rto-pillars__shot {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 14px;
  background: var(--rx-surface);
}
.rto-pillars__pane {
  border: 1px solid var(--rx-line);
  border-radius: var(--rx-r-md);
  padding: 12px;
  background: var(--rx-surface);
}
.rto-pillars__pane > * {
  width: 100%; max-width: 100%;
}
.rto-pillars__pane {
  color: var(--rx-ink);
}
.rto-pillars__pane .hiw-table {
  width: 100%;
}
.rto-pillars__foot {
  margin: clamp(26px, 3vw, 38px) 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-family: var(--rx-ff-body);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .58);
}
.rto-pillars__d, .rto-pillars__list li {
  font-family: var(--rx-ff-body);
}
@media (min-width: 1181px) {
  .rto-pillars__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr);
    gap: clamp(20px, 2.2vw, 30px);
  }
  .rto-pillars__shot {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
  }
}
@media (max-width: 1180px) {
  .rto-pillars__body {
    gap: clamp(22px, 5vw, 34px);
  }
}
.rto-pillars__col {
  gap: clamp(18px, 2vw, 26px);
}
.rto-pillars__label {
  margin-top: 10px; margin-bottom: 6px;
}
.rto-pillars .rto-pillars__t {
  margin-top: 6px; font-size: clamp(17px, 1.2vw, 20px);
}
.rto-pillars .rto-pillars__sub {
  margin-top: 5px; font-size: clamp(13px, .9vw, 14px);
}
.rto-pillars .rto-pillars__d {
  margin-top: 9px;
  font-size: clamp(13px, .92vw, 15px);
  line-height: 1.5;
}
.rto-pillars__list {
  margin-top: 10px; gap: 6px;
}
.rto-pillars__list li {
  font-size: 13px; line-height: 1.45;
}
.rto-pillars__icon svg {
  width: 30px; height: 30px;
}
@media (max-width: 900px) {
  .rto-pillars__shot {
    grid-template-columns: minmax(0, 1fr);
  }
}
#university-admissions-title {
  /* Was a bare 3vw. Identical on desktop — 3vw tops out at 58px around
  1930px, which is past any desktop this ships to — but a bare vw has
  no floor, and on a 390px phone it rendered 11.7px, smaller than the
  paragraph beneath it. The floor is the whole fix; the middle term is
  unchanged. */
  font-size: clamp(26px, 3vw, 58px);
}
.rto-pillars .rto-fx-hl2 {
  font-family: inherit;
  font-style: normal;
  color: #d7b100;
}
@media (max-width: 900px) {
  .rto-pillars__shot {
    display: none;
  }
  .rto-pillars__col {
    gap: 20px;
  }
}

/* ---------- src/rto/css/blocks/99-rto-lifted-inline-styles.css ---------- */
.rto-il-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rto-il-stack {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.rto-il-row, .rto-il-row--warn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: #f7f9f8;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
}
.rto-il-row--warn {
  background: #fff8db;
  border: 1px solid #fddc5a;
}
.rto-il-total {
  margin-top: 4px;
  padding: 8px 10px;
  background: #000;
  color: #fff;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rto-il-gap {
  margin-top: 16px;
}
.rto-il-measure {
  max-width: 780px;
}
.rto-il-defs {
  position: absolute;
}
.rto-il-numbers-shell {
  max-width: 1500px;
  margin: 60px auto 0 !important;
  padding: 0 40px;
  margin-bottom: 0 !important;
}
.rto-il-chip-icon {
  margin-right: 6px; flex: 0 0 auto;
}
.rto-il-ic-rose {
  color: #f326b2; flex: 0 0 auto;
}
.rto-il-ic-fuchsia {
  color: #e95f14; flex: 0 0 auto;
}
.rto-il-ic-pink {
  color: #d14aec; flex: 0 0 auto;
}
.rto-il-ic-violet {
  color: #f21f0f; flex: 0 0 auto;
}
.rto-il-ic-indigo {
  color: #d613be; flex: 0 0 auto;
}
.rto-il-ic-purple {
  color: #f3330b; flex: 0 0 auto;
}
.rto-il-ic-emerald {
  color: #ec8b25; flex: 0 0 auto;
}
.rto-il-ic-green {
  color: #e28d57; flex: 0 0 auto;
}
.rto-il-ic-lime {
  color: #0da3a5; flex: 0 0 auto;
}
.rto-il-card-split {
  background: linear-gradient(135deg, #260e26 0%, #5b1f62 50%, #7b690c 100%);
  position: relative;
  overflow: hidden;
}
.rto-il-card-neon {
  background: #fafafa;
  border: 2px solid #f0e4f1;
  position: relative;
  overflow: hidden;
}
.rto-il-ring-lg, .rto-il-ring-sm {
  position: absolute;
  border-radius: 50%;
}
.rto-il-ring-lg {
  right: -40px;
  top: -40px;
  width: 200px;
  height: 200px;
  border: 1px solid rgba(200, 178, 7, .15);
}
.rto-il-ring-sm {
  right: -20px;
  top: -20px;
  width: 130px;
  height: 130px;
  border: 1px solid rgba(200, 178, 7, .25);
}
.rto-il-neon-stripe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #cdb008, #ef405d, #f21f0f);
}
.rto-il-pillrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: auto;
}
.rto-il-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
}
.rto-il-pill--amber {
  background: #fdf874; color: #71520b;
}
.rto-il-pill--violet {
  background: #fee5f8; color: #872518;
}
.rto-il-pill--green {
  background: #fdf2ec; color: #86471d;
}
.rto-il-pill--red {
  background: #fee2e6; color: #981b30;
}