/* src/style.css */
:root {
  --rocky-bg: #f6f7fb;
  --rocky-surface: #ffffff;
  --rocky-ink: #0b1020;
  --rocky-ink2: #27324a;
  --rocky-muted: #5b6885;
  --rocky-line: rgba(11, 16, 32, .12);
  --rocky-soft: rgba(11, 16, 32, .06);

  --rocky-a: #7c3aed;
  --rocky-b: #06b6d4;
  --rocky-c: #f97316;
  --rocky-d: #22c55e;

  --rocky-r1: 24px;
  --rocky-r2: 18px;

  --rocky-shadow: 0 18px 48px rgba(10, 15, 30, .10);
  --rocky-shadow2: 0 12px 26px rgba(10, 15, 30, .10);

  --rocky-max: 1180px;
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--rocky-ink);
  background:
    radial-gradient(900px 460px at 12% 2%, rgba(124, 58, 237, .14), rgba(124, 58, 237, 0) 60%),
    radial-gradient(820px 460px at 92% 12%, rgba(6, 182, 212, .14), rgba(6, 182, 212, 0) 60%),
    radial-gradient(700px 420px at 65% 92%, rgba(249, 115, 22, .10), rgba(249, 115, 22, 0) 58%),
    linear-gradient(180deg, #fff, var(--rocky-bg));
}

img {
  display: block;
  max-width: 100%
}

a {
  color: inherit;
  text-decoration: none
}

a:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(6, 182, 212, .35);
  outline-offset: 3px
}

.rocky-body {
  min-height: 100vh
}

.rocky-shell {
  max-width: var(--rocky-max);
  margin: 0 auto;
  padding: 0 18px
}

.rocky-skip {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.rocky-skip:focus {
  left: 18px;
  top: 12px;
  width: auto;
  height: auto;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--rocky-surface);
  border: 1px solid var(--rocky-line);
  box-shadow: var(--rocky-shadow2);
}

.rocky-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rocky-line);
}

.rocky-header__row {
  display: grid;
  grid-template-columns: 1.1fr 2fr 1.1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
}

.rocky-header__row2 {
  padding: 10px 0 14px;
  border-top: 1px solid rgba(11, 16, 32, .06);
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.rocky-header--doc .rocky-header__row2 {
  display: none
}

.rocky-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 16px;
}

.rocky-brand:hover {
  background: rgba(11, 16, 32, .03)
}

.rocky-brand__mark {
  width: 38px;
  height: 38px;
  border-radius: 16px;
  border: 1px solid rgba(11, 16, 32, .12);
  background:
    radial-gradient(14px 14px at 28% 26%, rgba(255, 255, 255, .90), rgba(255, 255, 255, 0) 60%),
    linear-gradient(135deg, rgba(124, 58, 237, .18), rgba(6, 182, 212, .12));
  position: relative;
  overflow: hidden;
}

.rocky-brand__tile {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(124, 58, 237, .95), rgba(6, 182, 212, .72));
  left: 10px;
  top: 10px;
}

.rocky-brand__tile--b {
  left: 20px;
  top: 14px;
  background: linear-gradient(135deg, rgba(6, 182, 212, .95), rgba(34, 197, 94, .70));
}

.rocky-brand__tile--c {
  left: 14px;
  top: 22px;
  background: linear-gradient(135deg, rgba(249, 115, 22, .95), rgba(124, 58, 237, .70));
}

.rocky-brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.05
}

.rocky-brand__domain {
  font-weight: 950;
  letter-spacing: .2px
}

.rocky-brand__sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--rocky-muted);
  font-weight: 800
}

.rocky-nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.rocky-nav__link {
  font-size: 13px;
  font-weight: 900;
  color: rgba(39, 50, 74, .92);
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.rocky-nav__link:hover {
  background: rgba(11, 16, 32, .03);
  border-color: rgba(11, 16, 32, .08);
}

.rocky-header__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}

.rocky-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(11, 16, 32, .12);
  background: rgba(255, 255, 255, .74);
  font-size: 13px;
  font-weight: 950;
}

.rocky-chip--solid {
  border-color: rgba(124, 58, 237, .24);
  background:
    radial-gradient(70px 70px at 20% 20%, rgba(255, 255, 255, .82), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, rgba(124, 58, 237, .16), rgba(6, 182, 212, .10));
}

.rocky-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(10, 15, 30, .10)
}

.rocky-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.rocky-breadcrumbs__link {
  font-size: 12px;
  font-weight: 950;
  color: rgba(39, 50, 74, .92);
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(11, 16, 32, .10);
  background: rgba(255, 255, 255, .72);
}

.rocky-breadcrumbs__link:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(10, 15, 30, .08)
}

.rocky-breadcrumbs__sep {
  color: rgba(39, 50, 74, .55);
  font-weight: 900
}

.rocky-breadcrumbs__hint {
  font-size: 12px;
  color: rgba(39, 50, 74, .70);
  font-weight: 850
}

