/* Timberline — Workspace privacy (Data & Privacy feature image). CSS-only 15s loop. */
.tl-priv{container-type:inline-size;margin:0;max-width:1296px;font-family:"Jakarta","Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;color:#1b1b19;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.tl-priv *,.tl-priv *::before,.tl-priv *::after{box-sizing:border-box}
.tl-priv-frame{background:#f4f2ec;border:1px solid #e5e2da;border-radius:28px;padding:clamp(12px,3.2cqi,40px)}
.tl-priv-card{background:#fff;border-radius:20px;padding:clamp(16px,2.2cqi,28px);box-shadow:0 1px 2px rgba(24,28,38,.04),0 12px 32px -12px rgba(24,28,38,.12),0 32px 64px -32px rgba(24,28,38,.10)}

.tl-priv-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding-bottom:clamp(14px,1.6cqi,20px);margin-bottom:clamp(14px,1.6cqi,20px);border-bottom:1px solid #efede8}
.tl-priv-headtext{display:flex;flex-direction:column;gap:2px;min-width:0}
.tl-priv-title{margin:0;font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:#1b1b19}
.tl-priv-sub{margin:0;font-size:13px;line-height:1.4;color:#5e5b55}

.tl-priv-badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;line-height:1;white-space:nowrap;background:#eef2ff;color:#2c5ad6;border:1px solid #dbe3fb}
.tl-priv-badge svg{flex:none;width:14px;height:14px}
.tl-priv-badge-muted{background:#f3f1ec;color:#4f4c46;border-color:#e6e3dc}

.tl-priv-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@container (max-width:900px){.tl-priv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (max-width:560px){.tl-priv-grid{grid-template-columns:minmax(0,1fr)}}

.tl-priv-t1{--tl-priv-d:0s}
.tl-priv-t2{--tl-priv-d:2.5s}
.tl-priv-t3{--tl-priv-d:5s}
.tl-priv-t4{--tl-priv-d:7.5s}
.tl-priv-t5{--tl-priv-d:10s}
.tl-priv-t6{--tl-priv-d:12.5s}

.tl-priv-item{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;padding:16px 16px 14px 18px;border-radius:14px;background:#fbfaf7;border:1px solid #ecEAe4;overflow:hidden}
.tl-priv-top{display:flex;align-items:center;gap:10px;min-width:0}
.tl-priv-icon{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#f1efea;color:#5e5b55}
.tl-priv-icon svg{width:18px;height:18px}
.tl-priv-name{margin:0;font-size:14.5px;font-weight:600;line-height:1.3;letter-spacing:-.005em;color:#1b1b19;min-width:0}
.tl-priv-desc{margin:0;flex:1;font-size:13px;line-height:1.5;color:#5e5b55;text-wrap:pretty;overflow-wrap:anywhere}

.tl-priv-field{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:46px;margin-top:4px;padding:7px 8px;border-radius:12px;background:#ece9e1;border:1px solid transparent}

.tl-priv-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;max-width:100%;border-radius:8px;background:#fff;border:1px solid #e2e0da;font-size:12px;font-weight:500;line-height:1;color:#1b1b19;white-space:nowrap;box-shadow:0 1px 1px rgba(24,28,38,.04)}
.tl-priv-chip svg{flex:none;width:14px;height:14px;color:#5e5b55}
.tl-priv-select{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 9px 0 10px;max-width:100%;border-radius:10px;background:#fff;border:1px solid #dcdad3;font-size:12.5px;font-weight:500;line-height:1;color:#1b1b19;white-space:nowrap;box-shadow:0 1px 1px rgba(24,28,38,.04)}
.tl-priv-select svg{flex:none;width:14px;height:14px;color:#5e5b55}
.tl-priv-select .tl-priv-chev{width:12px;height:12px;color:#8a8f99}
.tl-priv-tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;background:#e9eeff;border:1px solid #cdd9fd;color:#2c5ad6;font-size:11px;font-weight:600;line-height:1;letter-spacing:.01em}
.tl-priv-field .tl-priv-badge{height:28px}

.tl-priv-lock{flex:none;width:14px;height:14px;color:#7a7f89;transform-box:fill-box;transform-origin:50% 70%}
.tl-priv-check path{stroke-dasharray:1;stroke-dashoffset:0}
.tl-priv-key{transform-box:fill-box;transform-origin:30% 70%}

.tl-priv-bar{position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:#4a7cff;opacity:0;transform:scaleY(.4)}
.tl-priv-toggle{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 10px 0 8px;max-width:100%;border-radius:10px;background:#fff;border:1px solid #dcdad3;font-size:12.5px;font-weight:500;line-height:1;color:#1b1b19;white-space:nowrap;box-shadow:0 1px 1px rgba(24,28,38,.04)}
.tl-priv-switch{position:relative;flex:none;width:28px;height:16px;border-radius:999px;background:#d9d6ce}
.tl-priv-switch::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(27,27,25,.25)}
.tl-priv-off{font-weight:600;color:#5e5b55}

/* Motion */
.tl-priv-bar,.tl-priv-switch::after,.tl-priv-item,.tl-priv-icon,.tl-priv-field,.tl-priv-lift,.tl-priv-lock-b,.tl-priv-check path,.tl-priv-ring,.tl-priv-pop,.tl-priv-key{animation-duration:15s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-delay:var(--tl-priv-d,0s)}
.tl-priv-item{animation-name:tl-priv-item}
.tl-priv-bar{animation-name:tl-priv-bar}
.tl-priv-switch::after{animation-name:tl-priv-nudge}
.tl-priv-icon{animation-name:tl-priv-icon}
.tl-priv-field{animation-name:tl-priv-field}
.tl-priv-lift{animation-name:tl-priv-lift}
.tl-priv-ring{animation-name:tl-priv-lift,tl-priv-ring}
.tl-priv-lock-b{animation-name:tl-priv-lock-b}
.tl-priv-check path{animation-name:tl-priv-draw}
.tl-priv-pop{animation-name:tl-priv-pop}
.tl-priv-key{animation-name:tl-priv-turn}

@keyframes tl-priv-item{
  0%,16.667%,100%{background-color:#fbfaf7;border-color:#ecEAe4;box-shadow:0 0 0 0 rgba(40,60,120,0)}
  2.667%,14%{background-color:#fff;border-color:#dde4f8;box-shadow:0 10px 24px -14px rgba(40,60,120,.22)}
}
@keyframes tl-priv-bar{
  0%,16.667%,100%{opacity:0;transform:scaleY(.4)}
  2.667%,14%{opacity:1;transform:scaleY(1)}
}
@keyframes tl-priv-icon{
  0%,16.667%,100%{color:#5e5b55;background-color:#f1efea}
  2.667%,14%{color:#4a7cff;background-color:#e9eeff}
}
@keyframes tl-priv-field{
  0%,16.667%,100%{background-color:#ece9e1;border-color:transparent}
  2.667%,14%{background-color:#e9eeff;border-color:rgba(74,124,255,.32)}
}
@keyframes tl-priv-lift{
  0%,16.667%,100%{transform:translateY(0)}
  2.667%,14%{transform:translateY(-2px)}
}
@keyframes tl-priv-ring{
  0%,3.5%,16.667%,100%{border-color:#dcdad3;box-shadow:0 0 0 0 rgba(74,124,255,0),0 1px 1px rgba(24,28,38,.04)}
  6%,13%{border-color:#4a7cff;box-shadow:0 0 0 3px rgba(74,124,255,.22),0 1px 1px rgba(24,28,38,.04)}
}
@keyframes tl-priv-lock-b{
  0%,4%,10%,100%{transform:rotate(0) translateY(0)}
  6%{transform:rotate(-14deg) translateY(-1.5px)}
  8%{transform:rotate(5deg) translateY(0)}
}
@keyframes tl-priv-draw{
  0%,8%,100%{stroke-dashoffset:0}
  1.5%,4%{stroke-dashoffset:1}
}
@keyframes tl-priv-pop{
  0%,9%,100%{opacity:1;transform:scale(1)}
  1.5%,4%{opacity:0;transform:scale(.7)}
  7%{opacity:1;transform:scale(1.06)}
}
@keyframes tl-priv-nudge{
  0%,3%,9%,100%{transform:translateX(0)}
  5.5%{transform:translateX(4px)}
}
@keyframes tl-priv-turn{
  0%,4%,12%,100%{transform:rotate(0)}
  8%{transform:rotate(-24deg)}
}

.tl-priv-card:hover,.tl-priv-card:hover *,.tl-priv-card:hover *::after{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  .tl-priv *,.tl-priv *::before,.tl-priv *::after{animation:none!important;transition:none!important}
}