/* Tools: the directory (tools.html) and the slim header and "More tools" cards shared by every tool page.
   Type follows the homepage: headings 40/600 (32 on phones), card titles 22/500, descriptions 18/1.45, meta 16. */
.th-page{background:#fff;color:var(--sp-color-navy,#06004a)}
.th-wrap,.tl-wrap{width:var(--sp-page-width,min(100% - 8vw,1740px));margin-inline:auto}
.sp-subpage :is(.th-head,.tl-head,.tl-more) :is(h1,h2){max-width:none;margin:0;color:var(--sp-color-navy,#06004a);font-size:40px;font-weight:600;line-height:1.2;letter-spacing:-.025em}

/* directory header: the title and the filter on one line */
.th-head{padding:clamp(48px,6vw,88px) 0 clamp(28px,3vw,40px)}
.th-head__row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.th-filter{display:flex;flex-wrap:wrap;gap:8px}
.th-filter button{min-height:40px;padding:0 16px;border:0;border-radius:6px;background:#F2F2F4;color:var(--sp-color-navy,#06004a);font:inherit;font-size:15px;font-weight:500;line-height:1.2;cursor:pointer;transition:background-color .15s,color .15s}
.th-filter button:hover{background:#E5F0FF}
.th-filter button[aria-pressed="true"]{background:var(--sp-color-navy,#0b004a);color:#fff}
.th-filter button:focus-visible{outline:2px solid var(--sp-color-brand-blue,#1705e5);outline-offset:2px}

/* the cards: two wide, three, two wide on a six-column grid; filtered, every card takes a third */
.th-library{padding:0 0 clamp(64px,8vw,120px)}
.th-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
.th-cell{display:flex;grid-column:span 2;min-width:0}
.th-cell--wide{grid-column:span 3}
.th-cell[hidden]{display:none}
.th-grid.is-filtered .th-cell{grid-column:span 2}
.th-card{display:flex;flex-direction:column;width:100%;padding:12px;border-radius:8px;background:#F7F7F5;color:var(--sp-color-navy,#06004a);text-decoration:none;transition:background-color .2s ease}
.th-card__media{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:6px;background:#EDF0F8}
.th-card__media--render{background:var(--sp-color-tool-navy,#090044)}
.th-cell--wide .th-card__media{aspect-ratio:16/9}
.th-grid.is-filtered .th-card__media{aspect-ratio:4/3}
.th-card__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.th-card__body{display:flex;flex:1;flex-direction:column;padding:20px 12px 12px}
.sp-subpage .th-card .th-card__title{margin:0;color:var(--sp-color-navy,#06004a);font-size:22px;font-weight:500;line-height:1.3;letter-spacing:-.01em;transition:color .2s ease}
.th-card__desc{max-width:46ch;margin-top:8px;color:#48455e;font-size:18px;line-height:1.45;text-wrap:pretty}
.th-card__go{display:inline-flex;gap:.5rem;margin-top:auto;padding-top:24px;color:var(--sp-color-navy,#06004a);font-size:16px;font-weight:500;line-height:1.2}
.th-card:hover{background:#EFEFEC}
.th-card:hover .th-card__media img{transform:scale(1.03)}
.th-card:hover .th-card__go{color:var(--sp-color-brand-blue,#1705e5)}
.th-card:focus-visible{outline:2px solid var(--sp-color-brand-blue,#1705e5);outline-offset:3px}
.th-note{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:48px;color:#66637d;font-size:16px;line-height:1.45}
.th-note p{margin:0}
.th-note a{color:var(--sp-color-navy,#06004a);font-weight:500;text-decoration:none}
.th-note a:hover{color:var(--sp-color-brand-blue,#1705e5)}

/* cards rise in once, in order */
@keyframes th-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.th-js .th-grid:not(.is-settled) .th-cell{animation:th-rise .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 60ms)}

/* tool pages: a slim header with the trail back to Tools, the name and one line */
.tl-head{padding:clamp(36px,4.5vw,64px) 0 clamp(24px,3vw,40px);background:#fff}
.tl-crumb{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;color:#66637d;font-size:16px;line-height:1.4}
.tl-crumb a{color:#66637d;text-decoration:none;transition:color .15s}
.tl-crumb a:hover{color:var(--sp-color-brand-blue,#1705e5)}
.tl-crumb [aria-current]{color:var(--sp-color-navy,#06004a)}
.sp-subpage .tl-head p{max-width:58ch;margin:12px 0 0;color:#48455e;font-size:18px;font-weight:400;line-height:1.45;letter-spacing:0}

/* tool pages: three related tools at the foot of the page */
.tl-more{padding:clamp(64px,8vw,112px) 0;background:#fff}
.tl-more__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px}
.tl-more__head a{color:var(--sp-color-navy,#06004a);font-size:16px;font-weight:500;line-height:1.2;text-decoration:none;white-space:nowrap}
.tl-more__head a:hover{color:var(--sp-color-brand-blue,#1705e5)}

@media(max-width:1000px){
  .th-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .th-cell,.th-cell--wide,.th-grid.is-filtered .th-cell{grid-column:span 1}
  .th-cell--wide .th-card__media{aspect-ratio:4/3}
  .tl-more .th-cell:nth-child(3){display:none}
}
@media(max-width:640px){
  .sp-subpage :is(.th-head,.tl-head,.tl-more) :is(h1,h2){font-size:32px}
  .th-grid{grid-template-columns:1fr;gap:16px}
  .tl-more .th-cell:nth-child(3){display:flex}
}
@media(prefers-reduced-motion:reduce){
  .th-js .th-grid .th-cell{animation:none}
  .th-card,.th-card__media img,.th-filter button{transition:none}
}