.rocky-ticker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end
}

.rocky-ticker__pill {
  font-size: 12px;
  font-weight: 950;
  color: rgba(39, 50, 74, .88);
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11, 16, 32, .10);
  background: rgba(11, 16, 32, .03);
}

.rocky-main {
  padding: 0 0 52px
}

.rocky-hero {
  padding: 26px 0 14px
}

.rocky-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items: stretch;
}

.rocky-ribbon {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.rocky-ribbon__seg {
  height: 10px;
  width: 48px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(124, 58, 237, .95), rgba(6, 182, 212, .85));
}

.rocky-ribbon__seg--mid {
  width: 92px;
  background: linear-gradient(90deg, rgba(6, 182, 212, .95), rgba(34, 197, 94, .82));
}

.rocky-ribbon__seg--end {
  width: 64px;
  background: linear-gradient(90deg, rgba(249, 115, 22, .95), rgba(124, 58, 237, .80));
}

.rocky-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.rocky-kicker__tag {
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .14em;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11, 16, 32, .12);
  background: rgba(255, 255, 255, .72);
}

.rocky-kicker__line {
  width: 40px;
  height: 1px;
  background: rgba(11, 16, 32, .16)
}

.rocky-kicker__text {
  font-size: 13px;
  color: rgba(39, 50, 74, .76);
  font-weight: 850
}

.rocky-h1 {
  margin: 14px 0 0;
  font-size: 52px;
  line-height: 1.02;
  letter-spacing: -.02em;
}

.rocky-h1--doc {
  font-size: 42px
}

.rocky-lead {
  margin: 14px 0 0;
  max-width: 64ch;
  font-size: 16px;
  line-height: 1.75;
  color: var(--rocky-ink2);
}

.rocky-hero__cta {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.rocky-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(11, 16, 32, .12);
  background: rgba(255, 255, 255, .74);
  font-weight: 950;
  box-shadow: 0 1px 0 rgba(10, 15, 30, .04);
}

.rocky-btn--primary {
  border-color: rgba(124, 58, 237, .22);
  background:
    radial-gradient(80px 80px at 22% 26%, rgba(255, 255, 255, .86), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, rgba(124, 58, 237, .16), rgba(6, 182, 212, .10));
}

.rocky-btn--ghost {
  background: rgba(11, 16, 32, .03);
}

.rocky-btn--wide {
  width: 100%
}

.rocky-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--rocky-shadow2)
}

.rocky-metrics {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.rocky-metric {
  border-radius: var(--rocky-r2);
  border: 1px solid rgba(11, 16, 32, .12);
  background: rgba(255, 255, 255, .72);
  padding: 12px;
}

.rocky-metric__cap {
  font-size: 12px;
  color: rgba(39, 50, 74, .72);
  font-weight: 900
}

.rocky-metric__val {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: .2px
}

.rocky-metric__note {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(39, 50, 74, .72);
  font-weight: 850
}

.rocky-stage {
  position: relative
}

.rocky-stage__frame {
  border-radius: var(--rocky-r1);
  border: 1px solid rgba(11, 16, 32, .12);
  background: rgba(255, 255, 255, .76);
  box-shadow: var(--rocky-shadow);
  overflow: hidden;
}

.rocky-stage__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: rgba(11, 16, 32, .03);
}

.rocky-cards {
  position: absolute;
  right: -10px;
  bottom: -18px;
  display: grid;
  gap: 10px;
  width: min(300px, 86%);
}

.rocky-card {
  border-radius: 20px;
  border: 1px solid rgba(11, 16, 32, .12);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 10px 22px rgba(10, 15, 30, .10);
  padding: 12px;
}

.rocky-card--a {
  transform: rotate(-2deg)
}

.rocky-card--b {
  transform: rotate(1deg)
}

.rocky-card--c {
  transform: rotate(-1deg)
}

.rocky-card__top {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start
}

.rocky-card__badge {
  width: 28px;
  height: 28px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 1000;
  color: #fff;
  background: linear-gradient(135deg, rgba(124, 58, 237, .96), rgba(6, 182, 212, .86));
}

.rocky-card__badge--b {
  background: linear-gradient(135deg, rgba(6, 182, 212, .96), rgba(34, 197, 94, .82))
}

.rocky-card__badge--c {
  background: linear-gradient(135deg, rgba(249, 115, 22, .96), rgba(124, 58, 237, .82))
}

.rocky-card__title {
  font-weight: 1000
}

.rocky-card__text {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(39, 50, 74, .84);
  font-weight: 850
}

.rocky-card__bar {
  margin-top: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(11, 16, 32, .06);
  overflow: hidden;
}

.rocky-card__fill {
  display: block;
  height: 100%;
  width: 68%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(124, 58, 237, .96), rgba(6, 182, 212, .86));
}

.rocky-card__fill--b {
  width: 78%;
  background: linear-gradient(90deg, rgba(6, 182, 212, .96), rgba(34, 197, 94, .84))
}

