.tl-h2 {
  max-width: 32ch;
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 650;
  line-height: 1.14;
  letter-spacing: -.012em;
  color: var(--ink);
}

.tl-p {
  max-width: var(--wrap-txt);
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
}

.tl-cap {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-micro);
  line-height: 1.45;
  color: var(--ink-muted);
}



.tl-crumbs { margin-block-end: var(--sp-4); }

.tl-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tl-crumbs__list li + li::before {
  content: "/";
  margin-inline-end: var(--sp-2);
  color: var(--ink-muted);
}

.tl-crumbs__lnk,
.tl-crumbs__here { color: var(--ink-muted); }

.tl-crumbs__lnk:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}



.tl-hero {
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4rem);
  background: var(--ground);
  border-block-end: 1px solid var(--rule);
}

.tl-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: center;
}

.tl-hero__h1 {
  margin: var(--sp-3) 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 3.6vw, 3rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.024em;
  color: var(--ink);
}


.tl-figs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 var(--sp-6);
  border-block-start: 1px solid var(--rule);
}

.tl-fig {
  padding-block: var(--sp-3);
  border-block-end: 1px solid var(--rule-soft);
  border-inline-end: 1px solid var(--rule-soft);
}

.tl-fig:last-child { border-inline-end: 0; }

.tl-fig__lbl {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.tl-fig__v { margin: var(--sp-2) 0 0; }

.tl-hero__deck {
  max-width: 48ch;
  margin: 0 0 var(--sp-6);
  font-size: var(--fs-body);
  line-height: 1.58;
  color: var(--ink);
}

.tl-hero__fig { margin: 0; }

.tl-hero__fig img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--ground-cool);
}



.tl-unattended { background: var(--sheet); }

.tl-table {
  border-block-start: 1px solid var(--rule);
  padding-block-start: var(--sp-2);   
}

.tl-table__head,
.tl-table__row {
  display: grid;
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  align-items: stretch;
}

.tl-table__head {
  padding-block-end: var(--sp-2);
  border-block-end: 2px solid var(--accent);
}

.tl-table__hk,
.tl-table__hv {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.tl-table__row { border-block-end: 1px solid var(--rule-soft); }

.tl-table__k {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-4) clamp(1rem, 2.4vw, 2.25rem) var(--sp-4) 0;
  border-inline-end: 1px solid var(--rule-soft);
}

.tl-ico {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.tl-table__kt {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

.tl-table__v {
  margin: 0;
  padding: var(--sp-4) 0 var(--sp-4) clamp(1rem, 2.4vw, 2.25rem);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink);
}



.tl-plan { background: var(--ground); }

.tl-plan__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}

.tl-plan__fig { margin: 0; }

.tl-plan__scroll { max-width: 100%; overflow-x: auto; }

.tl-plan__svg {
  display: block;
  width: 100%;
  min-width: 420px;
  height: auto;
}

.tlht {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  fill: var(--ink-muted);
}

.tltx {
  font-family: var(--font-mono);
  font-size: 13px;
  fill: var(--ink-muted);
}

.tlbig {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  fill: var(--ink);
}

.tlbox {
  fill: var(--sheet);
  stroke: var(--ink-muted);
  stroke-width: 1.5;
}


.tldash {
  fill: none;
  stroke: var(--ink-muted);
  stroke-width: 1.5;
  stroke-dasharray: 8 6;
}

.tllead,
.tltick {
  fill: none;
  stroke: var(--ink-muted);
  stroke-linecap: square;
}

.tllead { stroke-width: 1; }
.tltick { stroke-width: 1.5; }


.tlacc {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: square;
}

.tlacc-tx {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  fill: var(--accent-deep);
}

.tl-plan__txt { padding-block-start: var(--sp-2); }

.tl-points {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--rule);
}

.tl-point {
  padding-block: var(--sp-3);
  border-block-end: 1px solid var(--rule-soft);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-muted);
}

.tl-point b { color: var(--ink); }



.tl-spec { background: var(--sheet); }

.tl-spec__t th,
.tl-spec__t td { padding-inline-end: var(--sp-6); }

.tl-spec__t thead th {
  border-block-end: 2px solid var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.tl-spec__t tbody th { width: 34%; font-weight: 600; }



.tl-signal { background: var(--ground); }

.tl-signal__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}

.tl-path { margin: 0; }

.tl-path__scroll { max-width: 100%; overflow-x: auto; }

.tl-path__svg {
  display: block;
  width: 100%;
  min-width: 320px;
  height: auto;
}

.tlnd {
  fill: var(--ground);
  stroke: var(--ink-muted);
  stroke-width: 1.5;
}

.tlnn {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  fill: var(--ink-muted);
}

.tlflow,
.tlarrow {
  fill: none;
  stroke: var(--ink-muted);
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}


.tlflow--on,
.tlarrow--on { stroke: var(--accent); stroke-width: 2; }


.tl-path__svg .tltx { fill: var(--ink); }



.tl-install { background: var(--sheet); }

.tl-install__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}

.tl-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--rule);
}

.tl-step {
  display: grid;
  grid-template-columns: minmax(0, 3.5rem) minmax(0, 1fr);
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-block-end: 1px solid var(--rule-soft);
}

.tl-step__n {
  font-size: var(--fs-small);
  letter-spacing: .1em;
  color: var(--ink-muted);
}

.tl-step__t {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}

.tl-install__fig { margin: 0; }

.tl-install__fig img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--ground);
}



.tl-docs { background: var(--ground); }

.tl-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}

.tl-strip__cell { margin: 0; }

.tl-strip__cell img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background: var(--sheet);
  border: 1px solid var(--rule-soft);
}

.tl-docs__scope {
  max-width: 62ch;
  margin: var(--sp-6) 0 0;
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--rule-soft);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink);
}



.tl-project { background: var(--sheet); }

.tl-project__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: center;
}

.tl-project__fig { margin: 0; }

.tl-project__fig img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--ground);
}

.tl-facts {
  display: grid;
  gap: 0;
  margin: var(--sp-4) 0 0;
}

.tl-fact {
  display: grid;
  grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  border-block-start: 1px solid var(--rule-soft);
}

.tl-fact dt {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.tl-fact dd {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink);
}







.tl-cta__in { display: grid; gap: var(--sp-2); }

.tl-cta .tl-h2 { color: var(--ink); }
.tl-cta .tl-p { color: var(--ink-muted); }

.tl-promise {
  max-width: 62ch;
  margin: 0;
  padding-block: var(--sp-3);
  border-block: 1px solid var(--rule-soft);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink);
}

.tl-acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block: var(--sp-2) var(--sp-4);
}

.tl-rel {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-muted);
}



@media (max-width: 980px) {
  .tl-hero__grid,
  .tl-plan__grid,
  .tl-signal__grid,
  .tl-project__grid { grid-template-columns: minmax(0, 1fr); }
  .tl-hero__fig { max-width: 560px; }
  .tl-install__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .tl-figs { grid-template-columns: minmax(0, 1fr); }
  .tl-fig { border-inline-end: 0; }
  .tl-table__head,
  .tl-table__row { grid-template-columns: minmax(0, 1fr); }
  .tl-table__k {
    padding-inline-end: 0;
    border-inline-end: 0;
    padding-block-end: 0;
  }
  .tl-table__v { padding-inline-start: 0; }
  .tl-table__head { display: none; }
  .tl-strip { grid-template-columns: minmax(0, 1fr); }
  .tl-fact { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
}

@media (max-width: 520px) {
  .tl-acts .btn { width: 100%; }
}