/* ---- free tools: shared ---- */
.tl-hero-note{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.tl-hero-note li{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;font-size:13px;line-height:1;color:var(--ink-2);
  background:rgba(245,242,236,.045);border:1px solid rgba(245,242,236,.1)}
.tl-hero-note li svg{color:var(--blue-2);flex:0 0 auto}
.tl-sec{padding:clamp(28px,4vw,56px) 0 clamp(52px,6vw,88px);border-bottom:1px solid var(--rule)}
.tl-wrap{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:22px;align-items:start}
.tl-form{display:grid;gap:14px;min-width:0}
.tl-card{position:relative;padding:20px 22px 22px;border-radius:16px;background:linear-gradient(170deg,rgba(46,46,46,.72),rgba(31,31,31,.72));
  border:1px solid rgba(245,242,236,.1);min-width:0}
.tl-card > h2,.tl-card > legend,.tl-step{display:flex;align-items:center;gap:10px;margin:0 0 16px;padding:0;font-family:var(--ff-mono);font-size:11px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.tl-step b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:11px;font-weight:600;color:var(--paper);background:var(--pink-3)}
fieldset.tl-card{margin:0;min-inline-size:0}
.tl-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tl-field{min-width:0}
.tl-field + .tl-field{margin-top:14px}
.tl-grid2 .tl-field + .tl-field{margin-top:0}
.tl-field > label,.tl-field > .tl-lab{display:block;margin:0 0 7px;font-size:14px;font-weight:500;color:var(--ink-2)}
.tl-field small,.tl-hint{display:block;margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--ink-4)}
.tl-field small b{color:var(--ink-3);font-weight:600}
.tl-in{box-sizing:border-box;width:100%;padding:11px 13px;border-radius:10px;background:#141414;border:1px solid rgba(245,242,236,.16);color:var(--ink);
  font:15px/1.4 var(--ff-body);transition:border-color .15s ease,box-shadow .15s ease}
