/* Tools hub (prefix tls-). Family rules: fam-hub.css. */

/* Hero */
.tls-hero { --hero-h: 15rem; --hero-pos: 50% 62%; --hub-h1: 2.45rem; --hub-lead: .96rem; --hub-lead-w: 35rem; --hero-copy: 44rem; --card-w: 16.1rem; }
.tls-hero .hero__bg { left: -10%; }
.tls-hero::before { --hero-fade: linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.92) 40%, rgba(255,255,255,.4) 55%, rgba(255,255,255,0) 64%); }
.tls-hero .hero__inner { padding-block: .7rem .8rem; }
.tls-hero .hero__title { line-height: 1.06; max-width: 41rem; }
.tls-hero .hero__lead { line-height: 1.32; }
.tls-ticks { margin-top: .85rem; gap: .4rem 1.55rem; font-size: .8rem; color: #23314a; }
.tls-ticks [data-icon="users"], .tls-ticks [data-icon="shield-check"] { color: var(--ink); }
.tls-card { align-self: center; margin-right: .2rem; padding: 1rem 1rem .95rem; }
.tls-card__head { display: flex; gap: .75rem; align-items: center; margin-bottom: .8rem; }
.tls-card__head .ib { --s: 2.75rem; border-radius: 8px; }
.tls-card__head h2 { margin: 0; font-size: 1.07rem; line-height: 1.2; }
.tls-card .checklist { gap: .62rem; }
.tls-card .checklist li { font-size: max(.74rem, 16px) /* rt-1019 */; }
.tls-note { right: auto; left: 57%; top: auto; bottom: .45rem; font-size: 1rem; transform: rotate(-5deg); color: #24324b; }
.tls-note::after { display: none; }

/* Main column */
.tls-main { --hub-aside: 22rem; --hub-gap: 1.35rem; padding-block: 1rem 1.25rem; }
.tls-cats { --gap: .7rem; }
.tls-cats .hub-cat { padding: .8rem .55rem .75rem .75rem; }
.tls-cats .ib { --s: 2.75rem; }
.tls-tools { --gap: .7rem; }
.tls-tools .hub-tool { padding-top: .6rem; grid-template-rows: auto auto auto auto 1fr auto; }
.tls-tools .hub-tool .link-arrow { grid-column: 2; grid-row: 6; justify-self: start; }
.tls-tools .tool-mark { --s: 3.6rem; grid-row: 2 / span 3; }
.tls-cmp { --gap: .9rem; }
.tls-cmp__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .65rem .9rem .65rem 1rem; }
.tls-cmp__item h3 { font-size: .8rem; margin: 0 0 .1rem; }
.tls-cmp__item h3 a { color: var(--ink); text-decoration: none; }
.tls-cmp__item h3 a:hover { color: var(--blue-600); }
.tls-cmp__item p { font-size: max(.7rem, 16px) /* rt-1019 */; color: #4a566c; margin: 0; }
.tls-cmp__icon { width: 2.3rem; height: 2.3rem; color: var(--c); stroke-width: 2.2; }
.tls-cmp__arrow { width: 1rem; height: 1rem; color: var(--blue-600); }

/* Sidebar */
.tls-kit { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 .85rem; padding: 1.1rem 1.05rem .95rem; background: linear-gradient(135deg, #eef8f0 0%, #e4f2e6 100%); }
.tls-kit__gift { width: 3.1rem; height: 3.1rem; color: var(--green-600); margin-top: 1.1rem; stroke-width: 2.2; }
.tls-kit__copy { min-width: 0; }
.tls-kit .lead-box__title { font-size: 1.5rem; }
.tls-kit .lead-box__text { font-size: max(.8rem, 16px) /* rt-1019 */; }
.tls-kit__form, .tls-kit__ticks { grid-column: 1 / -1; }
.tls-kit__form { margin-top: .2rem; }
.tls-kit__ticks { gap: .3rem .9rem; font-size: .7rem; }
.tls-kit .lead-box__text { margin-bottom: .6rem; }
.tls-guides__head { justify-content: flex-start; gap: .55rem; }
.tls-guides__head .icon { width: 1.4rem; height: 1.4rem; color: var(--ink); }
.tls-help { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; padding: .95rem 1.05rem 1rem; background: var(--bg-tint); border-color: #e2eaf5; box-shadow: none; border-radius: var(--radius-lg); }
.tls-help__icon { --s: 2.9rem; border-radius: 12px; }
.tls-help h2 { font-size: 1.1rem; margin: .1rem 0 .3rem; }
.tls-help p { font-size: max(.8rem, 16px) /* rt-1019 */; color: #4a566c; margin: 0 0 .8rem; }
.tls-help__btn { min-height: 2.6rem; font-size: .86rem; border-width: 1.5px; }

@media (max-width: 1100px) {
  .tls-note { display: none; }
  .tls-cmp { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .tls-hero { --hero-mobile-h: 190px; --hero-pos: 62% 60%; }
  .tls-hero .hero__bg { left: 0; -webkit-mask-image: none; mask-image: none; }
  .tls-card { margin: 0; }
  .tls-card .checklist li { font-size: max(.9rem, 16px) /* rt-1019 */; }
  .tls-cmp__item h3 { font-size: .95rem; }
  .tls-cmp__item p, .tls-help p { font-size: max(.88rem, 16px) /* rt-1019 */; }
  .tls-tools .hub-tool .link-arrow { grid-column: 1 / -1; justify-self: center; }
}

/* UX audit 2026-10-19: the handwritten note stays inside the hero */
.hub-hero .hero__note { translate: 0 -8px; }