.rocky-card__fill--c {
  width: 62%;
  background: linear-gradient(90deg, rgba(249, 115, 22, .96), rgba(124, 58, 237, .84))
}

.rocky-stamp {
  margin-top: 12px;
  border-radius: 20px;
  border: 1px solid rgba(11, 16, 32, .12);
  background: rgba(255, 255, 255, .72);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rocky-stamp__cap {
  font-size: 12px;
  color: rgba(39, 50, 74, .72);
  font-weight: 900
}

.rocky-stamp__val {
  font-weight: 1000
}

.rocky-stamp__mini {
  display: flex;
  gap: 10px;
  align-items: center
}

.rocky-stamp__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(124, 58, 237, .96), rgba(249, 115, 22, .86));
}

.rocky-stamp__txt {
  font-size: 12px;
  color: rgba(39, 50, 74, .76);
  font-weight: 900
}

.rocky-strip {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.rocky-strip__item {
  border-radius: 20px;
  border: 1px solid rgba(11, 16, 32, .12);
  background: rgba(255, 255, 255, .70);
  padding: 12px;
}

.rocky-strip__cap {
  font-size: 12px;
  color: rgba(39, 50, 74, .70);
  font-weight: 900
}

.rocky-strip__val {
  margin-top: 8px;
  font-weight: 1000;
  color: rgba(39, 50, 74, .92)
}

.rocky-section {
  padding: 34px 0
}

.rocky-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11, 16, 32, .12);
  background: rgba(255, 255, 255, .72);
  color: rgba(39, 50, 74, .90);
}

.rocky-h2 {
  margin: 14px 0 0;
  font-size: 34px;
  line-height: 1.12;
  letter-spacing: -.015em;
}

.rocky-h2--doc {
  font-size: 28px
}

.rocky-sub {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(39, 50, 74, .82);
  max-width: 86ch;
}

.rocky-mag__head {
  max-width: 92ch
}

.rocky-mag__grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
  align-items: start;
}

.rocky-pane {
  border-radius: var(--rocky-r1);
  border: 1px solid rgba(11, 16, 32, .12);
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 1px 0 rgba(10, 15, 30, .04);
  overflow: hidden;
}

.rocky-pane__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  border-bottom: 1px solid rgba(11, 16, 32, .10);
  background:
    radial-gradient(420px 240px at 10% 0%, rgba(124, 58, 237, .12), rgba(124, 58, 237, 0) 60%),
    rgba(255, 255, 255, .82);
}

.rocky-pane__label {
  font-weight: 1000
}

.rocky-pane__mark {
  width: 36px;
  height: 36px;
  border-radius: 16px;
  border: 1px solid rgba(11, 16, 32, .12);
  background:
    radial-gradient(14px 14px at 35% 30%, rgba(255, 255, 255, .86), rgba(255, 255, 255, 0) 60%),
    linear-gradient(135deg, rgba(6, 182, 212, .75), rgba(124, 58, 237, .18));
}

.rocky-pane__items {
  padding: 14px;
  display: grid;
  gap: 12px
}

.rocky-item {
  border-radius: 20px;
  border: 1px solid rgba(11, 16, 32, .10);
  background: rgba(255, 255, 255, .86);
  padding: 12px;
}

.rocky-item__cap {
  font-size: 12px;
  font-weight: 1000;
  color: rgba(39, 50, 74, .70)
}

.rocky-item__title {
  margin-top: 8px;
  font-weight: 1000
}

.rocky-item__text {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(39, 50, 74, .82);
  font-weight: 850
}

.rocky-side {
  display: grid;
  gap: 12px
}

.rocky-side__card {
  border-radius: var(--rocky-r1);
  border: 1px solid rgba(11, 16, 32, .12);
  background:
    radial-gradient(420px 220px at 90% 0%, rgba(6, 182, 212, .12), rgba(6, 182, 212, 0) 62%),
    rgba(255, 255, 255, .76);
  padding: 14px;
}

.rocky-side__card--alt {
  background:
    radial-gradient(420px 220px at 10% 0%, rgba(249, 115, 22, .12), rgba(249, 115, 22, 0) 62%),
    rgba(255, 255, 255, .76);
}

.rocky-side__cap {
  font-size: 12px;
  font-weight: 1000;
  color: rgba(39, 50, 74, .70)
}

.rocky-side__title {
  margin-top: 8px;
  font-weight: 1000;
  font-size: 18px
}

.rocky-side__text {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(39, 50, 74, .84);
  font-weight: 850
}

.rocky-side__list {
  margin-top: 12px;
  display: grid;
  gap: 10px
}

.rocky-side__li {
  display: flex;
  gap: 10px;
  align-items: flex-start
}

.rocky-side__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(6, 182, 212, .95), rgba(124, 58, 237, .80));
  margin-top: 4px;
}