.tl-in::placeholder{color:var(--ink-4)}
.tl-in:hover{border-color:rgba(245,242,236,.28)}
.tl-in:focus{outline:0;border-color:var(--blue-2);box-shadow:0 0 0 3px rgba(110,193,229,.2)}
select.tl-in{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
  background:#141414 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23D8D4CC' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center}
select.tl-in optgroup{background:#1f1f1f;color:var(--ink-3)}
select.tl-in option{background:#1f1f1f;color:var(--ink)}
textarea.tl-in{min-height:88px;resize:vertical;line-height:1.5}
.tl-seg{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;border:0}
.tl-seg input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.tl-seg label{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:999px;cursor:pointer;font-size:13.5px;color:var(--ink-2);
  background:rgba(245,242,236,.035);border:1px solid rgba(245,242,236,.14);transition:background .15s ease,border-color .15s ease,color .15s ease}
.tl-seg label:hover{border-color:rgba(245,242,236,.3);color:var(--ink)}
.tl-seg input:checked + label{color:var(--ink);background:rgba(231,94,115,.16);border-color:rgba(231,94,115,.7)}
.tl-seg input:focus-visible + label{box-shadow:0 0 0 3px rgba(110,193,229,.3)}
.tl-switch{display:flex;align-items:flex-start;gap:12px;cursor:pointer}
.tl-switch input{position:absolute;opacity:0;width:1px;height:1px}
.tl-switch i{flex:0 0 auto;position:relative;width:40px;height:23px;margin-top:1px;border-radius:999px;background:#333;border:1px solid rgba(245,242,236,.2);transition:background .15s ease}
.tl-switch i::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:var(--ink-2);transition:transform .18s ease}
.tl-switch input:checked + i{background:var(--red);border-color:var(--red)}
.tl-switch input:checked + i::after{transform:translateX(17px);background:#fff}
.tl-switch input:focus-visible + i{box-shadow:0 0 0 3px rgba(110,193,229,.3)}
.tl-switch span{font-size:14px;line-height:1.45;color:var(--ink-2)}
.tl-switch span small{display:block;color:var(--ink-4);font-size:12.5px;margin-top:3px}

/* result panel */
.tl-result{position:sticky;top:92px;isolation:isolate;border-radius:20px;padding:22px;min-width:0;
  background:linear-gradient(165deg,rgba(46,46,46,.94),rgba(25,25,25,.96) 70%);border:1px solid rgba(245,242,236,.12);
  box-shadow:0 40px 90px -50px rgba(231,94,115,.55),0 18px 40px -30px rgba(110,193,229,.4),inset 0 1px 0 rgba(255,255,255,.07)}
.tl-result::before{content:"";position:absolute;inset:-1px;border-radius:21px;padding:1px;z-index:-1;
  background:linear-gradient(140deg,rgba(255,143,168,.55),rgba(245,242,236,.06) 40%,rgba(110,193,229,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.tl-rk{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 12px;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.tl-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;font-family:var(--ff-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;white-space:nowrap}
.tl-badge.is-pub{color:#6FD3A0;background:rgba(111,211,160,.12);border:1px solid rgba(111,211,160,.4)}
.tl-badge.is-rot{color:#F2B45A;background:rgba(242,180,90,.1);border:1px solid rgba(242,180,90,.4)}
.tl-badge.is-est{color:var(--blue-2);background:rgba(110,193,229,.1);border:1px solid rgba(110,193,229,.4)}
.tl-big{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:4px 0 6px}
.tl-big b{font-family:var(--ff-display);font-weight:700;font-size:clamp(40px,4.4vw,58px);line-height:1;letter-spacing:-.035em;color:var(--ink)}
.tl-big span{font-size:16px;color:var(--ink-2)}
.tl-sub{margin:0 0 16px;font-size:14px;line-height:1.55;color:var(--ink-3)}
.tl-sub b{color:var(--ink-2);font-weight:600}
.tl-ladder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 16px;padding:0;list-style:none}
.tl-ladder li{padding:11px 12px 12px;border-radius:12px;background:rgba(245,242,236,.035);border:1px solid rgba(245,242,236,.09)}
.tl-ladder li.is-on{background:linear-gradient(160deg,rgba(231,94,115,.2),rgba(231,94,115,.05));border-color:rgba(231,94,115,.55)}
.tl-ladder span{display:block;font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.tl-ladder b{display:block;margin-top:5px;font-family:var(--ff-display);font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.01em;white-space:nowrap}
.tl-ladder small{display:block;margin-top:3px;font-size:11.5px;line-height:1.35;color:var(--ink-4)}
.tl-bar{position:relative;height:6px;margin:-6px 0 18px;border-radius:999px;background:rgba(245,242,236,.08);overflow:hidden}
.tl-bar i{position:absolute;inset:0 auto 0 0;border-radius:999px;background:linear-gradient(90deg,var(--blue-2),var(--pink-3),var(--red));transition:width .35s ease}
.tl-facts{display:grid;gap:8px;margin:0 0 16px;padding:0;list-style:none}
.tl-facts li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;padding:11px 12px;border-radius:12px;
  background:rgba(245,242,236,.03);border:1px solid rgba(245,242,236,.08);font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.tl-facts li svg{width:20px;height:20px;padding:3px;border-radius:6px;color:var(--blue-2);background:rgba(110,193,229,.12)}
.tl-facts li b{color:var(--ink);font-weight:600}
.tl-facts li.is-warn svg{color:#F2B45A;background:rgba(242,180,90,.12)}
.tl-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.tl-acts .btn{width:auto}
.tl-est-link{display:inline-block;margin-top:12px;font-size:14px;color:var(--ink-2);text-decoration:underline;text-decoration-color:rgba(245,242,236,.35);text-underline-offset:3px}
.tl-est-link:hover{color:var(--ink)}
.tl-est-link[hidden]{display:none}
.tl-src{margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--rule);font-size:12.5px;line-height:1.55;color:var(--ink-4)}
.tl-src a{color:var(--blue-2);text-decoration:underline;text-decoration-color:rgba(110,193,229,.4);text-underline-offset:2px}
.tl-src a::after{content:"\2197";font-size:.85em;margin-left:1px}

/* explainer sections */
.tl-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tl-cards article{padding:22px;border-radius:16px;background:rgba(245,242,236,.03);border:1px solid rgba(245,242,236,.1)}
.tl-cards h3{margin:14px 0 8px;font-family:var(--ff-display);font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.tl-cards p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-3)}
.tl-cards p b{color:var(--ink-2)}
.tl-tbl-wrap{overflow-x:auto;border:1px solid rgba(245,242,236,.13);border-radius:14px}
.tl-tbl{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5}
.tl-tbl th,.tl-tbl td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
.tl-tbl thead th{background:#121212;font-family:var(--ff-mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.tl-tbl td{color:var(--ink-3)}
.tl-tbl td:first-child{color:var(--ink);font-weight:500}
.tl-tbl tbody tr:last-child td{border-bottom:0}
.tl-tbl .num{font-family:var(--ff-mono);font-size:13px;white-space:nowrap;color:var(--ink-2)}
.tl-reads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tl-reads a{display:block;padding:15px 17px;border-radius:14px;border:1px solid rgba(245,242,236,.1);background:rgba(245,242,236,.03);color:inherit;text-decoration:none;
  transition:border-color .2s ease,background .2s ease,transform .2s ease}
.tl-reads a:hover{border-color:rgba(255,143,168,.45);background:rgba(231,94,115,.07);transform:translateY(-2px)}
.tl-reads span{display:block;font-family:var(--ff-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
.tl-reads b{display:block;margin-top:6px;font-family:var(--ff-display);font-size:16px;font-weight:700;line-height:1.3;color:var(--ink)}
.tl-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tl-tool{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px 20px;border-radius:16px;
  border:1px solid rgba(245,242,236,.12);background:linear-gradient(160deg,rgba(46,46,46,.6),rgba(31,31,31,.6));color:inherit;text-decoration:none;
  transition:border-color .2s ease,transform .2s ease}
.tl-tool:hover{border-color:rgba(255,143,168,.5);transform:translateY(-2px)}
.tl-tool b{display:block;font-family:var(--ff-display);font-size:17px;font-weight:700;color:var(--ink)}
.tl-tool small{display:block;margin-top:3px;font-size:13.5px;line-height:1.45;color:var(--ink-3)}
.tl-tool > span:last-child{color:var(--ink-4);font-size:20px}
.tl-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(150deg,var(--i1),var(--i2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -8px 14px rgba(0,0,0,.24),0 10px 22px -10px rgba(0,0,0,.85)}
.tl-ic svg{width:23px;height:23px;color:#fff;filter:drop-shadow(0 1.5px 1.2px rgba(0,0,0,.35))}
.tl-disc{margin:18px 0 0;font-size:13px;line-height:1.6;color:var(--ink-4);max-width:80ch}
.tl-disc a{color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
.cx .tl-cards a,.cx .tl-sec p a:not(.btn){color:var(--pink-3)}

@media (max-width:1060px){
  .tl-wrap{grid-template-columns:1fr}
  .tl-result{position:relative;top:0}
  .tl-cards,.tl-reads{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .tl-grid2,.tl-cards,.tl-reads,.tl-tools{grid-template-columns:1fr}
  .tl-card{padding:16px 16px 18px}
  .tl-result{padding:16px}
  .tl-ladder b{font-size:16px}
  .tl-acts .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.tl-reads a:hover,.tl-tool:hover{transform:none}}

/* compact hero for tools */
.cx-hero.tl-hero{padding-bottom:clamp(30px,4vw,52px)}
.tl-hero .cx-hero-text{max-width:860px}
.tl-hero h1{max-width:20ch}
/* tools hero: a small illustration card on the right */
@media (min-width:981px){.tl-hero-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(32px,4.5vw,72px)}}
@media (max-width:980px){.tl-hero-grid{grid-template-columns:minmax(0,1fr)}}
.tl-hero.has-art h1{max-width:none;text-wrap:balance}
.tl-art{position:relative;border-radius:20px;padding:20px 20px 14px;isolation:isolate;max-width:540px;justify-self:end;width:100%;
  background:linear-gradient(165deg,rgba(46,46,46,.9),rgba(25,25,25,.92) 70%);border:1px solid rgba(245,242,236,.12);
  box-shadow:0 40px 90px -50px rgba(231,94,115,.55),0 18px 40px -30px rgba(110,193,229,.4),inset 0 1px 0 rgba(255,255,255,.07)}
.tl-art::before{content:"";position:absolute;inset:-1px;border-radius:21px;padding:1px;z-index:-1;
  background:linear-gradient(140deg,rgba(255,143,168,.5),rgba(245,242,236,.05) 40%,rgba(110,193,229,.42));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.tl-art-k{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 2px 12px;
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.tl-art-k b{color:var(--pink-3);font-weight:500}
.tl-art svg{display:block;width:100%;height:auto}
@media (max-width:980px){.tl-art{display:none}}
.cx [hidden]{display:none!important}
.tl-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.tl-opt{margin-left:6px;padding:2px 7px;border-radius:999px;font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);border:1px solid rgba(245,242,236,.14)}
.tl-unit-l{color:var(--ink-3);font-weight:400}
.tl-hint a,.tl-disc a:not(.cx-ext){color:var(--pink-3);text-decoration:underline;text-underline-offset:2px}
#e-from{margin:0;padding:12px 14px;border-radius:12px;background:rgba(110,193,229,.1);border:1px solid rgba(110,193,229,.3);color:var(--ink-2)}
.tl-src a.tl-int{color:var(--pink-3);text-decoration-color:rgba(255,143,168,.45)}
.tl-src a.tl-int::after{content:none}
.tl-srclist{margin:8px 0 12px;padding-left:18px;columns:2;column-gap:28px}
.tl-srclist li{margin:0 0 5px;break-inside:avoid}
.tl-acts-c{justify-content:center;margin-top:22px}

/* AI Act generator */
.ad-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ad-sec{padding:0}
.ad-sec > summary{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:center;padding:16px 18px;cursor:pointer;list-style:none}
.ad-sec > summary::-webkit-details-marker{display:none}
.ad-n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-family:var(--ff-mono);font-size:12px;color:var(--ink);border:1px solid var(--rule-strong)}
.ad-sec[data-done="all"] .ad-n{background:#6FD3A0;border-color:#6FD3A0;color:#0f0f0f}
.ad-sec[data-done="some"] .ad-n{border-color:#F2B45A;color:#F2B45A}
.ad-t b{display:block;font-family:var(--ff-display);font-size:16.5px;font-weight:700;color:var(--ink)}
.ad-t em{display:block;font-style:normal;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink-4);margin-top:2px}
.ad-cnt{font-family:var(--ff-mono);font-size:11px;color:var(--ink-3);padding:3px 8px;border-radius:999px;border:1px solid rgba(245,242,236,.14)}
.ad-body{padding:2px 18px 20px;border-top:1px solid var(--rule)}
.ad-body > .tl-field:first-child,.ad-body > .tl-hint + .tl-field{margin-top:16px}
.ad-ref{font-style:normal;font-family:var(--ff-mono);font-size:10.5px;color:var(--blue-2);margin-left:6px;letter-spacing:.03em}
.ad-out{display:flex;flex-direction:column;max-height:calc(100vh - 110px)}
.ad-prog{margin:0 0 12px}
.ad-saved{color:var(--ink-4)}
.ad-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px}
.ad-tools .btn{width:auto;min-height:40px;padding:0 14px}
.ad-mini{display:inline-flex;align-items:center;min-height:32px;padding:0 11px;border-radius:8px;cursor:pointer;font-family:var(--ff-mono);font-size:11px;
  letter-spacing:.04em;color:var(--ink-2);background:rgba(245,242,236,.04);border:1px solid rgba(245,242,236,.14)}
.ad-mini:hover{border-color:rgba(245,242,236,.35);color:var(--ink)}
.ad-mini.is-confirm{border-color:var(--red);color:var(--red-bright)}
.ad-doc{flex:1 1 auto;min-height:260px;overflow:auto;padding:26px 28px;border-radius:12px;background:#FBFAF7;color:#222;font-family:var(--ff-body);
  font-size:13.5px;line-height:1.6;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.ad-doc h1{margin:0 0 6px;font-family:var(--ff-display);font-size:22px;line-height:1.2;color:#111;letter-spacing:-.01em}
.ad-doc .ad-meta{margin:0 0 10px;color:#555;font-size:12.5px}
.ad-doc .ad-note{margin:0 0 16px;padding:9px 12px;border-left:3px solid #E75E73;background:#F3EFE8;color:#444;font-size:12px}
.ad-doc h2{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:22px 0 8px;padding-top:12px;border-top:1px solid #E4DFD6;font-family:var(--ff-display);font-size:16px;color:#111}
.ad-doc h2 span{font-family:var(--ff-mono);font-size:11px;color:#C44960}
.ad-doc h2 em,.ad-doc h3 em{font-style:normal;font-family:var(--ff-mono);font-size:10.5px;font-weight:400;color:#2C6E91}
.ad-doc h3{margin:12px 0 3px;font-size:13px;font-weight:600;color:#222}
.ad-doc p{margin:0 0 6px}
.ad-doc .ad-todo,.ad-doc td i{color:#B4603A;font-style:italic}
.ad-doc table{width:100%;border-collapse:collapse;font-size:12.5px}
.ad-doc th,.ad-doc td{padding:6px 8px;border-bottom:1px solid #E4DFD6;text-align:left;vertical-align:top}
.ad-doc th{width:38%;color:#555;font-weight:500}
.ad-time{padding:22px;border-radius:16px;border:1px solid rgba(245,242,236,.12);background:rgba(245,242,236,.025)}
.ad-time h3{margin:0 0 16px;font-family:var(--ff-mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.ad-time ol{list-style:none;margin:0 0 0 5px;padding:0 0 0 18px;border-left:1px solid var(--rule-strong)}
.ad-time li{position:relative;padding-bottom:16px}
.ad-time li::before{content:"";position:absolute;left:-23px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--paper);border:2px solid var(--blue-2)}
.ad-time time{display:block;font-family:var(--ff-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-2)}
.ad-time li p{margin:4px 0 0;font-size:14px;line-height:1.55;color:var(--ink-2)}
.ad-time-src{margin:4px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-4)}
@media (max-width:1060px){
  .ad-wrap,.tl-two{grid-template-columns:1fr}
  .ad-out{max-height:none}
  .ad-doc{max-height:70vh}
}
@media (max-width:640px){.tl-srclist{columns:1}.ad-doc{padding:18px 16px}}
/* legends sit inside the card rather than on its border */
fieldset.tl-card > legend{float:left;width:100%}
fieldset.tl-card > legend + *{clear:both}
.tl-field > label.tl-switch{display:flex;margin:0}
.tl-switch span{display:block}
#o-credits{font-size:clamp(30px,3.3vw,46px);letter-spacing:-.03em}
.tl-ladder b{overflow-wrap:anywhere;white-space:normal}
.tl-plan-note{margin:-8px 0 16px}
/* phones: the Pilot / Workable / Strong tiles stack as rows (label left, figure right), on
   both tools; three tiles side by side left 64px for figures like 3,000,000 */
@media (max-width:640px){
  .tl-ladder{grid-template-columns:1fr}
  .tl-ladder li{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:baseline;gap:0 10px}
  .tl-ladder li b{grid-row:1/3;grid-column:2;margin-top:0}
  .tl-ladder li small{grid-column:1}
  .tl-rk{flex-wrap:wrap}
}
.tl-ladder b{overflow-wrap:normal}

/* in-house comparison (estimator) */
.tl-vs{margin:0 0 16px;padding:14px 14px 12px;border-radius:14px;background:linear-gradient(160deg,rgba(110,193,229,.09),rgba(110,193,229,.02));border:1px solid rgba(110,193,229,.28)}
.tl-vs-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.tl-vs-head span{font-family:var(--ff-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.tl-vs-head b{font-family:var(--ff-display);font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--blue-2);white-space:nowrap}
.tl-vs-row{display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:10px;align-items:center;margin:0 0 7px;font-size:12.5px;color:var(--ink-3)}
.tl-vs-row i{position:relative;display:block;height:8px;border-radius:999px;background:rgba(245,242,236,.07);overflow:hidden}
.tl-vs-row s{position:absolute;inset:0 auto 0 0;border-radius:999px;background:rgba(245,242,236,.32);transition:width .35s ease}
.tl-vs-row.is-df s{background:linear-gradient(90deg,var(--blue-2),var(--pink-3))}
.tl-vs-row.is-df span{color:var(--ink);font-weight:600}
.tl-vs-row b{font-family:var(--ff-mono);font-size:12px;font-weight:500;color:var(--ink-2);white-space:nowrap;text-align:right}
.tl-vs-row.is-df b{color:var(--ink)}
.tl-vs-hours{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;align-items:start;margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.tl-vs-hours svg{width:18px;height:18px;margin-top:1px;color:var(--blue-2)}
.tl-vs-hours b{color:var(--ink);font-weight:600}
.tl-vs-note{margin:8px 0 0;font-size:11px;line-height:1.5;color:var(--ink-4)}
@media (max-width:520px){
  .tl-vs-head{flex-wrap:wrap}
  .tl-vs-row{grid-template-columns:minmax(0,1fr) auto;row-gap:5px;margin-bottom:10px}
  .tl-vs-row span{grid-row:1;grid-column:1}
  .tl-vs-row b{grid-row:1;grid-column:2}
  .tl-vs-row i{grid-row:2;grid-column:1/3}
  .tl-vs-row b{white-space:normal;overflow-wrap:anywhere}
}
/* phones: the ranges table becomes one card per task (labels from data-label) */
@media (max-width:600px){
  #ranges .tl-tbl-wrap{overflow:visible}
  #ranges .tl-tbl,#ranges .tl-tbl tbody{display:block}
  #ranges .tl-tbl thead{display:none}
  #ranges .tl-tbl tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px;padding:14px 16px;border-bottom:1px solid var(--rule)}
  #ranges .tl-tbl tbody tr:last-child{border-bottom:0}
  #ranges .tl-tbl td{display:block;padding:0;border:0}
  #ranges .tl-tbl td:first-child{grid-column:1/-1;font-size:15px;line-height:1.4}
  #ranges .tl-tbl td[data-label]::before{content:attr(data-label);display:block;margin-bottom:2px;font-family:var(--ff-mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
  #ranges .tl-tbl td:nth-child(n+5){grid-column:1/-1;font-size:13.5px}
  #ranges .tl-tbl td:nth-child(n+5)::before{display:inline;margin:0 8px 0 0}
  #ranges .tl-tbl .num{font-size:14px;color:var(--ink)}
}

/* document header: Dataset Finder logo + address, as in the guidelines generator */
.ad-doc .ad-brand{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding:0 0 10px;margin:0 0 16px;border-bottom:1px solid #E4DFD6}
.ad-doc .ad-brand img{height:24px;width:auto;display:block}
.ad-doc .ad-brand span{font-family:var(--ff-mono);font-size:10.5px;color:#888}


/* ---- interactive blog posts (guidelines generator, kappa calculator) ---- */
.btool{margin:4px 0 46px;padding:22px;border-radius:24px;background:linear-gradient(170deg,rgba(255,255,255,.025),rgba(255,255,255,.01));
  border:1px solid rgba(245,242,236,.08);scroll-margin-top:90px}
.btool [hidden]{display:none!important}
.btool a:not(.btn){text-decoration:none}
.btool .btn{text-decoration:none}
@media (min-width:1061px){.btool .tl-result{top:88px}.btool .ad-out{max-height:calc(100vh - 106px)}}
@media (max-width:700px){.btool{margin:0 -8px 34px;padding:12px;border-radius:18px}}

/* guidelines generator */
.gd-g2{margin-top:14px}
.ad-body > .gd-g2:first-child{margin-top:16px}
.gd-labels{display:grid;gap:12px;margin:14px 0 12px}
.gd-label{padding:14px 14px 16px;border-radius:14px;background:rgba(245,242,236,.025);border:1px solid rgba(245,242,236,.1)}
.gd-label-h{display:flex;justify-content:space-between;align-items:center;margin:0 0 10px;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--pink-3)}
.gd-rm{appearance:none;background:none;border:0;padding:4px 6px;margin:-4px -6px;cursor:pointer;font:inherit;letter-spacing:.06em;color:var(--ink-4);border-radius:6px}
.gd-rm:hover{color:var(--red-bright);background:rgba(231,94,115,.08)}
.gd-label .tl-field + .tl-field{margin-top:10px}
.gd-label textarea.tl-in{min-height:58px}
.gd-label label{font-size:13px}
.gd-add{min-height:38px;padding:0 14px;color:var(--pink-3);border-color:rgba(255,143,168,.4)}
.gd-rules{display:grid;gap:6px}
.gd-rule{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;padding:9px 11px;border-radius:10px;cursor:pointer;
  background:rgba(245,242,236,.025);border:1px solid rgba(245,242,236,.09);font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.gd-rule input{width:16px;height:16px;margin:2px 0 0;accent-color:var(--red)}
.gd-rule:has(input:not(:checked)) span{color:var(--ink-4);text-decoration:line-through;text-decoration-color:rgba(245,242,236,.25)}
.gd-next{margin:0 0 14px;padding:13px 14px;border-radius:12px;background:linear-gradient(160deg,rgba(231,94,115,.13),rgba(231,94,115,.03));border:1px solid rgba(231,94,115,.35)}
.gd-next p{margin:0 0 9px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.gd-next p b{color:var(--ink)}
.gd-next-row{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.gd-go{display:inline-flex;align-items:center;min-height:34px;padding:0 13px;border-radius:8px;background:var(--red);color:#fff;font-family:var(--ff-mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;transition:background .2s ease}
.gd-go:hover{background:var(--red-bright)}
.gd-alt{font-size:13px;color:var(--pink-3);text-decoration:underline!important;text-underline-offset:3px;text-decoration-color:rgba(255,143,168,.45)!important}
.ad-doc ul{margin:0 0 8px 18px;padding:0}
.ad-doc li{margin:0 0 3px}
.ad-doc thead th{background:#F3EFE8;color:#333;font-weight:600}
.ad-doc .gd-foot{margin-top:18px;font-size:11px;color:#888}
.gd-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:12px;align-items:stretch;list-style:none;margin:18px 0 0;padding:0}
.gd-steps li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start;padding:15px 16px;border-radius:14px;background:rgba(245,242,236,.03);border:1px solid rgba(245,242,236,.09)}
.gd-steps li > b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-family:var(--ff-mono);font-size:12px;color:var(--paper);background:var(--pink-3)}
.gd-steps li span{font-size:13.5px;line-height:1.5;color:var(--ink-3)}
.gd-steps li strong{display:block;margin-bottom:2px;color:var(--ink);font-weight:600}
.gd-steps .gd-steps-cta{display:flex;flex-direction:column;justify-content:center;gap:8px;background:none;border:0;padding:0}
.gd-steps .gd-steps-cta .btn{width:100%;min-height:42px}
@media (max-width:1180px){.gd-steps{grid-template-columns:repeat(3,minmax(0,1fr))}.gd-steps .gd-steps-cta{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}.gd-steps .gd-steps-cta .btn{width:auto}}
@media (max-width:760px){.gd-steps{grid-template-columns:1fr}.gd-steps .gd-steps-cta{flex-direction:column}.gd-steps .gd-steps-cta .btn{width:100%}}

/* kappa calculator */
.kp-wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.kp-pane{margin-top:16px}
.kp-g2{margin-bottom:12px}
.kp-axis{margin:0 0 10px}
.kp-axis b{color:var(--ink-3)}
.kp-grid-wrap{overflow-x:auto;border-radius:12px;border:1px solid rgba(245,242,236,.12)}
.kp-grid{width:100%;border-collapse:collapse;font-size:13px}
.kp-grid th,.kp-grid td{padding:6px;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule);text-align:center;vertical-align:middle}
.kp-grid thead th{background:#121212;font-family:var(--ff-mono);font-size:10.5px;font-weight:500;letter-spacing:.04em;color:var(--ink-2);max-width:120px;overflow-wrap:anywhere}
.kp-grid tbody th{background:#151515;font-weight:500;color:var(--ink-2);text-align:left;padding:6px 10px;max-width:140px;overflow-wrap:anywhere}
.kp-corner{text-align:left!important;line-height:1.3}
.kp-corner span{display:block;color:var(--ink-4)}
.kp-cell{box-sizing:border-box;width:100%;min-width:58px;padding:8px 6px;border-radius:8px;background:#141414;border:1px solid rgba(245,242,236,.14);color:var(--ink);
  font:500 14px/1.2 var(--ff-mono);text-align:center;-moz-appearance:textfield}
.kp-cell::-webkit-outer-spin-button,.kp-cell::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.kp-cell:focus{outline:0;border-color:var(--blue-2);box-shadow:0 0 0 3px rgba(110,193,229,.2)}
.kp-grid td.is-diag{background:rgba(111,211,160,.07)}
.kp-grid td.is-diag .kp-cell{border-color:rgba(111,211,160,.4)}
.kp-grid .kp-tot,.kp-grid tr.kp-tot td,.kp-grid tr.kp-tot th{font-family:var(--ff-mono);font-size:12px;color:var(--ink-3);background:rgba(245,242,236,.02)}
.kp-paste{font-family:var(--ff-mono);font-size:13px}
.kp-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.kp-acts-l{font-family:var(--ff-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);margin-right:2px}
.kp-acts .kp-clear{margin-left:auto}
.kp-more{margin-top:-6px}
.kp-more li{display:flex;flex-direction:column;justify-content:space-between}
.kp-more li b{font-size:17px}
.kp-more li[hidden]{display:none}
.kp-share{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px}
.kp-copied{font-family:var(--ff-mono);font-size:11px;color:#6FD3A0}
.kp-out .tl-big b{font-size:clamp(44px,4.8vw,64px)}
.kp-out .tl-big span{font-family:var(--ff-mono);font-size:12.5px;color:var(--ink-3)}
.kp-scale{position:relative;display:grid;grid-template-columns:20fr 20fr 20fr 20fr 20fr;height:10px;margin:14px 0 6px;border-radius:999px;overflow:visible}
.kp-scale i{display:block;height:10px}
.kp-scale .kp-z1{background:#5b3a3f;border-radius:999px 0 0 999px}.kp-scale .kp-z2{background:#7a4a3a}.kp-scale .kp-z3{background:#8a6a3a}
.kp-scale .kp-z4{background:#4f7a6a}.kp-scale .kp-z5{background:#3f8a73;border-radius:0 999px 999px 0}.kp-scale .kp-z6{display:none}
.kp-scale s{position:absolute;top:-5px;width:4px;height:20px;margin-left:-2px;border-radius:3px;background:#fff;box-shadow:0 0 0 2px rgba(25,25,25,.9),0 0 12px rgba(255,255,255,.5);transition:left .3s ease}
.kp-ticks{display:flex;justify-content:space-between;margin:0 0 16px;font-family:var(--ff-mono);font-size:10px;color:var(--ink-4)}
.kp-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 14px;padding:0;list-style:none}
.kp-stats li{padding:10px 11px;border-radius:11px;background:rgba(245,242,236,.035);border:1px solid rgba(245,242,236,.09)}
.kp-stats li span{display:block;font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
.kp-stats li b{display:block;margin-top:4px;font-family:var(--ff-display);font-size:19px;font-weight:700;color:var(--ink)}
#kp-uw-row{grid-column:1/-1}
.kp-cls-wrap{margin:0 0 16px;border:1px solid rgba(245,242,236,.12);border-radius:12px;overflow-x:auto}
.kp-cls{font-size:13px}
.kp-cls th,.kp-cls td{padding:8px 11px}
.kp-cls td.num{text-align:right}
.kp-cbar{display:inline-block;width:52px;height:5px;margin-right:8px;vertical-align:middle;border-radius:999px;background:rgba(245,242,236,.08);overflow:hidden}
.kp-cbar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue-2),#6FD3A0)}
.tl-badge.kp-b-poor,.tl-badge.kp-b-slight{color:#FF9AA9;background:rgba(231,94,115,.12);border:1px solid rgba(231,94,115,.45)}
.tl-badge.kp-b-fair,.tl-badge.kp-b-moderate{color:#F2B45A;background:rgba(242,180,90,.1);border:1px solid rgba(242,180,90,.4)}
.tl-badge.kp-b-substantial,.tl-badge.kp-b-almost{color:#6FD3A0;background:rgba(111,211,160,.12);border:1px solid rgba(111,211,160,.4)}
@media (max-width:640px){.kp-stats{grid-template-columns:1fr 1fr}.kp-stats li:nth-child(3){grid-column:1/-1}.kp-cell{min-width:48px;padding:7px 4px}}
@media (max-width:1060px){.kp-wrap{grid-template-columns:1fr}}
.kp-grid thead th,.kp-grid tbody th{overflow-wrap:normal;word-break:normal;white-space:nowrap;max-width:none}
.kp-grid tbody th{min-width:72px}
.kp-grid .kp-tot{min-width:46px}
.kp-cell{min-width:56px}
/* guidelines document: Dataset Finder logo header, as in the Word and PDF exports */
.ad-doc .gd-brand{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding:0 0 10px;margin:0 0 16px;border-bottom:1px solid #E4DFD6}
.ad-doc .gd-brand img{height:24px;width:auto;display:block}
.ad-doc .gd-brand span{font-family:var(--ff-mono);font-size:10.5px;color:#888}
/* guidelines preview: the same design as the PDF and the Word file (two-column tables at 30/70,
   tinted first column, equal padding and spacing, label names in mono, Innovatiana signature) */
#gd-doc{font-size:13px;line-height:1.55;color:#1a1a1a}
#gd-doc p{margin:0 0 8px}
#gd-doc ul{margin:0 0 12px 18px}
#gd-doc li{margin:0 0 4px}
#gd-doc h2{margin:24px 0 10px;padding-top:12px}
#gd-doc h3{margin:16px 0 7px;font-size:13.5px;line-height:1.35}
#gd-doc h3.gd-code span{font-family:var(--ff-mono);font-size:12.5px;background:#F3EFE8;border-radius:4px;padding:2px 7px}
#gd-doc table{table-layout:fixed;width:100%;margin:0 0 14px;border-top:1px solid #CFC8BC;border-bottom:1px solid #CFC8BC;font-size:12.5px;line-height:1.45}
#gd-doc th,#gd-doc td{width:auto;padding:7px 10px;border-bottom:1px solid #E6E0D6;text-align:left;vertical-align:top;overflow-wrap:anywhere}
#gd-doc tr:last-child th,#gd-doc tr:last-child td{border-bottom:0}
#gd-doc th:first-child{width:30%}
#gd-doc tbody th{background:#F8F5F0;color:#333;font-weight:600}
#gd-doc thead th{background:#EFE9DF;color:#222;font-weight:700}
#gd-doc th.gd-code{font-family:var(--ff-mono);font-size:12px}
#gd-doc a{border:0;background:none}
#gd-doc .gd-sign{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding-top:12px;border-top:1px solid #E4DFD6}
#gd-doc .gd-sign-t{margin:0;font-family:"Caveat","Brush Script MT",cursive;font-size:22px;line-height:1.3;color:#555;transform:rotate(-1.5deg);transform-origin:left center}
#gd-doc .gd-sign-l{position:relative;display:inline-block;font-weight:600;color:#111;text-decoration:none;padding-bottom:2px}
#gd-doc .gd-sign-l svg{position:absolute;left:0;bottom:-3px;width:100%;height:7px}
#gd-doc .gd-sign-u{margin:0;font-family:var(--ff-mono);font-size:11px}
#gd-doc .gd-sign-u a{color:#C44960;text-decoration:none}
/* output buttons: Word and PDF share the first row; the four small actions fill the next one(s) evenly */
.gd-wrap .ad-tools .btn{flex:1 1 calc(50% - 4px);justify-content:center;min-width:0}
.gd-wrap .ad-tools .ad-mini{flex:1 1 auto;justify-content:center;text-align:center}
@media (max-width:480px){
  #gd-doc th:first-child{width:38%}
  #gd-doc th,#gd-doc td{padding:6px 8px}
  #gd-doc th.gd-code{font-size:11.5px}
  .gd-wrap .ad-tools .btn .btn-arrow{display:none}
}