/* Tracom Tools Center: control-room hub. Uses only tokens and classes of the base file; adds hub-only layout. */
.trt .trt-actions{display:flex;flex-wrap:wrap;gap:12px}
.trt .trt-hstack{display:grid;gap:14px;min-width:0}
.trt .trt-hstack--top{align-content:start}
.trt .trt-wrap--teaser{padding-bottom:clamp(40px,6vw,64px)}
.trt .trt-wrap--cta{padding-bottom:clamp(56px,8vw,96px)}
.trt .trt-cta h2{margin-top:14px}
.trt .trt-hero .trt-trust svg{width:18px;height:18px}


/* how it works: three nodes on one rail */
.trt .trt-section--how{background:#fff;border-bottom:1px solid var(--trt-line)}
.trt .trt-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));counter-reset:flow}
.trt .trt-flow>li{position:relative;display:grid;gap:10px;align-content:start;padding:60px 32px 0 0;counter-increment:flow}
.trt[dir="rtl"] .trt-flow>li{padding:60px 0 0 32px}
.trt .trt-flow>li::before{content:counter(flow);position:absolute;top:0;inset-inline-start:0;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--trt-graphite);color:#fff;font:700 15px/1 var(--trt-font-num);box-shadow:0 0 0 4px #fff,0 0 0 6px var(--trt-hue)}
.trt .trt-flow>li:not(:last-child)::after{content:"";position:absolute;top:13px;inset-inline:52px 16px;height:10px;background:linear-gradient(90deg,var(--trt-hue),transparent 92%);-webkit-mask:var(--trt-chev) 0 0/20px 10px repeat-x;mask:var(--trt-chev) 0 0/20px 10px repeat-x}
.trt[dir="rtl"] .trt-flow>li:not(:last-child)::after{background:linear-gradient(270deg,var(--trt-hue),transparent 92%)}
.trt .trt-flow__ic{width:44px;height:44px;border-radius:var(--trt-r);display:grid;place-items:center;background:var(--trt-graphite);color:var(--trt-hue-dk)}
.trt .trt-flow h3{margin-top:4px}
.trt .trt-flow p{color:var(--trt-muted);font-size:15.5px;max-width:34ch}
@media (max-width:760px){
  .trt .trt-flow{grid-template-columns:minmax(0,1fr);gap:28px}
  .trt .trt-flow>li,.trt[dir="rtl"] .trt-flow>li{padding:0;padding-inline-start:60px;min-height:48px}
  .trt .trt-flow>li:not(:last-child)::after,.trt[dir="rtl"] .trt-flow>li:not(:last-child)::after{inset-inline:15px auto;top:46px;bottom:-24px;width:6px;height:auto;background:repeating-linear-gradient(var(--trt-hue) 0 6px,transparent 6px 12px);-webkit-mask:none;mask:none;border-radius:3px}
  .trt .trt-flow__ic{display:none}
}

