/* Tools (/tools/) and Resources (/resources/): light pages (brand kit 18 Oct). Shared bits use .tl-, page bits .tools__ / .res__. */
.tl-page{--panel:var(--cream-200);--line:rgba(11,26,51,.14);--line2:rgba(11,26,51,.24);--muted:var(--ink-600);--gut:16px;--bleed:16px;--sec:48px;--h1:40px;--h2:28px;--lead:17px;color:var(--ink-900);
  max-width:1440px;margin:0 auto;padding:24px var(--gut) 64px;display:flex;flex-direction:column;gap:var(--sec)}
.tl-page [hidden]{display:none!important}
.tl-page button{font-family:var(--font-sans);cursor:pointer}
.tl-page strong{font-weight:600}
.tl-page h1,.tl-page h2,.tl-page h3,.tl-page p{margin:0}
.tl-hero{display:flex;flex-direction:column;gap:20px}
.tl-hero__text{display:flex;flex-direction:column;gap:12px;max-width:640px}
.tl-eyebrow{font:600 14px/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--orange-700)}
.tl-hero h1{font:400 var(--h1)/1.12 var(--font-sans);letter-spacing:-.01em;text-wrap:balance}
.tl-hero p{font:400 var(--lead)/1.55 var(--font-sans);color:var(--muted);text-wrap:pretty}
.tl-search{position:relative;display:block;width:100%;flex:none}
.tl-search .icon{position:absolute;left:14px;top:15px;color:var(--muted)}
.tl-search input{width:100%;height:48px;padding:0 16px 0 48px;border-radius:12px;border:1px solid var(--line2);background:var(--panel);color:var(--ink-900);font:400 15px/1 var(--font-sans);outline:none;-webkit-appearance:none;appearance:none}
.tl-search input::placeholder{color:var(--muted)}
.tl-search input:focus{border-color:var(--navy-900)}
.tl-tabs-wrap{margin:0 calc(var(--bleed) * -1);padding:0 var(--bleed);overflow-x:auto;scrollbar-width:none}
.tl-tabs{display:flex;gap:8px;width:max-content}
.tl-tab{padding:8px 16px;border-radius:999px;background:transparent;color:var(--muted);border:1px solid var(--line2);font:500 13px/1 var(--font-sans);white-space:nowrap}
.tl-tab[aria-pressed="true"]{background:var(--navy-900);border-color:var(--navy-900);color:var(--cream-100);font-weight:600}

