/* GTMhub public workflow library: shared page CSS for library.html and library-workflow.html.
   Loads after the design system's colors_and_type.css and components.css; uses their tokens only.
   Nav and footer are lifted from ui_kits/marketing/home.html so the pages read as siblings. */
*{margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 var(--fs-body)/var(--lh-body) var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(color-mix(in srgb,var(--ink) 2.8%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ink) 2.8%,transparent) 1px,transparent 1px),
    linear-gradient(color-mix(in srgb,var(--ink) 1.1%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ink) 1.1%,transparent) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:var(--gut) 0}
button,input{font:inherit;color:inherit}
ul,ol{list-style:none}
.wrap{padding-left:var(--gut);padding-right:var(--gut)}
.sec{padding-top:var(--section)}
.sub{color:var(--muted)}
p,h1,h2,h3{text-wrap:pretty}
.h-lg{font:300 var(--fs-h2)/var(--lh-head) var(--sans);letter-spacing:var(--tr-h2);color:var(--ink)}
.h-lg:has(b){color:var(--tone)}
.h-lg b{font-weight:300;color:var(--ink)}
.h-hero{font:300 var(--fs-hero)/1.04 var(--sans);letter-spacing:var(--tr-display);text-wrap:balance}
.h-hero b{font-weight:500}
.head{display:flex;flex-direction:column;align-items:flex-start;gap:22px;margin-bottom:44px}
.head .sub{max-width:560px;font-size:var(--fs-lead)}
/* byline */
.by{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-12-5);color:var(--muted);white-space:nowrap}
.by .avatar{width:22px;height:22px;font-size:var(--fs-8);box-shadow:none}
.by b{font-weight:500;color:var(--ink)}
/* worker tags: who does the step */
.wk{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:var(--r-xs);font:400 var(--fs-9)/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--tone);box-shadow:inset 0 0 0 1px var(--line)}
.wk.ai{background:var(--ink);color:var(--d-text);box-shadow:none}
.wk.you{background:var(--lime);color:var(--on-lime);box-shadow:none}
.wk.op{box-shadow:inset 0 0 0 1px var(--ink-300);color:var(--ink)}
/* sign-off line */
.so{display:flex;align-items:flex-start;gap:8px;font-size:var(--fs-12-5);line-height:1.4;color:var(--muted)}
.so svg{flex:none;width:13px;height:13px;margin-top:2px;color:var(--ink)}
.so .wk{height:16px;margin-right:4px;vertical-align:1px}
.so em{font-style:normal;color:var(--ink)}
/* workflow cards: featured (full flow) and grid card */
.fx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.fx{display:flex;flex-direction:column;padding:22px 22px 18px;border-radius:var(--r-2xl);background:var(--raised);box-shadow:var(--lift),var(--hair)}
.fx-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.fx h3{margin-top:16px;font:500 var(--fs-20)/1.25 var(--sans);letter-spacing:var(--tr-title)}
.fx > p{margin-top:6px;font-size:var(--fs-14);color:var(--muted);line-height:1.5}
.fl{margin:20px 0 18px;position:relative}
.fl li{position:relative;display:grid;grid-template-columns:12px minmax(0,1fr);gap:12px;padding:7px 8px 7px 0}
.fl li::after{content:"";position:absolute;left:5.5px;top:21px;bottom:-9px;width:1px;background:var(--line-2)}
.fl li:last-child::after{display:none}
.fl li > i{width:12px;height:12px;margin-top:3px;border-radius:3px;background:var(--raised);box-shadow:inset 0 0 0 1.25px var(--line-2);position:relative;z-index:1}
.fl li.t > i{background:var(--ink);box-shadow:none}
.fl li.o > i{background:var(--lime);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink-fixed) 15%,transparent)}
.fl li.a{margin:2px -8px 2px -8px;padding:7px 8px;grid-template-columns:12px minmax(0,1fr);border-radius:var(--r-md);background:var(--lime-wash);box-shadow:inset 0 0 0 1px var(--lime-line)}
.fl li.a::after{left:13.5px}
.fl li.a > i{box-shadow:inset 0 0 0 1.25px var(--ink)}
.fl .st{font-size:var(--fs-13-5);line-height:1.35}
.fl li.t .st,.fl li.o .st{font-weight:500}
.fl .k{display:block;margin-bottom:5px;font-size:var(--fs-9)}
.fl .meta{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.fl .meta .tl i{padding:4px 5px;font-size:var(--fs-9-5)}
.fx .so{padding-bottom:14px}
.fx-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px}
.fx-foot .arrow-link{font-size:var(--fs-13-5);gap:10px}
.fx-foot .sq{width:30px;height:30px;border-radius:8px}
.cad{white-space:nowrap;font:400 var(--fs-10)/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tone)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.wf{min-height:0;padding:16px 16px 12px;transition:box-shadow var(--t-ui),transform var(--t-ui)}
.wf:hover{box-shadow:var(--lift),var(--hair)}
.wf-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.wf > b{font-size:var(--fs-15);margin-top:12px}
.wf .by b{display:inline;margin:0;font-size:var(--fs-12-5)}
.wf > p{margin-top:4px;font-size:var(--fs-13);line-height:1.45;color:var(--muted)}
.wf .wf-flow{margin-top:14px;padding:4px 0 12px}
.wf-flow i.a{background:var(--lime-wash);box-shadow:inset 0 0 0 1.25px var(--ink)}
.io{display:flex;flex-direction:column;gap:5px;font-size:var(--fs-12-5);line-height:1.35;color:var(--muted)}
.io span{display:grid;grid-template-columns:8px minmax(0,1fr);gap:8px;align-items:baseline}
.io span::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--ink);transform:translateY(-1px)}
.io span.o{color:var(--ink)}
.io span.o::before{background:var(--lime);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink-fixed) 15%,transparent)}
.wf .tl{margin-top:12px}
.wf .so{margin-top:12px}
.wf-foot{margin-top:auto;padding-top:14px}
.wf-foot > div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:11px;border-top:1px solid var(--line)}
/* closing */
.close{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.close .avatar{width:52px;height:52px;font-size:var(--fs-14)}
.close .sub{max-width:460px}
.close .arrow-link{margin-top:10px}
.fperson{display:flex;align-items:center;gap:12px;line-height:1.3}
.fperson .avatar{width:40px;height:40px;font-size:var(--fs-11);box-shadow:none}
.fperson b{display:block;font-weight:500;font-size:var(--fs-14-5);color:var(--ink)}
.fperson small{font-size:var(--fs-12-5);color:var(--faint)}
.gmark{width:20px;height:20px;color:var(--ink)}
@media (max-width:1100px){}
@media (max-width:1180px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.grid{grid-template-columns:1fr}
.fx{padding:18px 16px 14px}
.h-hero{font-size:var(--fs-40)}
.h-lg{font-size:var(--fs-30)}
.form-in{flex-wrap:wrap}}
@media (max-width:900px){}