/* start from your job: eight job tiles, one tool each */
.trt .trt-goals{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.trt .trt-goal{position:relative;display:grid;grid-template-rows:auto 1fr auto;gap:12px;height:100%;min-height:172px;padding:18px;background:#fff;border:1px solid var(--trt-line-strong);border-radius:var(--trt-r-lg);color:var(--trt-ink);overflow:hidden;transition:border-color .15s,box-shadow .15s,transform .15s}
.trt .trt-goal::before{content:"";position:absolute;inset-inline:0;top:0;height:4px;background:var(--trt-hue)}
.trt .trt-goal>svg{width:44px;height:44px;padding:10px;border-radius:var(--trt-r);background:var(--trt-graphite);color:var(--trt-hue-dk)}
.trt .trt-goal b{align-self:start;font:600 18px/1.3 var(--trt-font-head);color:var(--trt-ink)}
.trt .trt-goal small{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px;line-height:1.35;color:var(--trt-muted)}
.trt .trt-goal small svg{width:18px;height:18px;flex:none;color:var(--trt-hue-ink)}
.trt .trt-goal:hover{border-color:var(--trt-graphite);box-shadow:var(--trt-shadow);transform:translateY(-2px);text-decoration:none}
.trt .trt-goal:focus-visible{box-shadow:var(--trt-focus);outline:0}
@media (max-width:1000px){.trt .trt-goals{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.trt .trt-goals{gap:10px}.trt .trt-goal{min-height:0;padding:14px}.trt .trt-goal b{font-size:16px}.trt .trt-goal small{font-size:12.5px}}

/* family tiles = the filter */
.trt .trt-cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:28px}
.trt .trt-cat{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ic name count" "ds ds ds";gap:8px 12px;align-items:center;text-align:start;padding:14px 16px;background:#fff;border:1.5px solid var(--trt-line-strong);border-radius:var(--trt-r-lg);color:var(--trt-ink);font:inherit;cursor:pointer;transition:border-color .15s,background .15s}
.trt .trt-cat>svg{grid-area:ic;width:38px;height:38px;padding:7px;border-radius:var(--trt-r);background:var(--trt-graphite);color:var(--trt-hue-dk)}
.trt .trt-cat b{grid-area:name;font:600 15.5px/1.25 var(--trt-font-head)}
.trt .trt-cat small{grid-area:ds;align-self:start;font-size:13px;line-height:1.45;font-weight:400;color:var(--trt-muted)}
.trt .trt-cat .trt-count{grid-area:count;min-width:30px;text-align:center;padding:3px 9px;border-radius:var(--trt-r-pill);background:var(--trt-surface-2);font:600 13px/1.3 var(--trt-font-num);font-variant-numeric:tabular-nums}
.trt .trt-cat:hover{border-color:var(--trt-graphite);text-decoration:none}
.trt .trt-cat:focus-visible{box-shadow:var(--trt-focus);outline:0}
.trt .trt-cat[aria-pressed="true"]{background:var(--trt-graphite);border-color:var(--trt-graphite);color:#fff}
.trt .trt-cat[aria-pressed="true"] small{color:#c3cac5}
.trt .trt-cat[aria-pressed="true"]>svg{background:var(--trt-hue);color:var(--trt-graphite)}
.trt .trt-cat[aria-pressed="true"] .trt-count{background:var(--trt-hue);color:var(--trt-graphite)}
.trt .trt-cat--ask{border-style:dashed;background:transparent;color:var(--trt-ink)}
.trt .trt-cat--ask:hover{background:#fff}
.trt .trt-cat--ask>svg{background:transparent;color:var(--trt-ink);border:1.5px solid var(--trt-ink)}
.trt .trt-section--tint .trt-filters{margin-bottom:16px}
@media (max-width:1100px){.trt .trt-cats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.trt .trt-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.trt .trt-cat{padding:10px 12px;gap:6px 10px}.trt .trt-cat small{display:none}.trt .trt-cat b{font-size:14px}.trt .trt-cat>svg{width:32px;height:32px;padding:6px}}

/* trust: a printed datasheet on the dark band */
.trt .trt-section--trust{--trt-ink:#fff;--trt-grey:#d3d8d4;--trt-muted:#b7beb9;--trt-faint:#a0a8a3;--trt-line:rgba(255,255,255,.15);--trt-line-strong:rgba(255,255,255,.32);--trt-brand-ink:var(--trt-hue-dk);--trt-hue-ink:var(--trt-hue-dk);background:
  linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/32px 32px,var(--trt-graphite)}
.trt .trt-trustgrid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(24px,5vw,72px);align-items:start}
.trt .trt-section--trust .trt-spec{--trt-ink:#222021;--trt-muted:#555a56;--trt-line:#DAE1E5;--trt-line-strong:#B6C1C8;--trt-surface:#F2F5F7;--trt-hue-ink:#0F7A3F;--trt-brand-ink:#0F7A3F;border-radius:var(--trt-r)}
.trt .trt-section--trust .trt-spec caption{padding:16px 12px 12px}
.trt .trt-section--trust .trt-spec th[scope=row]{width:26%;color:var(--trt-ink);font-weight:600;font-family:var(--trt-font-head)}
.trt .trt-section--trust .trt-spec td{font-family:var(--trt-font);font-weight:400;color:#383b39}
.trt .trt-section--trust .trt-spec td:last-child{white-space:nowrap}
@media (max-width:860px){.trt .trt-trustgrid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.trt .trt-section--trust .trt-spec th[scope=row]{width:auto}.trt .trt-section--trust .trt-spec td:last-child{white-space:normal}}