/* Leaderboard */
.tools__lb{display:flex;flex-direction:column;gap:16px}
.tools__lb-head{display:flex;flex-direction:column;gap:8px}
.tools h2{font:400 var(--h2)/1.22 var(--font-sans)}
.tools__lb-head span{font:400 15px/1.4 var(--font-sans);color:var(--muted)}
.tools__board{list-style:none;margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:0;border-radius:20px;background:var(--panel);border:1px solid var(--line);padding:8px 16px}
.tools__row{display:grid;grid-template-columns:36px 88px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.tools__rank{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:600 14px/1 var(--font-sans);color:var(--muted)}
.tools__rank[data-r="1"]{background:var(--orange-500);color:var(--ink-900)}
.tools__rank[data-r="2"],.tools__rank[data-r="3"]{background:var(--cream-200);color:var(--ink-900)}
.tools__logo{height:40px;border-radius:10px;background:var(--cream-200);display:flex;align-items:center;justify-content:center;padding:0 8px;overflow:hidden;color:var(--ink-900)}
.tools__logo img{max-height:22px;max-width:100%;width:auto;object-fit:contain}
.tools__logo b{font:600 14px/1.1 var(--font-sans);text-align:center;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tools__who{display:flex;flex-direction:column;gap:4px;min-width:0}
.tools__who b{font:600 15px/1.2 var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tools__who span{font:400 14px/1.2 var(--font-sans);color:var(--muted)}
.tools__vote{min-width:58px;height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--line2);background:transparent;color:var(--ink-900);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font:600 14px/1 var(--font-sans)}
.tools__vote[aria-pressed="true"]{background:var(--orange-500);border-color:var(--orange-700);color:var(--ink-900)}

/* Browse */
.tools__browse{display:flex;flex-direction:column;gap:16px}
.tools__note{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-radius:12px;background:rgba(11,26,51,.05);border:1px solid var(--line);font:400 15px/1.45 var(--font-sans);color:var(--muted)}
.tools__note .icon{margin-top:1px}
.tl-hero .tools__note{font:400 15px/1.45 var(--font-sans)}
.tools__note a{text-decoration:underline}
.tools__layout{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start;margin-top:-16px}
.tools__filters{display:none;flex-direction:column;border-radius:20px;background:var(--panel);border:1px solid var(--line)}
.tools__filters.is-open{display:flex}
.tools__filters-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line);font:600 16px/1 var(--font-sans)}
.tools__clear,.tools__chips-clear{background:none;border:0;padding:0 4px;font:600 14px/1 var(--font-sans);color:var(--orange-700)}
.tools__clear{padding:0}
.tools__clear.is-dim{opacity:.4}
.tools__group{border-bottom:1px solid var(--line)}
.tools__group summary{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;font:600 14px/1.2 var(--font-sans)}
.tools__group summary .icon{opacity:.8;transition:transform 200ms var(--ease-out)}
.tools__group[open] summary .icon{transform:rotate(180deg)}
.tools__opts{display:flex;flex-direction:column;padding:0 20px 12px}
.tools__opt{display:flex;align-items:center;gap:12px;padding:8px 0;cursor:pointer}
.tools__opt.is-dim{opacity:.45}
.tools__opt input{flex:none;-webkit-appearance:none;appearance:none;width:18px;height:18px;margin:0;border-radius:5px;border:1.5px solid var(--line2);background:transparent center/13px no-repeat;cursor:pointer}
.tools__opt input:checked{background-color:var(--navy-900);border-color:var(--navy-900);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDF3E8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.tools__opt input:focus-visible{outline:2px solid var(--navy-900);outline-offset:2px}
.tools__opt span{flex:1;font:400 14px/1.3 var(--font-sans)}
.tools__opt small{font:400 14px/1 var(--font-sans);color:var(--muted)}
.tools__filters-foot{padding:16px 20px}
.tools__show{width:100%;height:48px;border:0;border-radius:12px;background:var(--navy-900);color:var(--cream-100);font:600 14px/1 var(--font-sans);letter-spacing:.06em;text-transform:uppercase}
.tools__results{display:flex;flex-direction:column;gap:16px;min-width:0}
.tools__bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.tools__count{font:500 14px/1.2 var(--font-sans);color:var(--muted)}
.tools__ctrls{display:flex;gap:8px}
.tools__filter-btn{height:42px;padding:0 16px;border-radius:12px;border:1px solid var(--line2);background:none;color:var(--ink-900);display:flex;align-items:center;gap:8px;font:600 14px/1 var(--font-sans)}
.tools__sort{position:relative;display:flex;align-items:center}
.tools__sort select{-webkit-appearance:none;appearance:none;height:42px;padding:0 32px 0 16px;border-radius:12px;border:1px solid var(--line2);background:var(--cream-50);color:var(--ink-900);font:600 14px/1 var(--font-sans);outline:none;cursor:pointer}
.tools__sort .icon{position:absolute;right:12px;pointer-events:none}
.tools__chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tools__chip{display:flex;align-items:center;gap:8px;padding:8px 12px 8px 12px;border:0;border-radius:999px;background:var(--navy-900);color:var(--cream-100);font:500 14px/1 var(--font-sans)}
.tools__chip::after{content:"\00d7";font-size:16px;line-height:13px}
.tools__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.tools__card{min-width:0;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:var(--cream-200);color:var(--ink-900)}
.tools__offer{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--orange-500);color:var(--ink-900);font:600 14px/1.3 var(--font-sans)}
.tools__body{padding:20px;display:flex;flex-direction:column;gap:12px;flex:1}
.tools__top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.tools__logo--card{height:48px;width:112px;border-radius:12px;border:1px solid rgba(11,26,51,.07);padding:0 12px}
.tools__logo--card img{max-height:26px}
.tools__card .tools__vote{min-width:52px;height:48px;padding:0 8px;border-radius:12px;border-color:rgba(11,26,51,.2);color:var(--ink-900);gap:4px}
.tools__card .tools__vote .icon{width:16px;height:16px}
.tools__card .tools__vote[aria-pressed="true"]{border-color:var(--orange-700)}
.tools__txt{display:flex;flex-direction:column;gap:4px}
.tools__txt h3{font:600 18px/1.25 var(--font-sans)}
.tools__txt p{font:400 15px/1.5 var(--font-sans);color:var(--ink-600);text-wrap:pretty}
.tools__tags{display:flex;flex-wrap:wrap;gap:8px}
.tools__tags span{padding:8px 12px;border-radius:999px;background:rgba(11,26,51,.06);font:500 14px/1 var(--font-sans);color:var(--ink-800)}
.tools__tags .tools__ai{background:var(--cobalt-600);color:var(--cream-100);font-weight:600}
.tools__go{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.tools__go a{height:48px;border-radius:12px;background:var(--ink-900);color:var(--cream-100);font:600 14px/1 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.tools__go a:hover{background:var(--ink-800);color:var(--cream-100)}
.tools__go span{font:400 14px/1.2 var(--font-sans);color:var(--ink-600);text-align:center}
.tools__empty{padding:48px 24px;border-radius:20px;border:1px dashed var(--line2);display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.tools__empty span{font:600 18px/1.3 var(--font-sans)}
.tools__empty button{height:48px;padding:0 20px;border:0;border-radius:12px;background:var(--navy-900);color:var(--cream-100);font:600 14px/1 var(--font-sans);letter-spacing:.06em;text-transform:uppercase}

/* Resources */
.res{--sec:24px;gap:var(--sec)}
.res .tl-hero__text{gap:12px}
.res .tl-hero h1{line-height:1.15}
.res .tl-hero p{line-height:1.5}
.res__crumbs{display:flex;gap:8px;font:500 14px/1 var(--font-sans);color:var(--muted)}
.res__crumbs a{color:var(--muted);text-decoration:none}
.res .tl-tab{padding:12px 16px;font-size:14px}
.res__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.res__card{min-width:0;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:var(--panel);border:1px solid var(--line)}
.res__cover{aspect-ratio:4/3;background:var(--bg)}
.res__body{flex:1;padding:20px;display:flex;flex-direction:column;gap:12px}
.res__type{font:600 14px/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--orange-700)}
.res__body h2{font:600 17px/1.35 var(--font-sans);text-wrap:pretty}
.res__body p{font:400 15px/1.45 var(--font-sans);color:var(--muted);text-wrap:pretty}
.res__foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px}
.res__fmt{font:400 14px/1.2 var(--font-sans);color:var(--muted)}
.res__dl{display:flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;font:600 14px/1 var(--font-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-900)}
.res__empty{padding:32px;border-radius:20px;border:1px dashed var(--line2);text-align:center;font:400 15px/1.5 var(--font-sans);color:var(--muted)}
.res__modal{width:calc(100% - 32px);max-width:440px;padding:0;border:0;border-radius:20px;background:var(--cream-100);color:var(--ink-900)}
.res__modal [hidden]{display:none}
.res__modal::backdrop{background:rgba(2,16,37,.7)}
.res__modal-in{padding:24px;display:flex;flex-direction:column;gap:16px}
.res__modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.res__modal-head > span{display:flex;flex-direction:column;gap:8px}
.res__modal-head small{font:600 14px/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--orange-700)}
.res__modal-head b{font:600 20px/1.3 var(--font-sans)}
.res__x{display:grid;padding:0;border:0;background:none;color:var(--ink-900)}
.res__modal form{display:flex;flex-direction:column;gap:12px}
.res__modal label{display:flex;flex-direction:column;gap:8px;font:500 14px/1 var(--font-sans)}
.res__modal input{height:48px;padding:0 16px;border:1px solid rgba(11,26,51,.14);border-radius:12px;background:var(--cream-200);color:var(--ink-900);font:400 15px/1 var(--font-sans);outline:none}
.res__modal input:focus{border-color:var(--navy-900)}
.res__btn{height:48px;border:0;border-radius:12px;background:var(--navy-900);color:var(--cream-100);font:600 14px/1 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.res__btn--orange{background:var(--orange-700)}
.res__btn:hover{color:var(--cream-100)}
.res__sent{display:flex;flex-direction:column;gap:12px}
.res__sent p{font:400 15px/1.5 var(--font-sans);color:var(--ink-600)}

@media (min-width:768px){
  .tl-page{--gut:32px;--bleed:32px;--sec:64px;--h1:56px;--h2:36px;--lead:18px;padding:48px var(--gut) 80px}
  .tl-hero{flex-direction:row;justify-content:space-between;align-items:flex-end}
  .tl-search{width:340px}
  .tools__board{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:column;grid-template-rows:repeat(var(--rows),auto);column-gap:32px;padding:8px 20px}
  .tools__layout{gap:20px;margin-top:-24px}
  .tools__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .res{--sec:32px}
  .res__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
}
@media (min-width:1280px){
  .tl-page{--gut:80px;--bleed:0px;--sec:96px;--h1:72px;--h2:44px;--lead:20px;padding:64px var(--gut) 96px}
  .tools__board{column-gap:48px;padding:8px 24px}
  .tools__layout{grid-template-columns:260px minmax(0,1fr);gap:32px;margin-top:-32px}
  .tools__filters{display:flex;position:sticky;top:110px;max-height:calc(100vh - 140px);overflow-y:auto;scrollbar-width:thin}
  .tools__filter-btn,.tools__filters-foot{display:none}
  .tools__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .res{--sec:32px}
  .res__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
}
/* Tool review page (templates/tool.php) */
.tool-pc{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.tool-pc ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font:400 15px/1.5 var(--font-sans)}
.tools__meta{font-size:15px}
@media (min-width:768px){.tool-pc{grid-template-columns:repeat(2,minmax(0,1fr))}}