/* Tracom Templates Center: paper-and-index 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}


/* hero: a paper sheet on stacked paper */
.trt .trt-hero__docs{justify-items:center;position:relative;padding-block:8px}
.trt .trt-hero__docs .trt-docsheet{max-width:400px}
.trt .trt-hero__docs::before{content:"";position:absolute;inset-block:22px 0;inset-inline:calc(50% - 150px) auto;width:300px;border-radius:3px;background:#3a393a;transform:rotate(calc(6deg * var(--trt-dir,1)));box-shadow:0 30px 50px -30px rgba(0,0,0,.8)}
.trt .trt-hero__docs .trt-docsheet{z-index:1}
.trt .trt-hero__docs::before{aspect-ratio:210/297}

/* how: heading left, wire steps right */
.trt .trt-section--how2{background:#fff}
.trt .trt-how2{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,72px);align-items:start}
.trt .trt-how2 .trt-steps h3{font-size:19px}
.trt .trt-how2 .trt-steps p{font-size:16px;max-width:52ch}
@media (max-width:860px){.trt .trt-how2{grid-template-columns:minmax(0,1fr)}}

/* start from your job: a ruled index */
.trt .trt-jobs{display:grid;border-top:3px solid var(--trt-ink)}
.trt .trt-jobs a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto auto;gap:6px 20px;align-items:center;padding:16px 6px;border-bottom:1px solid var(--trt-line-strong);color:var(--trt-ink);transition:background .15s}
.trt .trt-jobs a:hover{background:var(--trt-surface);text-decoration:none}
.trt .trt-jobs a:focus-visible{box-shadow:var(--trt-focus);outline:0}
.trt .trt-jobs b{font:600 17px/1.3 var(--trt-font-head)}
.trt .trt-jobs span{font-size:15px;color:var(--trt-muted)}
.trt .trt-jobs svg{width:18px;height:18px;color:var(--trt-hue-ink)}
.trt .trt-fmtchip{font:600 12.5px/1.2 var(--trt-font-num);padding:4px 11px;border:1px solid var(--trt-line-strong);border-radius:var(--trt-r-pill);background:#fff;color:var(--trt-ink)}
@media (max-width:760px){
  .trt .trt-jobs a{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"b chip arrow" "t t t"}
  .trt .trt-jobs b{grid-area:b}.trt .trt-jobs span{grid-area:t}.trt .trt-jobs .trt-fmtchip{grid-area:chip}.trt .trt-jobs svg{grid-area:arrow}
}

/* packs: index of the nine groups */
.trt .trt-packsgrid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(24px,5vw,72px);align-items:start}
.trt .trt-index{margin:0;display:grid;border-top:3px solid var(--trt-ink)}
.trt .trt-index>div{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);gap:6px 24px;padding:15px 4px;padding-inline-start:24px;border-bottom:1px solid var(--trt-line-strong)}
.trt .trt-index>div::before{content:"";position:absolute;inset-inline-start:4px;top:21px;width:11px;height:11px;background:var(--trt-hue);-webkit-mask:var(--trt-arrow) center/contain no-repeat;mask:var(--trt-arrow) center/contain no-repeat}
.trt .trt-index dt{font:600 16px/1.35 var(--trt-font-head);color:var(--trt-ink)}
.trt .trt-index dd{margin:0;font-size:15px;color:var(--trt-muted)}
@media (max-width:860px){.trt .trt-packsgrid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.trt .trt-index>div{grid-template-columns:minmax(0,1fr)}}

/* notes before use */
.trt .trt-callouts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.trt .trt-callouts .trt-callout{padding-inline-start:56px;min-height:100%}
@media (max-width:900px){.trt .trt-callouts{grid-template-columns:minmax(0,1fr)}}
.trt .trt-compare__col>footer .trt-link-arrow{margin-top:10px;display:flex}

.trt .trt-callouts>*{margin:0}

/* nine pack pills: wrap on wide screens instead of hiding the last ones in a scroller (phones keep the swipe row) */
@media (min-width:761px){.trt .trt-section .trt-pills{flex-wrap:wrap;overflow:visible;margin:0;padding:0}}