.rocky-side__liText {
  font-size: 13px;
  color: rgba(39, 50, 74, .82);
  font-weight: 900;
  line-height: 1.6
}

.rocky-miniCta {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(11, 16, 32, .12);
  background: rgba(255, 255, 255, .86);
  font-weight: 1000;
}

.rocky-miniCta__txt {
  color: rgba(39, 50, 74, .92)
}

.rocky-miniCta__arrow {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(11, 16, 32, .12);
  background: rgba(11, 16, 32, .04);
  position: relative;
}

.rocky-miniCta__arrow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(39, 50, 74, .62);
  border-bottom: 2px solid rgba(39, 50, 74, .62);
  transform: translate(-55%, -50%) rotate(-45deg);
}

.rocky-flow__head {
  max-width: 92ch
}

.rocky-path {
  margin-top: 18px;
  display: grid;
  gap: 12px;
}

.rocky-step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: stretch;
}

.rocky-step__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0;
}

.rocky-step__node {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(124, 58, 237, .96), rgba(6, 182, 212, .82));
  border: 1px solid rgba(11, 16, 32, .10);
  box-shadow: 0 10px 18px rgba(10, 15, 30, .10);
}

.rocky-step__node--b {
  background: linear-gradient(135deg, rgba(6, 182, 212, .96), rgba(34, 197, 94, .82))
}

.rocky-step__node--c {
  background: linear-gradient(135deg, rgba(249, 115, 22, .96), rgba(124, 58, 237, .82))
}

.rocky-step__node--d {
  background: linear-gradient(135deg, rgba(34, 197, 94, .96), rgba(6, 182, 212, .82))
}

.rocky-step__line {
  width: 2px;
  flex: 1;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(124, 58, 237, .38), rgba(6, 182, 212, .18));
  margin-top: 10px;
}

.rocky-step__line--b {
  background: linear-gradient(180deg, rgba(6, 182, 212, .38), rgba(34, 197, 94, .18))
}

.rocky-step__line--c {
  background: linear-gradient(180deg, rgba(249, 115, 22, .38), rgba(124, 58, 237, .18))
}

.rocky-step__line--d {
  background: linear-gradient(180deg, rgba(34, 197, 94, .38), rgba(6, 182, 212, .18))
}

.rocky-step__body {
  border-radius: var(--rocky-r1);
  border: 1px solid rgba(11, 16, 32, .12);
  background: rgba(255, 255, 255, .76);
  padding: 14px;
  box-shadow: 0 1px 0 rgba(10, 15, 30, .04);
}

.rocky-step__cap {
  font-size: 12px;
  font-weight: 1000;
  color: rgba(39, 50, 74, .70)
}

.rocky-step__title {
  margin-top: 8px;
  font-weight: 1000;
  font-size: 18px
}

.rocky-step__text {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(39, 50, 74, .84);
  font-weight: 850
}

.rocky-step__meta {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.rocky-pill {
  font-size: 12px;
  font-weight: 1000;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11, 16, 32, .12);
  background: rgba(11, 16, 32, .03);
  color: rgba(39, 50, 74, .88);
}

.rocky-pill--soft {
  background: rgba(255, 255, 255, .80);
}

.rocky-flow__footer {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 12px;
  align-items: stretch;
}

.rocky-batch {
  border-radius: var(--rocky-r1);
  border: 1px solid rgba(11, 16, 32, .12);
  background:
    radial-gradient(520px 260px at 0% 0%, rgba(124, 58, 237, .12), rgba(124, 58, 237, 0) 62%),
    rgba(255, 255, 255, .76);
  padding: 14px;
}

.rocky-batch--right {
  background:
    radial-gradient(520px 260px at 100% 0%, rgba(6, 182, 212, .12), rgba(6, 182, 212, 0) 62%),
    rgba(255, 255, 255, .76);
}

.rocky-batch__cap {
  font-size: 12px;
  font-weight: 1000;
  color: rgba(39, 50, 74, .70)
}

.rocky-batch__title {
  margin-top: 8px;
  font-weight: 1000;
  font-size: 18px
}

.rocky-batch__text {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(39, 50, 74, .84);
  font-weight: 850
}

.rocky-tactics {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.rocky-tactic {
  border-radius: var(--rocky-r1);
  border: 1px solid rgba(11, 16, 32, .12);
  background: rgba(255, 255, 255, .76);
  padding: 14px;
  box-shadow: 0 1px 0 rgba(10, 15, 30, .04);
}

.rocky-tactic__head {
  display: flex;
  align-items: center;
  gap: 12px
}

.rocky-tactic__badge {
  width: 34px;
  height: 34px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 1000;
  background: linear-gradient(135deg, rgba(124, 58, 237, .96), rgba(6, 182, 212, .82));
}

.rocky-tactic__badge--b {
  background: linear-gradient(135deg, rgba(6, 182, 212, .96), rgba(34, 197, 94, .82))
}

.rocky-tactic__badge--c {
  background: linear-gradient(135deg, rgba(249, 115, 22, .96), rgba(124, 58, 237, .82))
}

.rocky-tactic__title {
  font-weight: 1000;
  font-size: 18px
}

.rocky-tactic__text {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(39, 50, 74, .84);
  font-weight: 850
}

.rocky-tactic__grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px
}

