.tr-hero-note {
max-width: 640px;
margin: 16px 0 0;
font-size: 16px;
font-weight: 500;
line-height: 1.45;
color: var(--muted);
text-wrap: pretty;
}
.tr-hero-tags {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 32px;
}
.tr-hero-tag {
display: inline-flex;
align-items: center;
gap: 9px;
height: 40px;
padding: 0 18px 0 14px;
border-radius: 99px;
background: var(--lm-card);
box-shadow: 0 1px 2px rgba(1, 3, 9, 0.06);
font-size: 14px;
font-weight: 500;
color: var(--ink);
white-space: nowrap;
}
.tr-hero-tag svg {
flex: none;
color: var(--red);
}
.tr-popular {
margin-top: 72px;
}
.tr-popular-title {
margin: 0 0 24px;
font-family: var(--lm-display);
font-size: 24px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.03em;
text-align: center;
color: var(--ink);
}
.tr-routes {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--grid-gap);
}
.tr-route {
display: grid;
grid-template-columns: 36px minmax(0, 1fr);
gap: 16px;
align-items: start;
padding: 24px;
border-radius: 32px;
background: var(--lm-card);
color: inherit;
text-decoration: none;
transition:
transform var(--lm-dur) var(--lm-ease),
box-shadow var(--lm-dur) var(--lm-ease);
}
.tr-route:hover {
transform: translateY(-4px);
box-shadow:
0 9px 20px rgba(1, 3, 9, 0.08),
0 36px 36px rgba(1, 3, 9, 0.05);
}
.tr-route:focus-visible {
outline: 2px solid var(--red);
outline-offset: 4px;
}
.tr-route-num {
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 99px;
background: var(--red);
font-family: var(--lm-display);
font-size: 15px;
font-weight: 700;
color: #fff;
}
.tr-route-body b {
display: block;
margin-bottom: 6px;
font-family: var(--lm-display);
font-size: 18px;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.02em;
color: var(--ink);
}
.tr-route-body span {
font-size: 14px;
font-weight: 500;
line-height: 1.45;
color: var(--muted);
}
@media (max-width: 1023px) {
.tr-routes {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
}
@media (max-width: 809px) {
.tr-popular {
margin-top: 48px;
}
.tr-hero-tag {
white-space: normal;
}
.tr-route {
padding: 20px;
border-radius: 24px;
}
}
.tr-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.tr-tag {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 4px 12px;
border-radius: 99px;
background: var(--warm);
font-size: 12px;
font-weight: 600;
line-height: 1.2;
color: var(--muted);
}
.tr-tag-red {
background: #fdeceb;
color: #c53c33;
}
.tr-programs {
scroll-margin-top: 96px;
}
.tr-tabs input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.tr-tab-labels {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 32px;
}
.tr-tab-labels label {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 10px 20px;
border-radius: 99px;
background: #fff;
font-size: 14px;
font-weight: 600;
line-height: 1.2;
color: var(--ink);
cursor: pointer;
transition:
background-color var(--lm-dur) var(--lm-ease),
color var(--lm-dur) var(--lm-ease);
}
.tr-tab-labels label:hover {
color: var(--red);
}
#tr-tab-comm:checked ~ .tr-tab-labels label[for='tr-tab-comm'],
#tr-tab-lead:checked ~ .tr-tab-labels label[for='tr-tab-lead'],
#tr-tab-team:checked ~ .tr-tab-labels label[for='tr-tab-team'] {
background: #010309;
color: #fff;
}
#tr-tab-comm:focus-visible ~ .tr-tab-labels label[for='tr-tab-comm'],
#tr-tab-lead:focus-visible ~ .tr-tab-labels label[for='tr-tab-lead'],
#tr-tab-team:focus-visible ~ .tr-tab-labels label[for='tr-tab-team'] {
outline: 2px solid var(--red);
outline-offset: 2px;
}
.tr-panel {
display: none;
}
#tr-tab-comm:checked ~ .tr-panels #tr-panel-comm,
#tr-tab-lead:checked ~ .tr-panels #tr-panel-lead,
#tr-tab-team:checked ~ .tr-panels #tr-panel-team {
display: block;
}
.tr-panel-head {
margin-bottom: 24px;
}
body main .tr-panel h3.tr-panel-t {
margin: 0 0 8px;
font-family: var(--lm-display);
font-size: 24px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.03em;
color: var(--ink);
}
.tr-panel-lead {
max-width: 640px;
margin: 0;
font-size: 15px;
font-weight: 500;
line-height: 1.45;
color: var(--muted);
}
.tr-md {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
column-gap: var(--grid-gap);
row-gap: 4px;
align-items: start;
}
.tr-md--4 {
grid-template-rows: repeat(4, auto) 1fr;
}
.tr-md--6 {
grid-template-rows: repeat(6, auto) 1fr;
}
.tr-md-item {
grid-column: 1;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border-radius: 16px;
font-size: 15px;
font-weight: 600;
line-height: 1.3;
color: var(--ink);
cursor: pointer;
transition:
background-color var(--lm-dur) var(--lm-ease),
color var(--lm-dur) var(--lm-ease);
}
.tr-md-item:hover {
background: rgba(255, 255, 255, 0.7);
}
.tr-md-n {
flex: none;
font-family: var(--lm-display);
font-size: 13px;
font-weight: 700;
opacity: 0.45;
}
.tr-md input:checked + .tr-md-item {
background: #010309;
color: #fff;
}
.tr-md input:focus-visible + .tr-md-item {
outline: 2px solid var(--red);
outline-offset: 2px;
}
.tr-md-detail {
display: none;
grid-column: 2;
grid-row: 1 / -1;
flex-direction: column;
min-width: 0;
padding: 36px;
border-radius: 32px;
background: #fff;
}
.tr-md input:checked + .tr-md-item + .tr-md-detail {
display: flex;
}
body main .tr-md-detail h4.tr-md-t {
margin: 0 0 14px;
font-family: var(--lm-display);
font-size: 28px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.04em;
color: var(--ink);
}
.tr-md-text {
margin: 0 0 24px;
font-size: 17px;
font-weight: 500;
line-height: 1.55;
color: var(--muted);
}
.tr-md-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid var(--border);
font-size: 14px;
font-weight: 600;
color: var(--ink);
}
.tr-consult-link {
flex: none;
padding: 12px 22px;
border: 0;
border-radius: 99px;
background: #010309;
font-family: var(--lm-body);
font-size: 14px;
font-weight: 600;
color: #fff;
white-space: nowrap;
cursor: pointer;
text-decoration: none;
transition: background-color var(--lm-dur) var(--lm-ease);
}
.tr-consult-link:hover {
background: var(--red);
color: #fff;
}
@media (max-width: 809px) {
.tr-tab-labels {
margin-bottom: 24px;
}
.tr-md,
.tr-md--4,
.tr-md--6 {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: none;
}
.tr-md-detail {
grid-column: 1;
grid-row: auto;
margin: 4px 0 12px;
padding: 24px;
border-radius: 24px;
}
body main .tr-md-detail h4.tr-md-t {
font-size: 22px;
}
.tr-md-text {
font-size: 15px;
}
}
body main .tr-top .section-lead {
max-width: 720px;
margin-top: 16px;
}
.tr-top-actions {
display: flex;
justify-content: center;
margin: 32px 0 48px;
}
.tr-axis {
margin: 0 0 40px;
}
.tr-axis-ends {
display: flex;
justify-content: space-between;
gap: 16px;
margin-bottom: 10px;
font-size: 13px;
font-weight: 600;
color: var(--muted);
}
.tr-axis-line {
height: 8px;
border-radius: 99px;
background: linear-gradient(90deg, var(--ds-gray-100) 0%, var(--ds-accent-100) 45%, var(--ds-accent-400) 100%);
}
.tr-axis-marks {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--grid-gap);
margin-top: -22px;
}
.tr-axis-mark {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center;
color: inherit;
text-decoration: none;
}
.tr-axis-mark:focus-visible {
outline: 2px solid var(--red);
outline-offset: 4px;
border-radius: 12px;
}
.tr-axis-dot {
display: grid;
place-items: center;
width: 36px;
height: 36px;
border: 4px solid var(--ds-page-bg);
border-radius: 50%;
background: #010309;
font-family: var(--lm-display);
font-size: 13px;
font-weight: 700;
color: #fff;
}
.tr-axis-mark:nth-child(2) .tr-axis-dot {
background: var(--ds-accent-500);
}
.tr-axis-mark:nth-child(3) .tr-axis-dot {
background: var(--ds-accent-600);
}
.tr-axis-cap {
font-family: var(--lm-display);
font-size: 16px;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.02em;
color: var(--ink);
transition: color var(--lm-dur) var(--lm-ease);
}
.tr-axis-mark:hover .tr-axis-cap {
color: var(--red);
}
.tr-feature {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--grid-gap);
margin: 0 -24px var(--grid-gap);
padding: 32px 24px;
border-radius: 40px;
background: var(--lm-card);
box-shadow:
0 -10px 30px rgba(1, 3, 9, 0.06),
0 1px 0 var(--border);
scroll-margin-top: 96px;
}
.tr-feature:last-child {
margin-bottom: 0;
}
.tr-feature-main {
grid-column: 1 / 3;
display: flex;
flex-direction: column;
min-width: 0;
}
.tr-feature-num {
display: grid;
place-items: center;
align-self: flex-start;
width: 56px;
height: 36px;
margin-bottom: 16px;
border-radius: 99px;
background: #010309;
font-family: var(--lm-display);
font-size: 16px;
font-weight: 500;
letter-spacing: -0.04em;
color: #fff;
}
body main section.tr-top article.tr-feature h2.tr-feature-t.tr-feature-t.tr-feature-t {
margin: 0 0 14px;
font-family: var(--lm-display);
font-size: 28px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.04em;
color: var(--ink);
text-wrap: balance;
}
.tr-feature-paras {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--grid-gap);
}
.tr-feature-text {
margin: 0;
font-size: 14px;
font-weight: 500;
line-height: 1.5;
color: var(--muted);
}
.tr-feature-side {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px var(--grid-gap);
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.tr-mini-t {
margin-bottom: 3px;
font-family: var(--lm-display);
font-size: 15px;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.02em;
color: var(--ink);
}
.tr-mini p {
margin: 0;
font-size: 13px;
font-weight: 500;
line-height: 1.45;
color: var(--muted);
}
.tr-feature-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 20px;
}
.tr-feature-foot .tr-tags {
flex: 1 1 280px;
}
.tr-art {
grid-column: 3;
display: flex;
flex-direction: column;
min-width: 0;
padding: 16px;
border-radius: 24px;
background: var(--ds-gray-100);
}
.tr-art-k {
margin: 2px 4px 12px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.tr-ui {
display: flex;
flex-direction: column;
gap: 12px;
}
.tr-ui-win {
display: block;
padding: 16px;
border-radius: 16px;
background: #fff;
box-shadow:
0 1px 2px rgba(1, 3, 9, 0.06),
0 8px 20px rgba(1, 3, 9, 0.05);
color: var(--ink);
}
.tr-ui-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 4px;
}
.tr-ui-ava {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--ds-accent-50);
font-size: 13px;
font-weight: 700;
color: var(--ds-accent-600);
}
.tr-ui-label {
display: block;
font-family: var(--lm-display);
font-size: 14px;
font-weight: 700;
letter-spacing: -0.01em;
}
.tr-ui-sub {
display: block;
margin-top: 2px;
font-size: 11px;
font-weight: 500;
color: var(--muted);
}
.tr-ui-scale {
display: grid;
gap: 5px;
margin-top: 10px;
}
.tr-ui-name {
font-size: 12px;
font-weight: 600;
color: var(--muted);
}
.tr-ui-bar {
display: block;
height: 8px;
overflow: hidden;
border-radius: 99px;
background: var(--ds-gray-100);
}
.tr-ui-bar > span {
display: block;
height: 100%;
border-radius: 99px;
background: var(--ds-gradient-accent);
}
.tr-ui-w78 { width: 78%; }
.tr-ui-w62 { width: 62%; }
.tr-ui-w84 { width: 84%; }
.tr-ui-w41 { width: 41%; }
.tr-ui-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.tr-ui-chip {
padding: 6px 10px;
border-radius: 99px;
background: #fff;
font-size: 11.5px;
font-weight: 600;
color: var(--ink);
}
.tr-ui-chip--accent {
background: var(--ds-accent-600);
color: #fff;
}
.tr-ui-matrix {
position: relative;
display: block;
height: 160px;
margin-top: 12px;
border-radius: 12px;
background:
linear-gradient(90deg, transparent calc(50% - 0.5px), var(--ds-gray-200) calc(50% - 0.5px), var(--ds-gray-200) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
linear-gradient(0deg, transparent calc(50% - 0.5px), var(--ds-gray-200) calc(50% - 0.5px), var(--ds-gray-200) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
linear-gradient(135deg, var(--ds-gray-25) 0%, var(--ds-accent-50) 100%);
}
.tr-ui-ax {
position: absolute;
font-size: 10.5px;
font-weight: 600;
color: var(--muted);
}
.tr-ui-ax--x { right: 8px; bottom: 6px; }
.tr-ui-ax--y { left: 6px; top: 8px; }
.tr-ui-dot {
position: absolute;
display: grid;
place-items: center;
width: 26px;
height: 26px;
border: 2px solid #fff;
border-radius: 50%;
background: #010309;
box-shadow: 0 2px 6px rgba(1, 3, 9, 0.15);
font-size: 11px;
font-weight: 700;
color: #fff;
}
.tr-ui-d0 { left: 16%; top: 22%; }
.tr-ui-d1 { left: 34%; top: 48%; }
.tr-ui-d2 { left: 58%; top: 30%; background: var(--ds-accent-500); }
.tr-ui-d3 { left: 72%; top: 62%; background: var(--ds-accent-600); }
.tr-ui-d4 { left: 24%; top: 70%; }
.tr-ui-d5 { left: 84%; top: 24%; background: var(--ds-accent-400); }
.tr-ui-hmap {
display: grid;
grid-template-columns: auto repeat(5, minmax(0, 1fr));
gap: 5px;
align-items: center;
margin-top: 12px;
}
.tr-ui-hm-n {
padding-right: 6px;
font-size: 11px;
font-weight: 600;
color: var(--muted);
}
.tr-ui-hm {
height: 22px;
border-radius: 6px;
}
.tr-ui-l1 { background: var(--ds-accent-50); }
.tr-ui-l2 { background: var(--ds-accent-200); }
.tr-ui-l3 { background: var(--ds-accent-500); }
.tr-ui-check {
display: grid;
gap: 6px;
margin: 0;
padding: 12px 14px;
border-radius: 16px;
background: #fff;
list-style: none;
}
.tr-ui-check li {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
font-weight: 600;
color: var(--muted);
}
.tr-ui-check li.is-done {
color: var(--ink);
}
.tr-ui-ck {
flex: none;
width: 18px;
height: 18px;
border: 2px solid var(--ds-gray-200);
border-radius: 6px;
}
.is-done .tr-ui-ck {
border-color: var(--ds-success-600);
background: var(--ds-success-600)
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
no-repeat center / 12px;
}
.tr-dark {
background: #010309;
}
.tr-dark .tr-feature-num {
background: var(--red);
}
body main section.tr-top article.tr-dark h2.tr-feature-t.tr-feature-t.tr-feature-t,
.tr-dark .tr-mini-t {
color: #fff;
}
.tr-dark .tr-feature-text,
.tr-dark .tr-mini p {
color: rgba(255, 255, 255, 0.72);
}
.tr-dark .tr-feature-side {
border-top-color: rgba(255, 255, 255, 0.14);
}
.tr-dark .tr-art {
background: rgba(255, 255, 255, 0.06);
}
.tr-dark .tr-art-k {
color: rgba(255, 255, 255, 0.6);
}
.tr-dark .tr-tag {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.tr-dark .tr-tag-red {
background: var(--red);
}
@media (min-width: 1200px) and (min-height: 720px) and (prefers-reduced-motion: no-preference) {
.tr-stack .tr-feature {
position: sticky;
top: calc(var(--ds-header-h) + 16px);
scroll-margin-top: calc(var(--ds-header-h) + 16px);
}
.tr-stack .tr-feature:nth-child(2) {
top: calc(var(--ds-header-h) + 40px);
scroll-margin-top: calc(var(--ds-header-h) + 40px);
}
.tr-stack .tr-feature:nth-child(3) {
top: calc(var(--ds-header-h) + 64px);
scroll-margin-top: calc(var(--ds-header-h) + 64px);
}
}
@media (max-width: 1199px) {
.tr-feature {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin-inline: 0;
padding: 36px;
}
.tr-feature-main,
.tr-art {
grid-column: 1;
}
}
@media (max-width: 809px) {
.tr-top-actions {
margin: 24px 0 32px;
}
.tr-top-actions .btn-white {
width: 100%;
justify-content: center;
}
.tr-axis {
margin-bottom: 28px;
}
.tr-axis-ends {
font-size: 12px;
}
.tr-axis-marks {
gap: 8px;
}
.tr-axis-cap {
font-size: 13px;
}
.tr-feature {
padding: 28px 24px;
border-radius: 28px;
margin-bottom: 12px;
box-shadow: none;
}
body main section.tr-top article.tr-feature h2.tr-feature-t.tr-feature-t.tr-feature-t {
font-size: 26px;
}
.tr-feature-paras,
.tr-feature-side {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.tr-feature-foot .btn-red {
width: 100%;
justify-content: center;
white-space: normal;
text-align: center;
}
.tr-art {
padding: 12px;
border-radius: 20px;
}
}
.tr-tools-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--grid-gap);
}
.tr-tool {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
padding: 28px;
border-radius: 32px;
background: var(--lm-card);
color: inherit;
text-decoration: none;
transition:
transform var(--lm-dur) var(--lm-ease),
box-shadow var(--lm-dur) var(--lm-ease);
}
.tr-tool:hover {
transform: translateY(-4px);
box-shadow:
0 9px 20px rgba(1, 3, 9, 0.08),
0 36px 36px rgba(1, 3, 9, 0.05);
}
.tr-tool:focus-visible {
outline: 2px solid var(--red);
outline-offset: 4px;
}
.tr-tool::after {
content: '';
position: absolute;
top: 28px;
right: 28px;
width: 40px;
height: 40px;
border-radius: 99px;
background: #010309
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M5 11l6-6M6 5h5v5' stroke='%23fafafa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
no-repeat center / 16px;
transition:
background-color var(--lm-dur) var(--lm-ease),
transform var(--lm-dur) var(--lm-ease);
}
.tr-tool:hover::after {
background-color: var(--red);
transform: rotate(45deg);
}
.tr-tool-badge {
align-self: flex-start;
display: inline-flex;
align-items: center;
height: 40px;
padding: 0 14px;
border-radius: 12px;
font-family: var(--lm-display);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.02em;
color: #fff;
}
.tr-tool-badge--pcm { background: #e0552e; }
.tr-tool-badge--tla { background: #166b7c; }
.tr-tool-badge--hogan { background: #1c3a63; }
.tr-tool-badge--rmp { background: #2552a0; }
.tr-tool-badge--basepro { background: #386348; }
.tr-tool-badge--tds { background: #1f7a6b; }
.tr-tool-name {
margin: 28px 0 10px;
font-family: var(--lm-display);
font-size: 20px;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.03em;
color: var(--ink);
overflow-wrap: anywhere;
}
.tr-tool-desc {
font-size: 15px;
font-weight: 500;
line-height: 1.45;
color: var(--muted);
}
@media (max-width: 809px) {
.tr-tools-grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.tr-tool {
padding: 24px;
border-radius: 24px;
}
.tr-tool::after {
top: 24px;
right: 24px;
}
}
.tr-process {
--tr-flow-gap: 16px;
}
.tr-steps {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
column-gap: var(--tr-flow-gap);
margin: 48px 0 0;
padding: 0;
list-style: none;
}
.tr-step {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
margin: 108px 0 64px;
}
.tr-step-card {
position: relative;
flex: 1;
padding: 22px 20px;
border-radius: 28px;
background: var(--lm-card);
}
.tr-step-num {
display: grid;
place-items: center;
width: 36px;
height: 36px;
margin-bottom: 16px;
border-radius: 99px;
background: var(--red);
font-family: var(--lm-display);
font-size: 15px;
font-weight: 700;
color: #fff;
}
body main .tr-step h3.tr-step-t {
margin: 0 0 8px;
font-family: var(--lm-display);
font-size: 17px;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.02em;
color: var(--ink);
}
.tr-step-card p {
margin: 0;
font-size: 14px;
font-weight: 500;
line-height: 1.45;
color: var(--muted);
}
.tr-step-card--opt {
border: 2px dashed var(--ds-gray-300);
background: transparent;
}
.tr-step-if {
position: absolute;
top: -12px;
left: 16px;
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 99px;
background: var(--ds-page-bg);
box-shadow: 0 0 0 1px var(--ds-gray-200);
font-size: 11.5px;
font-weight: 600;
color: var(--muted);
}
.tr-step-card--dark {
background: #010309;
}
body main .tr-step-card--dark h3.tr-step-t {
color: #fff;
}
.tr-step-card--dark p {
color: rgba(255, 255, 255, 0.72);
}
.tr-step-card--dark .tr-step-num {
background: var(--ds-accent-400);
}
.tr-phase {
position: absolute;
top: -108px;
left: 0;
display: flex;
align-items: center;
justify-content: center;
height: 44px;
margin: 0;
padding: 0 16px;
border-radius: 99px;
font-family: var(--lm-display);
font-size: 15px;
font-weight: 700;
letter-spacing: -0.01em;
}
.tr-phase--before {
width: calc(300% + 2 * var(--tr-flow-gap));
background: var(--ds-accent-50);
color: var(--ds-accent-700);
}
.tr-phase--workshop {
width: 100%;
background: var(--ds-accent-400);
color: #fff;
}
.tr-phase--after {
width: calc(200% + var(--tr-flow-gap));
background: var(--ds-accent-700);
color: #fff;
}
.tr-flow-note {
position: absolute;
width: calc(200% + 2 * var(--tr-flow-gap));
height: 52px;
margin: 0;
}
.tr-flow-note--bypass {
top: -52px;
left: 50%;
}
.tr-flow-note--loop {
top: 100%;
right: 50%;
}
.tr-flow-arc {
position: absolute;
left: 0;
right: 0;
border: 2px dashed var(--ds-accent-400);
}
.tr-flow-note--bypass .tr-flow-arc {
top: 18px;
bottom: 0;
border-bottom: 0;
border-radius: 16px 16px 0 0;
}
.tr-flow-note--loop .tr-flow-arc {
top: 0;
bottom: 18px;
border-top: 0;
border-radius: 0 0 16px 16px;
}
.tr-flow-arc::after {
content: '';
position: absolute;
border: 6px solid transparent;
}
.tr-flow-note--bypass .tr-flow-arc::after {
right: -8px;
bottom: -2px;
border-top: 8px solid var(--ds-accent-400);
border-bottom: 0;
}
.tr-flow-note--loop .tr-flow-arc::after {
left: -8px;
top: -2px;
border-top: 0;
border-bottom: 8px solid var(--ds-accent-400);
}
.tr-flow-label {
position: absolute;
left: 50%;
display: inline-flex;
align-items: center;
padding: 3px 12px;
border-radius: 99px;
background: var(--ds-page-bg);
font-size: 12.5px;
font-weight: 600;
white-space: nowrap;
color: var(--ds-accent-600);
transform: translateX(-50%);
}
.tr-flow-note--bypass .tr-flow-label {
top: 6px;
}
.tr-flow-note--loop .tr-flow-label {
bottom: 6px;
}
@media (max-width: 1199px) {
.tr-steps {
grid-template-columns: repeat(3, minmax(0, 1fr));
row-gap: 16px;
}
.tr-step {
margin: 56px 0 0;
}
.tr-step--4,
.tr-step--5 {
grid-column: 1;
}
.tr-phase {
top: -56px;
justify-content: flex-start;
}
.tr-phase--before,
.tr-phase--workshop,
.tr-phase--after {
width: calc(300% + 2 * var(--tr-flow-gap));
}
.tr-flow-note {
position: static;
width: auto;
height: auto;
margin-top: 12px;
}
.tr-flow-arc {
display: none;
}
.tr-flow-label {
position: static;
border: 1.5px dashed var(--ds-accent-400);
white-space: normal;
transform: none;
}
}
@media (max-width: 809px) {
.tr-steps {
position: relative;
grid-template-columns: minmax(0, 1fr);
row-gap: 12px;
margin-top: 32px;
padding-left: 28px;
}
.tr-steps::before {
content: '';
position: absolute;
top: 8px;
bottom: 8px;
left: 9px;
width: 2px;
border-radius: 2px;
background: linear-gradient(180deg, var(--ds-accent-100), var(--ds-accent-700));
}
.tr-step {
margin: 0;
}
.tr-step--4,
.tr-step--5 {
grid-column: auto;
}
.tr-phase {
position: static;
justify-content: flex-start;
height: 36px;
margin: 8px 0 12px -28px;
font-size: 14px;
}
.tr-phase--before,
.tr-phase--workshop,
.tr-phase--after {
width: auto;
}
.tr-step-card {
padding: 20px;
border-radius: 22px;
}
.tr-step-card::before {
content: '';
position: absolute;
top: 28px;
left: -24px;
width: 12px;
height: 12px;
border: 2px solid var(--ds-page-bg);
border-radius: 50%;
background: var(--red);
}
.tr-step-card--opt::before {
left: -26px;
}
.tr-step-if {
position: static;
margin-bottom: 12px;
}
.tr-flow-label {
align-self: flex-start;
}
}
body main section.faq .section-lead {
max-width: 640px;
margin-top: 16px;
margin-bottom: 48px;
}