/* Five controls: approved Epic-infographics route component. */
body.tr-home-v3 .cc {
  --tr-bg: #0B0407;
  --tr-bg-2: #120509;
  --tr-bg-3: #1E0810;
  --tr-pink: #FF3E8F;
  --tr-pink-soft: #FF7FB2;
  --tr-ink: #F2EFEA;
  --tr-muted: #B4A3AA;
  --tr-muted-2: #9A7C87;
  --tr-glass: rgba(18, 5, 9, .42);
  --tr-glass-on: rgba(255, 62, 143, .13);
  --tr-glass-edge: rgba(255, 225, 238, .14);
  --tr-glass-edge-on: rgba(255, 225, 238, .28);
  position: relative;
  overflow: hidden;
  max-width: 1920px;
  margin: 0 auto;
  padding: 44px 56px 36px;
  color: var(--tr-ink);
  background: radial-gradient(110% 90% at 6% -10%, var(--tr-bg-3) 0%, var(--tr-bg-2) 48%, var(--tr-bg) 100%);
}

body.tr-home-v3 .cc__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 56px; flex-wrap: wrap; }
body.tr-home-v3 .cc__eyebrow { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--tr-pink); font: 600 12px/1 var(--ui); letter-spacing: .32em; text-transform: uppercase; }
body.tr-home-v3 .cc__eyebrow::before { width: 26px; height: 1px; content: ""; background: var(--tr-pink); }
body.tr-home-v3 .cc__h2 { max-width: 820px; margin: 14px 0 0; color: var(--tr-ink); font-family: var(--serif); font-size: clamp(32px, 4.2vw, 58px); font-weight: 500; line-height: 1.04; letter-spacing: -.02em; }
body.tr-home-v3 .cc__h2 em { color: var(--tr-pink-soft); font-style: italic; }
body.tr-home-v3 .cc__legend { flex: 0 0 380px; padding: 20px 22px; border: 1px solid rgba(255, 62, 143, .26); border-radius: 14px; background: rgba(255, 62, 143, .05); }
body.tr-home-v3 .cc__legend h3 { margin: 0; color: var(--tr-ink); font-family: var(--serif); font-size: 21px; font-weight: 500; }
body.tr-home-v3 .cc__legend ul { display: grid; gap: 9px; margin: 14px 0 0; padding: 0; color: var(--tr-muted); font: 13px/1.3 var(--ui); list-style: none; }
body.tr-home-v3 .cc__legend li { display: flex; align-items: center; gap: 10px; }
body.tr-home-v3 .cc__legend i { width: 9px; height: 9px; flex: 0 0 auto; }
body.tr-home-v3 .cc__route { position: relative; margin-top: 26px; }
body.tr-home-v3 .cc__wave { display: none; }
body.tr-home-v3 .cc__step { cursor: pointer; }
body.tr-home-v3 .cc__node { position: relative; z-index: 2; display: flex; width: 68px; height: 68px; flex: 0 0 auto; align-items: center; justify-content: center; border: 1.5px solid rgba(255, 62, 143, .35); border-radius: 8px; background: #0B0407 !important; box-shadow: 0 0 14px rgba(0, 0, 0, .7); color: var(--tr-muted); font: 700 16px/1 var(--ui); letter-spacing: .08em; transition: all 220ms ease-out; }
body.tr-home-v3 .cc__step:hover .cc__node { border-color: rgba(255, 62, 143, .7); color: var(--tr-ink); }
body.tr-home-v3 .cc__step[aria-current="true"] .cc__node { border: 2px solid var(--tr-pink); border-radius: 8px; background: linear-gradient(145deg, #2E0B1F 0%, #120509 100%) !important; box-shadow: 0 0 24px rgba(255, 62, 143, .5), inset 0 0 16px rgba(255, 62, 143, .22); color: #FFFFFF !important; text-shadow: 0 0 10px rgba(255, 62, 143, .75); }
body.tr-home-v3 .cc__panel { position: relative; padding: 14px 16px; border: 1px solid var(--tr-glass-edge); border-radius: 16px; background: var(--tr-glass); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -14px 26px rgba(255,62,143,.08), 0 14px 34px rgba(0,0,0,.45); -webkit-backdrop-filter: blur(9px) saturate(1.5); backdrop-filter: blur(9px) saturate(1.5) url(#lg); transition: background 220ms ease-out, border-color 220ms ease-out; }
body.tr-home-v3 .cc__step[aria-current="true"] .cc__panel { border-color: var(--tr-glass-edge-on); background: var(--tr-glass-on); }
@supports not (backdrop-filter: blur(2px)) { body.tr-home-v3 .cc__panel { background: rgba(11,4,7,.94); } }
body.tr-home-v3 .cc__kicker { margin: 0; color: var(--tr-muted-2); font: 600 13px/1.2 var(--ui); letter-spacing: .26em; text-transform: uppercase; transition: color 220ms ease-out; }
body.tr-home-v3 .cc__step[aria-current="true"] .cc__kicker { color: var(--tr-pink); }
body.tr-home-v3 .cc__title { margin: 8px 0 0; color: var(--tr-ink); font: 500 26px/1.2 var(--serif); }
body.tr-home-v3 .cc__body { margin: 10px 0 0; color: var(--tr-muted); font: 14.5px/1.6 var(--ui); opacity: .58; text-wrap: pretty; transition: opacity 220ms ease-out; }
body.tr-home-v3 .cc__step[aria-current="true"] .cc__body { opacity: 1; }
body.tr-home-v3 .cc__fact { max-height: 0; overflow: hidden; margin-top: 0; padding-left: 12px; border-left: 2px solid var(--tr-pink); opacity: 0; transition: max-height 260ms ease-out, opacity 200ms ease-out, margin-top 260ms ease-out; }
body.tr-home-v3 .cc__step[aria-current="true"] .cc__fact { max-height: 150px; margin-top: 14px; opacity: 1; }
body.tr-home-v3 .cc__fact b { display: block; color: var(--tr-pink); font: 600 13px/1.2 var(--ui); letter-spacing: .26em; text-transform: uppercase; }
body.tr-home-v3 .cc__fact p { margin: 6px 0 0; color: var(--tr-ink); font: 13px/1.55 var(--ui); text-wrap: pretty; }
body.tr-home-v3 .cc__mock { display: none !important; }
body.tr-home-v3 .cc__step[data-mock="erecepta"][aria-current="true"] .cc__mock { display: none !important; }
body.tr-home-v3 .cc__foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 14px; padding-top: 16px; border-top: 1px solid rgba(255,62,143,.2); }
body.tr-home-v3 .cc__foot-tag { color: var(--tr-pink); font: 600 13px/1.2 var(--ui); letter-spacing: .24em; text-transform: uppercase; white-space: nowrap; } body.tr-home-v3 .cc__foot-note { color: var(--tr-muted); font: 13px/1.45 var(--ui); } body.tr-home-v3 .cc__foot-note span { color: var(--tr-pink-soft); }
@keyframes tr-five-draw { from { stroke-dashoffset: 2600; } to { stroke-dashoffset: 0; } } @keyframes tr-five-scan { 0% { transform: translateX(-6%); } 100% { transform: translateX(106%); } } @keyframes tr-five-pop { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes tr-five-blink { 0%,60% { opacity: 1; } 61%,100% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { body.tr-home-v3 .cc *, body.tr-home-v3 .cc *::before, body.tr-home-v3 .cc *::after { animation: none !important; transition: none !important; } }
@media (max-width: 1759px) { body.tr-home-v3 .cc { padding: 32px 20px 28px; } body.tr-home-v3 .cc__legend { flex: 1 1 100%; } body.tr-home-v3 .cc__steps { position: relative; display: grid; gap: 22px; margin-top: 24px; } body.tr-home-v3 .cc__steps::before { display: none !important; } body.tr-home-v3 .cc__step { position: relative; display: grid; grid-template-columns: 68px 1fr; gap: 18px; align-items: start; } body.tr-home-v3 .cc__step:not(:last-child)::before { position: absolute; top: 34px; bottom: -24px; left: 33px; width: 2px; content: ""; background: linear-gradient(180deg, var(--tr-pink), rgba(255, 62, 143, .45)); z-index: 1; pointer-events: none; } body.tr-home-v3 .cc__title { font-size: 23px; } }
@media (min-width: 1760px) { body.tr-home-v3 .cc__wave { position: absolute; top: 0; left: 0; display: block; width: 1648px; height: 700px; pointer-events: none; } body.tr-home-v3 .cc__steps { position: relative; width: 1648px; height: 700px; } body.tr-home-v3 .cc__step { position: absolute; z-index: 3; width: 334px; } body.tr-home-v3 .cc__step .cc__panel { width: 300px; margin-top: 18px; margin-left: -14px; } body.tr-home-v3 .cc__step:nth-child(1) { top: 84px; left: 86px; } body.tr-home-v3 .cc__step:nth-child(2) { top: 296px; left: 438px; } body.tr-home-v3 .cc__step:nth-child(3) { top: 84px; left: 790px; } body.tr-home-v3 .cc__step:nth-child(4) { top: 296px; left: 1142px; } body.tr-home-v3 .cc__step:nth-child(5) { top: 84px; left: 1494px; } body.tr-home-v3 .cc__step:nth-child(5) .cc__panel { margin-left: -216px; text-align: right; } body.tr-home-v3 .cc__step[aria-current="true"] { z-index: 4; } }