.rocky-tactic__cell {
  border-radius: 18px;
  border: 1px solid rgba(11, 16, 32, .10);
  background: rgba(11, 16, 32, .03);
  padding: 12px;
}

.rocky-tactic__cap {
  font-size: 12px;
  font-weight: 1000;
  color: rgba(39, 50, 74, .70)
}

.rocky-tactic__val {
  margin-top: 8px;
  font-weight: 1000;
  color: rgba(39, 50, 74, .92)
}

.rocky-advice {
  margin-top: 14px;
  border-radius: var(--rocky-r1);
  border: 1px solid rgba(11, 16, 32, .12);
  background:
    radial-gradient(520px 260px at 0% 0%, rgba(249, 115, 22, .12), rgba(249, 115, 22, 0) 62%),
    radial-gradient(520px 260px at 100% 0%, rgba(6, 182, 212, .12), rgba(6, 182, 212, 0) 62%),
    rgba(255, 255, 255, .76);
  padding: 14px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 12px;
}

.rocky-advice__cap {
  font-size: 12px;
  font-weight: 1000;
  color: rgba(39, 50, 74, .70)
}

.rocky-advice__title {
  margin-top: 8px;
  font-weight: 1000;
  font-size: 18px
}

.rocky-advice__list {
  margin-top: 12px;
  display: grid;
  gap: 10px
}

.rocky-advice__li {
  display: flex;
  gap: 10px;
  align-items: flex-start
}

.rocky-advice__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(249, 115, 22, .96), rgba(124, 58, 237, .82));
  margin-top: 4px;
}

.rocky-advice__txt {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(39, 50, 74, .84);
  font-weight: 900
}

.rocky-advice__right {
  display: grid;
  gap: 10px
}

.rocky-advice__tile {
  border-radius: 20px;
  border: 1px solid rgba(11, 16, 32, .12);
  background: rgba(255, 255, 255, .86);
  padding: 12px;
}

.rocky-advice__tile--alt {
  background: rgba(11, 16, 32, .03)
}

.rocky-advice__tileCap {
  font-size: 12px;
  font-weight: 1000;
  color: rgba(39, 50, 74, .70)
}

.rocky-advice__tileVal {
  margin-top: 8px;
  font-weight: 1000
}

.rocky-advice__tileNote {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(39, 50, 74, .72);
  font-weight: 900
}

.rocky-shots {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.rocky-shot {
  margin: 0;
  border-radius: var(--rocky-r1);
  border: 1px solid rgba(11, 16, 32, .12);
  background: rgba(255, 255, 255, .76);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(10, 15, 30, .04);
}

.rocky-shot--wide {
  grid-column: 1 / -1
}

.rocky-shot__frame {
  padding: 12px;
  background:
    radial-gradient(520px 260px at 20% 0%, rgba(124, 58, 237, .12), rgba(124, 58, 237, 0) 60%),
    rgba(255, 255, 255, .86);
}

.rocky-shot__frame--wide {
  background:
    radial-gradient(520px 260px at 80% 0%, rgba(6, 182, 212, .12), rgba(6, 182, 212, 0) 60%),
    rgba(255, 255, 255, .86);
}

.rocky-shot__img {
  width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(11, 16, 32, .10);
  background: rgba(11, 16, 32, .03);
}

.rocky-shot__cap {
  border-top: 1px solid rgba(11, 16, 32, .10);
  padding: 12px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.rocky-shot__id {
  width: 30px;
  height: 30px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 1000;
  color: #fff;
  background: linear-gradient(135deg, rgba(124, 58, 237, .96), rgba(6, 182, 212, .82));
}

.rocky-shot__txt {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(39, 50, 74, .84);
  font-weight: 850
}

.rocky-ctaBand {
  margin-top: 14px;
  border-radius: var(--rocky-r1);
  border: 1px solid rgba(11, 16, 32, .12);
  background:
    radial-gradient(620px 280px at 0% 0%, rgba(124, 58, 237, .14), rgba(124, 58, 237, 0) 62%),
    radial-gradient(620px 280px at 100% 0%, rgba(249, 115, 22, .12), rgba(249, 115, 22, 0) 62%),
    rgba(255, 255, 255, .76);
  padding: 14px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 12px;
  align-items: center;
}

.rocky-ctaBand__cap {
  font-size: 12px;
  font-weight: 1000;
  color: rgba(39, 50, 74, .70)
}

.rocky-ctaBand__title {
  margin-top: 8px;
  font-weight: 1000;
  font-size: 18px
}

.rocky-ctaBand__text {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(39, 50, 74, .84);
  font-weight: 850
}

.rocky-ctaBand__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap
}

.rocky-faq {
  border-radius: var(--rocky-r1);
  border: 1px solid rgba(11, 16, 32, .12);
  background: rgba(255, 255, 255, .76);
  padding: 14px;
}

.rocky-faq__head {
  max-width: 92ch
}

.rocky-faq__grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 12px;
  align-items: start;
}

