/* Turn Control Center ------------------------------------------------------
   Page-specific components. Shared case study vocabulary is in case-study.css.
-------------------------------------------------------------------------- */

/* Demo frame --------------------------------------------------------------- */

.tcc-demo {
  height:min(920px, 84vh);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 0 0 1px #E9E9E6, 0 18px 44px rgba(27, 48, 42, 0.10);
  background:#FFFFFF;
  color:#FFFFFF;
}

/* The turn: a four-stage ring ---------------------------------------------- */

.tcc-turn__panel { padding:clamp(10px, 1.1vw, 14px); }

.tcc-turn__ring {
  position:relative;
  width:100%;
  max-width:320px;
  margin:0 auto;
  aspect-ratio:1;
  container-type:inline-size;
}
.tcc-turn__arcs {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
}
.tcc-turn__node {
  position:absolute;
  box-sizing:border-box;
  width:30cqw;
  transform:translate(-50%, -50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2cqw;
  padding:4cqw 2cqw;
  border-radius:12px;
  background:#FFFFFF;
  box-shadow:inset 0 0 0 1px #EDEDEA;
}
.tcc-turn__node--top    { left:50%;   top:15.3%; }
.tcc-turn__node--right  { left:84.7%; top:50%; }
.tcc-turn__node--bottom { left:50%;   top:84.7%; }
.tcc-turn__node--left   { left:15.3%; top:50%; }

/* Icons are masked so they take the node's ink colour. */
.tcc-turn__icon {
  width:100%;
  height:5.3cqw;
  background:#1B302A;
}
.tcc-turn__label {
  white-space:nowrap;
  font-family:'Figtree', sans-serif;
  font-size:4.2cqw;
  line-height:1.2;
  font-weight:500;
  color:#1B302A;
}

/* Why V1 failed: the six systems ------------------------------------------- */

.tcc-systems {
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.tcc-systems__row {
  display:flex;
  align-items:center;
  gap:13px;
  padding:15px 16px;
  border-radius:10px;
  background:#FBFBFA;
  box-shadow:inset 0 0 0 1px #EDEDEA;
}
.tcc-systems__row svg { flex:none; color:#4E625B; }
.tcc-systems__row span {
  font-size:16px;
  font-weight:400;
  color:#1B302A;
}

/* The cost ----------------------------------------------------------------- */

.tcc-cost {
  padding:clamp(80px, 12vw, 136px) max(clamp(24px, 6vw, 80px), calc((100% - 1280px) / 2)) 136px;
}
.tcc-cost__stack { display:flex; flex-direction:column; gap:40px; }
.tcc-cost__head {
  display:flex;
  flex-direction:column;
  gap:18px;
  max-width:940px;
}
.tcc-cost__col { display:flex; flex-direction:column; gap:14px; }
.tcc-cost__note { padding-top:34px; }
.tcc-cost__note p { grid-column:1 / -1; }

/* Discovery ---------------------------------------------------------------- */

.tcc-discovery__intro { padding-top:28px; text-wrap:pretty; }
.tcc-pair-topgap { padding-top:clamp(80px, 12vw, 136px); }

/* Discovery: the shared-screen illustration -------------------------------
   Drawn in the site's own lilac palette. This is NOT a product recreation
   and carries no product-ui exemption.
-------------------------------------------------------------------------- */

.tcc-screen {
  max-width:560px;
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  padding:20px;
  border-radius:14px;
  background:#FFFFFF;
  box-shadow:0 0 0 1px #E4E1EE, 0 8px 22px rgba(27, 48, 42, 0.10);
}
.tcc-screen__pane {
  flex:1 1 200px;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:18px;
  border-radius:10px;
  box-shadow:inset 0 0 0 1px #EEEBF7;
}
.tcc-screen__head {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px 12px;
}
.tcc-screen__label,
.tcc-screen__live {
  font-family:'Figtree', sans-serif;
  font-weight:500;
  font-size:11.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#647670;
}
.tcc-screen__live { display:flex; align-items:center; gap:7px; }
.tcc-screen__dot {
  width:7px;
  height:7px;
  border-radius:99px;
  background:#BFB2EF;
}
.tcc-screen__grid {
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:1px;
  background:#EEEBF7;
  box-shadow:inset 0 0 0 1px #EEEBF7;
}
.tcc-screen__row {
  flex:1;
  min-height:30px;
  display:grid;
  grid-template-columns:26px repeat(3, minmax(0, 1fr));
  align-items:center;
  gap:1px;
  background:#EEEBF7;
}
.tcc-screen__num {
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  background:#FFFFFF;
  font-family:'Figtree', sans-serif;
  font-size:10px;
  color:#9A93B5;
}
.tcc-screen__cell {
  display:flex;
  align-items:center;
  height:100%;
  padding:0 8px;
  background:#FFFFFF;
}
.tcc-screen__bar {
  flex:none;
  height:11px;
  border-radius:2px;
  background:#EDEAF8;
}
/* The header row sits on the lilac wash with darker bars. */
.tcc-screen__row--head .tcc-screen__num,
.tcc-screen__row--head .tcc-screen__cell { background:#F4F2FB; }
.tcc-screen__row--head .tcc-screen__bar { background:#DCD5F0; }

.tcc-tiles {
  flex:1 1 100%;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}
.tcc-tile {
  aspect-ratio:16/9;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:10px;
  background:#FBFAFE;
  box-shadow:inset 0 0 0 1px #EEEBF7;
  overflow:hidden;
}
.tcc-tile__av {
  width:clamp(28px, 26%, 44px);
  aspect-ratio:1;
  border-radius:99px;
}
.tcc-tile__cap {
  font-size:11.5px;
  color:#1B302A;
  font-weight:400;
  text-align:center;
}
.tcc-tile__cap span { color:#647670; }

/* Findings: label/value rows ----------------------------------------------- */

.tcc-labelrow__label {
  font-family:'Figtree', sans-serif;
  font-weight:500;
  font-size:12px;
  line-height:1.7;
  padding-top:2px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#647670;
}
.tcc-labelrow--ruled {
  padding-top:28px;
  border-top:1px solid #E9E9E6;
}

/* Pull quote --------------------------------------------------------------- */

.tcc-quote {
  margin:0;
  padding:52px 48px 44px;
  border-radius:14px;
  background:#FFFFFF;
  box-shadow:0 0 0 1px #E4E1EE, 0 8px 22px rgba(27, 48, 42, 0.10);
  display:flex;
  flex-direction:column;
  gap:34px;
}
.tcc-quote__text {
  margin:0;
  font-family:'Figtree', sans-serif;
  font-weight:400;
  font-size:clamp(19px, 2vw, 23px);
  line-height:1.68;
  letter-spacing:-0.005em;
  color:#1B302A;
  text-wrap:balance;
}
.tcc-quote__who {
  font-family:'Figtree', sans-serif;
  font-weight:500;
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#647670;
  padding-top:26px;
  border-top:1px solid #E4E1EE;
}

/* The reframe: assumed -> discovery found ---------------------------------- */

.tcc-reframe {
  display:grid;
  grid-template-columns:minmax(0, 1fr) 72px minmax(0, 1fr);
  align-items:stretch;
}
.tcc-reframe > p {
  margin:0;
  display:flex;
  align-items:center;
  padding:22px 26px;
  border-radius:12px;
  font-size:17px;
  line-height:1.55;
  text-wrap:pretty;
}
.tcc-reframe__from {
  background:#F4F2FB;
  color:#57655F;
  font-weight:400;
}
.tcc-reframe__to {
  background:#FFFFFF;
  box-shadow:0 0 0 1px #E4E1EE, 0 6px 16px rgba(27, 48, 42, 0.07);
  color:#1B302A;
  font-weight:400;
}
.tcc-reframe__arrow {
  display:flex;
  align-items:center;
  justify-content:center;
}
.tcc-reframe__arrow svg { color:#BFB2EF; flex:none; }

.tcc-reframe-stack {
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:34px 0 56px;
}

/* Responsive --------------------------------------------------------------- */

@media (max-width: 1040px) {
  [data-tile] { aspect-ratio:2.7 / 1 !important; gap:10px !important; }
  [data-tile-av] { width:auto !important; height:52% !important; aspect-ratio:1; }
}

@media (max-width: 860px) {
  [data-reframe] { grid-template-columns:minmax(0, 1fr) 44px minmax(0, 1fr) !important; }
  [data-reframe] > p { padding:16px 18px !important; font-size:15.5px !important; }
}

@media (max-width: 640px) {
  [data-reframe] {
    grid-template-columns:minmax(0, 1fr) !important;
    border-radius:12px;
    padding:16px 18px;
    background:#FFFFFF;
    box-shadow:0 0 0 1px #E4E1EE, 0 6px 16px rgba(27, 48, 42, 0.07);
  }
  [data-reframe] > p {
    display:block !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:transparent !important;
    padding:0 !important;
  }
  [data-reframe] > p:first-child {
    font-size:15.5px !important;
    color:#57655F !important;
    padding-bottom:12px !important;
    border-bottom:1px solid #EFEDF7;
  }
  [data-reframe] > p:last-child { font-size:16px !important; padding-top:12px !important; }
  [data-reframe] > p::before {
    display:block;
    font-family:'Figtree', sans-serif;
    font-weight:500;
    font-size:10.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    margin-bottom:5px;
  }
  [data-reframe] > p:first-child::before { content:"Assumed"; color:#7C8A84; }
  [data-reframe] > p:last-child::before { content:"Discovery found"; color:#6B5BA8; }
  [data-reframe] > span { display:none !important; }
  [data-reframe] + [data-reframe] { margin-top:10px; }
}



/* The mental model: four tabs collapsing to one ---------------------------- */

.tcc-tabs {
  width:100%;
  max-width:520px;
  box-sizing:border-box;
  border-radius:12px;
  padding:24px;
  background:#FFFFFF;
  box-shadow:0 0 0 1px #E9E9E6, 0 8px 22px rgba(27, 48, 42, 0.10);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.tcc-tabs__grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.tcc-tabs__tab {
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:14px 10px;
  border-radius:10px;
  background:#EAF7F0;
  box-shadow:inset 0 0 0 1px #D7F0E3;
  font-size:14px;
  line-height:1.3;
  color:#1B302A;
}
.tcc-tabs__tab--dropped {
  background:#F4F4F2;
  box-shadow:inset 0 0 0 1px #E9E9E6;
  color:#566661;
}
.tcc-tabs__arrow {
  display:flex;
  align-items:center;
  justify-content:center;
}
.tcc-tabs__arrow svg { color:#647670; flex:none; }
.tcc-tabs__result {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 12px;
  border-radius:10px;
  background:#D7F0E3;
  box-shadow:inset 0 0 0 1px #BFE6D2;
  font-size:15px;
  font-weight:500;
  color:#123028;
}

.tcc-stage-wrap {
  display:flex;
  flex-direction:column;
  gap:20px;
  padding-top:12px;
}

/* product-ui */
/* Recreation of Roofstock's stage list. These are that product's brand
   colours, not this site's palette, and nothing here may be promoted into the
   design system. The markers above and below are what the drift audit reads
   to skip this block. */

.p-stagelist {
  box-sizing:border-box;
  border-radius:12px;
  padding:22px;
  background:#FFFFFF;
  box-shadow:0 0 0 1px #E9E9E6, 0 8px 22px rgba(27, 48, 42, 0.10);
  font-family:'Figtree', system-ui, sans-serif;
  color:#17181A;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.p-stage { display:flex; flex-direction:column; }

.p-stage__head {
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 12px;
  border-radius:8px;
  background:#FAFAFA;
  border:1px solid #EDEDED;
  cursor:pointer;
}
.p-stage__head--pinned {
  background:#FEF2F3;
  border-color:#FAD6DA;
  cursor:default;
}

.p-stage__title {
  font-size:14.5px;
  font-weight:600;
  white-space:nowrap;
  color:#17181A;
}
.p-stage__head--pinned .p-stage__title { color:#DC2B43; }

.p-stage__pill {
  flex:none;
  font-size:12px;
  font-weight:600;
  color:#44494D;
  background:#E9EAEA;
  border-radius:20px;
  box-sizing:border-box;
  min-width:20px;
  padding:1px 7px;
  text-align:center;
}
.p-stage__head--pinned .p-stage__pill { color:#FFFFFF; background:#E02B45; }

.p-stage__sum {
  font-size:12.5px;
  color:#71767B;
  margin-left:6px;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.p-stage__sum--due { color:#B59000; }
.p-stage__head--pinned .p-stage__sum { color:#8A5A61; }

.p-stage__caret {
  margin-left:auto;
  flex:none;
  display:flex;
  color:#7C8185;
  transform:none;
  transition:transform .15s ease;
}
.p-stage__head--pinned .p-stage__caret { color:#C4767F; }
.p-stage--open .p-stage__caret { transform:rotate(180deg); }

.p-stage__scroll { overflow-x:auto; }

.p-grid {
  display:grid;
  grid-template-columns:minmax(205px, 2.4fr) minmax(78px, .85fr) minmax(112px, 1.15fr) minmax(120px, 1.3fr) minmax(80px, .9fr) minmax(150px, 1.8fr) minmax(96px, 1.05fr) minmax(96px, 1fr);
  gap:14px;
  border-bottom:1px solid #F4F4F4;
  white-space:nowrap;
  width:max-content;
  min-width:100%;
}
.p-grid--head {
  padding:18px 12px 9px;
  font-size:12px;
  color:#71767B;
}
.p-grid--row {
  padding:13px 12px;
  font-size:13px;
  align-items:center;
}
.p-grid > div {
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.p-grid--row > div { color:#5C6166; }
/* Written through .p-grid--row so they outrank its blanket cell colour. */
.p-grid--row > .p-cell--unit  { color:#17181A; font-weight:500; }
.p-grid--row > .p-cell--green { color:#00A868; font-weight:600; }
.p-grid--row > .p-cell--red   { color:#E1152D; font-weight:600; }
.p-grid--row > .p-cell--amber { color:#D9A400; font-weight:600; }
.p-grid--row > .p-cell--muted { color:#5C6166; font-weight:400; }
/* /product-ui */

/* product-ui */
/* Recreation of Roofstock's turn-details card. Their brand colours, fenced
   off from this site's palette by the markers around this block. */

.p-turn {
  border-radius:12px;
  background:#FFFFFF;
  box-shadow:0 0 0 1px #E9E9E6, 0 8px 22px rgba(27, 48, 42, 0.10);
  font-family:'Figtree', system-ui, sans-serif;
  color:#17181A;
  -webkit-font-smoothing:antialiased;
}
.p-turn__head {
  padding:18px 24px 14px;
  border-bottom:1px solid #EDEDED;
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.p-turn__addr { font-size:18px; font-weight:600; letter-spacing:-.015em; }
.p-turn__sub { font-size:12.5px; color:#5C6166; margin-top:4px; }
.p-turn__close { margin-left:auto; display:flex; color:#5C6166; }
.p-turn__body { padding:0 24px 24px; }

.p-turn__sec { position:relative; border-bottom:1px solid #EDEDED; }
.p-turn__sec--stage { padding:22px 0 24px; }
.p-turn__sec--summary { padding:15px 0 20px; }
.p-turn__sec--plain { border-bottom:none; }

.p-turn__stagehead { display:flex; align-items:baseline; gap:10px; margin-bottom:12px; }
.p-turn__stagename { font-size:15px; font-weight:600; }
.p-turn__stagetime { font-size:12.5px; font-weight:600; color:#D9A400; }

.p-turn__bars { display:flex; gap:5px; margin-bottom:22px; }
.p-turn__bar {
  flex:1 1 0;
  height:8px;
  border-radius:4px;
  display:block;
  background:#E8E9E9;
}
.p-turn__bar--done { background:#38B87C; }
.p-turn__bar--now  { background:#2B6BE4; }

.p-turn__step { display:flex; align-items:center; gap:10px; font-size:13px; padding:5px 0; }
.p-turn__dot { flex:none; width:9px; height:9px; border-radius:50%; border:none; }
.p-turn__dot--done { background:#38B87C; }
.p-turn__dot--now  { background:#2B6BE4; }
.p-turn__steplabel { color:#44494D; font-weight:400; }
.p-turn__steplabel--now { color:#2B6BE4; font-weight:600; }
.p-turn__stepdate { margin-left:auto; color:#5C6166; font-size:12.5px; }
.p-turn__stepdate--muted { color:#71767B; }

.p-turn__title { font-size:14px; font-weight:600; margin-bottom:14px; }
.p-turn__grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px 16px; }
.p-turn__k { font-size:11.5px; color:#71767B; }
.p-turn__v { font-size:15px; font-weight:600; letter-spacing:-.02em; margin-top:3px; }
.p-turn__v--sm { font-size:13px; font-weight:600; margin-top:3px; letter-spacing:normal; }
.p-turn__v--plain { font-size:13px; font-weight:400; margin-top:3px; letter-spacing:normal; }
.p-turn__v--red { color:#E1152D; }

.p-turn__acthead { display:flex; align-items:center; gap:9px; padding:15px 0; }
.p-turn__actwrap { padding:0 0 18px; }
.p-turn__timeline {
  position:relative;
  margin-left:4px;
  display:flex;
  flex-direction:column;
  gap:26px;
}
/* One continuous trunk, not a border per row. */
.p-turn__trunk {
  position:absolute;
  left:1.5px;
  top:8px;
  bottom:8px;
  width:1px;
  background:#EDEDED;
}
.p-turn__item { position:relative; padding-left:22px; }
.p-turn__node {
  position:absolute;
  left:-4px;
  top:3px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#FFFFFF;
  border:1.5px solid #C9CDD0;
}
.p-turn__node--amber { background:#D9A400; border-color:#D9A400; }
.p-turn__meta { display:flex; align-items:center; gap:8px; font-size:12px; color:#71767B; }
.p-turn__kind {
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#71767B;
}
.p-turn__kind--note { color:#8A6510; }
.p-turn__who { font-weight:600; color:#44494D; }
.p-turn__when { margin-left:auto; }
.p-turn__text { font-size:13px; color:#44494D; line-height:1.55; margin-top:5px; }

.p-turn__tasks { padding:15px 0 18px; border-bottom:1px solid #EDEDED; }
.p-turn__task { padding:11px 12px; margin:0 -12px; border-radius:8px; }
.p-turn__task--ruled { border-top:1px solid #F4F4F4; }
.p-turn__taskhead { display:flex; align-items:center; gap:8px; }
.p-turn__taskname { font-size:13px; font-weight:600; color:#1C5FCC; }
.p-turn__badge { font-size:11.5px; font-weight:500; border-radius:5px; padding:2px 7px; }
.p-turn__badge--over { color:#B3261E; background:#FDF0EF; }
.p-turn__badge--ok   { color:#1C7A54; background:#EEF8F3; }
.p-turn__taskmeta { display:flex; gap:20px; font-size:12.5px; color:#5C6166; margin-top:6px; }

.p-turn__row {
  display:flex;
  align-items:center;
  gap:9px;
  padding:15px 0;
  border-bottom:1px solid #EDEDED;
}
.p-turn__row--last { border-bottom:none; }
.p-turn__rowtitle { font-size:14px; font-weight:600; }
.p-turn__count { font-weight:400; color:#71767B; }
.p-turn__chev { margin-left:auto; display:flex; color:#8A8F94; transform:none; }
/* /product-ui */

/* What the side panel consolidates ---------------------------------------- */

.tcc-consol { display:flex; flex-direction:column; gap:16px; }
.tcc-consol__item {
  display:flex;
  flex-direction:column;
  gap:5px;
  padding-top:16px;
  border-top:1px solid #E9E9E6;
}
.tcc-consol__name { font-size:16px; color:#1B302A; font-weight:400; }
.tcc-consol__desc {
  font-size:14.5px;
  color:#4E625B;
  font-weight:300;
  line-height:1.5;
}

/* product-ui */
/* Recreation of Roofstock's duplicate-detection panel. */

.p-dup__body { padding:0 24px 8px; }
.p-dup__filters { display:flex; gap:4px; margin-bottom:6px; }
.p-dup__filter {
  border:none;
  background:transparent;
  color:#5C6166;
  font-weight:400;
  border-radius:6px;
  padding:5px 10px;
  font-size:12.5px;
  font-family:inherit;
  cursor:default;
}
.p-dup__filter--on { background:#EEF0F0; color:#17181A; font-weight:600; }
.p-dup__list { padding:0 0 12px; }
.p-dup__item { padding:11px 12px; margin:0 -12px; border-radius:8px; }
.p-dup__item--ruled { border-top:1px solid #F4F4F4; }
.p-dup__head { display:flex; align-items:center; gap:8px; }
.p-dup__name { font-size:13px; font-weight:600; color:#1C5FCC; }
.p-dup__badge {
  font-size:11.5px;
  font-weight:500;
  border-radius:5px;
  padding:2px 7px;
  color:#2B5BC4;
  background:#F1F5FE;
}
.p-dup__desc { font-size:12.5px; color:#5C6166; line-height:1.55; margin-top:4px; }
.p-dup__meta { display:flex; gap:16px; font-size:12px; color:#71767B; margin-top:6px; }
.p-turn__chev--open { transform:rotate(180deg); }
/* /product-ui */

/* Deciding in the open ----------------------------------------------------- */

.tcc-shots { display:flex; flex-direction:column; gap:14px; padding:12px 0 34px; }
.tcc-shots__grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.tcc-shot {
  border-radius:12px;
  overflow:hidden;
  background:#FFFFFF;
  box-shadow:0 0 0 1px #E9E9E6, 0 8px 22px rgba(27, 48, 42, 0.10);
}
.tcc-shot img { width:100%; display:block; }

/* Implementation tradeoffs ------------------------------------------------- */

.tcc-trade {
  box-sizing:border-box;
  border-radius:12px;
  padding:26px 24px;
  background:#FFFFFF;
  box-shadow:0 0 0 1px #E9E9E6, 0 8px 22px rgba(27, 48, 42, 0.10);
}
.tcc-trade__inner { display:flex; flex-direction:column; }
.tcc-trade__group {
  font-family:'Figtree', sans-serif;
  font-weight:500;
  font-size:11.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#647670;
  padding:0 0 4px;
}
.tcc-trade__group--later { padding:22px 0 4px; }
.tcc-trade__item {
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 0;
  border-top:1px solid #F1F1EE;
}
.tcc-trade__item svg { flex:none; }
.tcc-trade__label {
  font-size:15.5px;
  line-height:1.4;
  color:#1B302A;
  font-weight:400;
  text-wrap:pretty;
}

/* Where it stands: the release roadmap ------------------------------------- */

.tcc-road {
  box-sizing:border-box;
  border-radius:12px;
  padding:28px 26px;
  background:#FFFFFF;
  box-shadow:0 0 0 1px #E4E1EE, 0 8px 22px rgba(27, 48, 42, 0.08);
}
.tcc-road__list { position:relative; display:flex; flex-direction:column; }
.tcc-road__item { position:relative; padding-left:26px; padding-bottom:26px; }
.tcc-road__item--last { padding-bottom:0; }
/* One continuous line, not a border per row. */
.tcc-road__line {
  position:absolute;
  left:4.5px;
  top:19px;
  bottom:-5px;
  width:1px;
  background:#EAE7F5;
}
.tcc-road__icon { position:absolute; left:-2px; top:3px; }
.tcc-road__dot {
  position:absolute;
  left:1px;
  top:6px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#FFFFFF;
  box-shadow:0 0 0 1.5px #C3BCE0;
}
.tcc-road__head { display:flex; align-items:baseline; gap:10px; }
.tcc-road__name {
  font-family:'Figtree', sans-serif;
  font-weight:500;
  font-size:16px;
  color:#1B302A;
}
.tcc-road__state {
  font-family:'Figtree', sans-serif;
  font-weight:500;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#1C7A54;
}
.tcc-road__state--progress { color:#647670; }
.tcc-road__desc {
  margin:0;
  padding-top:6px;
  font-size:15.5px;
  line-height:1.55;
  color:#4E625B;
  font-weight:300;
  text-wrap:pretty;
}

/* "Not built" items sit at body ink rather than heading ink. */
.tcc-trade__label--muted { color:#4E625B; }

.tcc-demo iframe { display:block; width:100%; height:100%; border:none; }