.rocky-qa {
  display: grid;
  gap: 10px
}

.rocky-q {
  border-radius: 20px;
  border: 1px solid rgba(11, 16, 32, .12);
  background: rgba(255, 255, 255, .86);
  overflow: hidden;
}

.rocky-q__sum {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  cursor: pointer;
  font-weight: 1000;
}

.rocky-q__sum::-webkit-details-marker {
  display: none
}

.rocky-q__q {
  color: rgba(39, 50, 74, .96)
}

.rocky-q__icon {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(11, 16, 32, .12);
  background: rgba(11, 16, 32, .03);
  position: relative;
}

.rocky-q__icon::before,
.rocky-q__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  border-radius: 999px;
  background: rgba(39, 50, 74, .62);
  transform: translate(-50%, -50%);
}

.rocky-q__icon::after {
  width: 2px;
  height: 12px
}

.rocky-q[open] .rocky-q__icon::after {
  opacity: 0
}

.rocky-q__a {
  padding: 0 12px 12px;
  color: rgba(39, 50, 74, .84);
  line-height: 1.7;
  font-size: 14px;
  font-weight: 850;
}

.rocky-faqAside {
  display: grid;
  gap: 10px
}

.rocky-faqAside__card {
  border-radius: var(--rocky-r1);
  border: 1px solid rgba(11, 16, 32, .12);
  background:
    radial-gradient(520px 260px at 100% 0%, rgba(6, 182, 212, .12), rgba(6, 182, 212, 0) 62%),
    rgba(255, 255, 255, .76);
  padding: 14px;
}

.rocky-faqAside__card--soft {
  background:
    radial-gradient(520px 260px at 0% 0%, rgba(124, 58, 237, .12), rgba(124, 58, 237, 0) 62%),
    rgba(255, 255, 255, .76);
}

.rocky-faqAside__cap {
  font-size: 12px;
  font-weight: 1000;
  color: rgba(39, 50, 74, .70)
}

.rocky-faqAside__title {
  margin-top: 8px;
  font-weight: 1000;
  font-size: 18px
}

.rocky-faqAside__text {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(39, 50, 74, .84);
  font-weight: 850
}

.rocky-faqAside__line {
  margin: 12px 0;
  height: 1px;
  background: rgba(11, 16, 32, .10)
}

.rocky-faqAside__row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px
}

.rocky-faqAside__k {
  font-size: 12px;
  font-weight: 1000;
  color: rgba(39, 50, 74, .70)
}

.rocky-faqAside__v {
  font-size: 12px;
  font-weight: 1000;
  color: rgba(39, 50, 74, .92);
  text-decoration: underline;
  text-decoration-color: rgba(39, 50, 74, .28)
}

.rocky-docHero {
  padding: 22px 0 10px
}

.rocky-docHero__grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
  align-items: start;
}

.rocky-docHero__quick {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.rocky-quick {
  border-radius: 20px;
  border: 1px solid rgba(11, 16, 32, .12);
  background: rgba(255, 255, 255, .72);
  padding: 12px;
}

.rocky-quick__k {
  font-size: 12px;
  font-weight: 1000;
  color: rgba(39, 50, 74, .70)
}

.rocky-quick__v {
  margin-top: 8px;
  font-weight: 1000;
  color: rgba(39, 50, 74, .92)
}

.rocky-docHero__side {
  position: relative
}

.rocky-docNav {
  border-radius: var(--rocky-r1);
  border: 1px solid rgba(11, 16, 32, .12);
  background: rgba(255, 255, 255, .76);
  padding: 14px;
  box-shadow: 0 1px 0 rgba(10, 15, 30, .04);
  position: sticky;
  top: 98px;
}

.rocky-docNav__title {
  font-weight: 1000;
  margin-bottom: 10px
}

.rocky-docNav__link {
  display: block;
  padding: 10px 10px;
  border-radius: 16px;
  border: 1px solid transparent;
  font-weight: 950;
  font-size: 13px;
  color: rgba(39, 50, 74, .92);
}

.rocky-docNav__link:hover {
  background: rgba(11, 16, 32, .03);
  border-color: rgba(11, 16, 32, .10);
}

.rocky-doc {
  padding: 14px 0 46px
}

.rocky-docCard {
  border-radius: var(--rocky-r1);
  border: 1px solid rgba(11, 16, 32, .12);
  background: rgba(255, 255, 255, .76);
  padding: 14px;
}

.rocky-docBlock {
  padding: 10px 10px 12px
}

.rocky-docText {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(39, 50, 74, .84);
  font-weight: 850
}

.rocky-note {
  margin-top: 12px;
  border-radius: 20px;
  border: 1px solid rgba(11, 16, 32, .12);
  background: rgba(249, 115, 22, .10);
  padding: 12px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.rocky-note__icon {
  width: 36px;
  height: 36px;
  border-radius: 16px;
  border: 1px solid rgba(11, 16, 32, .12);
  background:
    radial-gradient(14px 14px at 35% 30%, rgba(255, 255, 255, .86), rgba(255, 255, 255, 0) 60%),
    linear-gradient(135deg, rgba(249, 115, 22, .86), rgba(124, 58, 237, .22));
}

.rocky-note__text {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(39, 50, 74, .84);
  font-weight: 900
}

.rocky-docCols {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.rocky-docCol {
  border-radius: 20px;
  border: 1px solid rgba(11, 16, 32, .12);
  background: rgba(255, 255, 255, .86);
  padding: 12px;
}

.rocky-docCol__cap {
  font-size: 12px;
  font-weight: 1000;
  color: rgba(39, 50, 74, .70)
}

.rocky-docCol__title {
  margin-top: 8px;
  font-weight: 1000
}

.rocky-docCol__text {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(39, 50, 74, .84);
  font-weight: 850
}

.rocky-mail {
  margin-top: 12px;
  border-radius: 20px;
  border: 1px solid rgba(6, 182, 212, .22);
  background: rgba(6, 182, 212, .08);
  padding: 12px;
}

.rocky-mail__cap {
  font-size: 12px;
  font-weight: 1000;
  color: rgba(39, 50, 74, .70)
}

.rocky-mail__val {
  margin-top: 8px;
  font-weight: 1000;
  font-size: 16px
}

.rocky-mail__note {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(39, 50, 74, .72);
  font-weight: 900
}

.rocky-stampLine {
  margin-top: 12px;
  border-radius: 20px;
  border: 1px solid rgba(11, 16, 32, .12);
  background: rgba(11, 16, 32, .03);
  padding: 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.rocky-stampLine__k {
  font-size: 12px;
  font-weight: 1000;
  color: rgba(39, 50, 74, .70)
}

.rocky-stampLine__v {
  font-size: 12px;
  font-weight: 1000;
  color: rgba(39, 50, 74, .92)
}

.rocky-docActions {
  padding: 12px 10px 4px;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.rocky-bullets {
  margin-top: 12px;
  display: grid;
  gap: 10px
}

.rocky-bullet {
  display: flex;
  gap: 10px;
  align-items: flex-start
}

.rocky-bullet__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(34, 197, 94, .90), rgba(6, 182, 212, .80));
  margin-top: 4px;
}

.rocky-bullet__txt {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(39, 50, 74, .84);
  font-weight: 900
}

.rocky-contact {
  padding: 22px 0 46px
}

.rocky-contact__grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
  align-items: start;
}

.rocky-contact__cards {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.rocky-contactCard {
  border-radius: var(--rocky-r1);
  border: 1px solid rgba(11, 16, 32, .12);
  background: rgba(255, 255, 255, .76);
  padding: 14px;
}

.rocky-contactCard--alt {
  background:
    radial-gradient(520px 240px at 0% 0%, rgba(124, 58, 237, .12), rgba(124, 58, 237, 0) 62%),
    rgba(255, 255, 255, .76);
}

.rocky-contactCard__cap {
  font-size: 12px;
  font-weight: 1000;
  color: rgba(39, 50, 74, .70)
}

.rocky-contactCard__val {
  margin-top: 8px;
  font-weight: 1000
}

.rocky-contactCard__note {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(39, 50, 74, .72);
  font-weight: 900
}

.rocky-safe {
  margin-top: 12px;
  border-radius: var(--rocky-r1);
  border: 1px solid rgba(249, 115, 22, .22);
  background: rgba(249, 115, 22, .10);
  padding: 14px;
}

.rocky-safe__cap {
  font-size: 12px;
  font-weight: 1000;
  color: rgba(39, 50, 74, .70)
}

.rocky-safe__title {
  margin-top: 8px;
  font-weight: 1000;
  font-size: 18px
}

.rocky-safe__text {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(39, 50, 74, .84);
  font-weight: 900
}

.rocky-aside {
  border-radius: var(--rocky-r1);
  border: 1px solid rgba(11, 16, 32, .12);
  background: rgba(255, 255, 255, .76);
  padding: 14px;
  box-shadow: 0 1px 0 rgba(10, 15, 30, .04);
}

.rocky-aside__cap {
  font-size: 12px;
  font-weight: 1000;
  color: rgba(39, 50, 74, .70)
}

.rocky-aside__link {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border-radius: 20px;
  border: 1px solid rgba(11, 16, 32, .12);
  background: rgba(255, 255, 255, .86);
  font-weight: 1000;
}

.rocky-aside__txt {
  color: rgba(39, 50, 74, .92)
}

.rocky-aside__arr {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(11, 16, 32, .12);
  background: rgba(11, 16, 32, .03);
  position: relative;
}

.rocky-aside__arr::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(39, 50, 74, .62);
  border-bottom: 2px solid rgba(39, 50, 74, .62);
  transform: translate(-55%, -50%) rotate(-45deg);
}

.rocky-aside__hr {
  margin: 12px 0;
  height: 1px;
  background: rgba(11, 16, 32, .10)
}

.rocky-box {
  margin-top: 12px;
  border-radius: var(--rocky-r1);
  border: 1px solid rgba(11, 16, 32, .12);
  background: rgba(11, 16, 32, .03);
  padding: 14px;
}

.rocky-box__cap {
  font-size: 12px;
  font-weight: 1000;
  color: rgba(39, 50, 74, .70)
}

.rocky-box__title {
  margin-top: 8px;
  font-weight: 1000;
  font-size: 18px
}

.rocky-box__text {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(39, 50, 74, .84);
  font-weight: 900
}

.rocky-footer {
  border-top: 1px solid rgba(11, 16, 32, .12);
  background: rgba(255, 255, 255, .74);
}

.rocky-footer__grid {
  padding: 22px 0;
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  gap: 14px;
  align-items: start;
}

.rocky-footer__brand {
  display: flex;
  gap: 12px;
  align-items: flex-start
}

.rocky-footer__logo {
  width: 38px;
  height: 38px;
  border-radius: 16px;
  border: 1px solid rgba(11, 16, 32, .12);
  background:
    radial-gradient(14px 14px at 30% 28%, rgba(255, 255, 255, .86), rgba(255, 255, 255, 0) 60%),
    linear-gradient(135deg, rgba(11, 16, 32, .06), rgba(11, 16, 32, .01));
}

.rocky-footer__stack {
  display: flex;
  flex-direction: column;
  gap: 4px
}

.rocky-footer__name {
  font-weight: 1000
}

.rocky-footer__desc {
  font-size: 13px;
  color: rgba(39, 50, 74, .72);
  line-height: 1.5;
  font-weight: 850
}

.rocky-footer__fine {
  margin-top: 10px;
  font-size: 12px;
  color: rgba(39, 50, 74, .72);
  line-height: 1.6;
  font-weight: 850;
  max-width: 84ch
}

.rocky-footer__right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

.rocky-footer__link {
  font-size: 13px;
  font-weight: 1000;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(11, 16, 32, .12);
  background: rgba(255, 255, 255, .78);
}

.rocky-footer__link:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(10, 15, 30, .10)
}

.rocky-footer__bar {
  border-top: 1px solid rgba(11, 16, 32, .10);
  padding: 12px 0 16px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.rocky-footer__small {
  font-size: 12px;
  font-weight: 950;
  color: rgba(39, 50, 74, .82)
}

.rocky-footer__small--muted {
  color: rgba(39, 50, 74, .62)
}

@media (max-width: 980px) {
  .rocky-header__row {
    grid-template-columns: 1fr;
    gap: 10px
  }

  .rocky-nav {
    justify-content: flex-start
  }

  .rocky-header__actions {
    justify-content: flex-start
  }

  .rocky-ticker {
    justify-content: flex-start
  }

  .rocky-hero__grid {
    grid-template-columns: 1fr;
    gap: 14px
  }

  .rocky-cards {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    margin-top: 12px
  }

  .rocky-metrics {
    grid-template-columns: 1fr
  }

  .rocky-strip {
    grid-template-columns: 1fr
  }

  .rocky-mag__grid {
    grid-template-columns: 1fr
  }

  .rocky-flow__footer {
    grid-template-columns: 1fr
  }

  .rocky-tactics {
    grid-template-columns: 1fr
  }

  .rocky-advice {
    grid-template-columns: 1fr
  }

  .rocky-shots {
    grid-template-columns: 1fr
  }

  .rocky-shot--wide {
    grid-column: auto
  }

  .rocky-faq__grid {
    grid-template-columns: 1fr
  }

  .rocky-docHero__grid {
    grid-template-columns: 1fr
  }

  .rocky-docHero__quick {
    grid-template-columns: 1fr
  }

  .rocky-docNav {
    position: relative;
    top: auto
  }

  .rocky-docCols {
    grid-template-columns: 1fr
  }

  .rocky-contact__grid {
    grid-template-columns: 1fr
  }

  .rocky-contact__cards {
    grid-template-columns: 1fr
  }

  .rocky-footer__grid {
    grid-template-columns: 1fr
  }

  .rocky-footer__right {
    align-items: flex-start
  }
}

@media (max-width: 520px) {
  .rocky-h1 {
    font-size: 40px
  }

  .rocky-h1--doc {
    font-size: 34px
  }

  .rocky-h2 {
    font-size: 26px
  }

  .rocky-ctaBand__actions {
    justify-content: flex-start
  }
}