html, body{margin: 0; padding: 0; background: #FAFAF7;}
#su-tools{background: var(--s-paper);}
#su-tools .to-wrap{max-width: var(--s-maxw); margin: 0 auto; padding: 0 24px;}
#su-tools .to-crumbs{border-bottom: 1px solid var(--s-border); background: var(--s-paper);}
#su-tools .to-crumbs ol{display: flex; flex-wrap: wrap; gap: 8px; align-items: center; list-style: none; margin: 0; padding: 16px 0; font-size: 14px; color: var(--s-ink-soft);}
#su-tools .to-crumbs a{color: var(--s-ink-soft); text-decoration: none;}
#su-tools .to-crumbs a:hover, #su-tools .to-crumbs a:focus-visible{color: var(--s-navy); text-decoration: underline;}
#su-tools .to-crumbs li[aria-current]{color: var(--s-ink); font-weight: 700;}
#su-tools .to-crumbs .to-sep{color: var(--s-border);}
#su-tools .to-hero{background: radial-gradient(1200px 400px at 15% -10%, rgba(44, 95, 138, 0.05), transparent 60%), var(--s-paper); padding: clamp(56px, 8vw, 92px) 0 clamp(40px, 6vw, 64px); border-bottom: 1px solid var(--s-border);}
#su-tools .to-eyebrow{display: inline-flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--s-green);}
#su-tools .to-eyebrow::before{content: ""; width: 28px; height: 2px; background: var(--s-green); flex: none;}
#su-tools .to-h1{margin: 0 0 20px; font-family: var(--s-font-head); font-weight: 700; font-size: clamp(32px, 5vw, 52px); line-height: 1.14; letter-spacing: -0.01em; color: var(--s-navy-dark); text-wrap: balance;}
#su-tools .to-h1 em{font-style: italic; color: var(--s-navy);}
#su-tools .to-lede{margin: 0 0 22px; font-size: clamp(19px, 2.2vw, 22px); line-height: 1.6; color: var(--s-ink-soft); max-width: 62ch;}
#su-tools .to-privacy{display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 12px 16px; max-width: 68ch; background: #FFFFFF; border: 1px solid var(--s-border); border-left: 3px solid var(--s-green); border-radius: 0 6px 6px 0; font-size: 15.5px; line-height: 1.55; color: var(--s-ink-soft);}
#su-tools .to-privacy svg{flex: none; width: 20px; height: 20px; margin-top: 2px; stroke: var(--s-green); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;}
#su-tools .to-privacy strong{color: var(--s-ink);}
#su-tools .to-gridsectie{padding: clamp(48px, 7vw, 80px) 0;}
#su-tools .to-h2{margin: 0 0 16px; font-family: var(--s-font-head); font-weight: 700; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.3; letter-spacing: -0.01em; color: var(--s-navy-dark); text-wrap: balance;}
#su-tools .to-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 0; padding: 0; list-style: none;}
#su-tools .to-card{position: relative; display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid var(--s-border); border-radius: 14px; padding: 28px 26px 24px; overflow: hidden; transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;}
#su-tools .to-card::before{content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--s-navy); opacity: 0.35;}
#su-tools .to-card:hover, #su-tools .to-card:focus-within{border-color: var(--s-navy); box-shadow: 0 1px 2px rgba(26, 42, 58, 0.05), 0 10px 28px -8px rgba(44, 95, 138, 0.22); transform: translateY(-3px);}
#su-tools .to-card-top{display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: 0 0 14px;}
#su-tools .to-icon{flex: none; width: 56px; height: 56px; display: grid; place-items: center; background: var(--s-paper-alt); border-radius: 10px; color: var(--s-navy);}
#su-tools .to-icon svg{width: 30px; height: 30px; display: block; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;}
#su-tools .to-tag{font-size: 12px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--s-navy); background: rgba(44, 95, 138, 0.09); border-radius: 999px; padding: 4px 12px; white-space: nowrap;}
#su-tools .to-card-title{margin: 0 0 8px; font-family: var(--s-font-head); font-weight: 700; font-size: 23px; line-height: 1.3; color: var(--s-navy-dark);}
#su-tools .to-card-title a{color: inherit; text-decoration: none;}
#su-tools .to-card-title a::after{content: ""; position: absolute; inset: 0;}
#su-tools .to-card-desc{margin: 0 0 18px; font-size: 16.5px; line-height: 1.6; color: var(--s-ink-soft); flex: 1 1 auto;}
#su-tools .to-card-foot{display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--s-border); font-size: 14px; color: var(--s-ink-soft);}
#su-tools .to-card-go{font-size: 17px; font-weight: 700; color: var(--s-green); white-space: nowrap;}
#su-tools .to-card:hover .to-card-go{color: var(--s-terracotta-deep); text-decoration: underline; text-underline-offset: 4px;}
#su-tools .to-hoe{background: var(--s-paper-alt); border-top: 1px solid var(--s-border); padding: clamp(48px, 7vw, 80px) 0 clamp(56px, 8vw, 88px);}
#su-tools .to-hoe-head{max-width: 640px; margin: 0 0 36px;}
#su-tools .to-hoe-sub{margin: 0; font-size: 19px; line-height: 1.7; color: var(--s-ink-soft); max-width: 62ch;}
#su-tools .to-hoe-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 0; padding: 0; list-style: none;}
#su-tools .to-hoe-item{background: #FFFFFF; border: 1px solid var(--s-border); border-radius: 10px; padding: 24px 24px 20px;}
#su-tools .to-hoe-item svg{width: 28px; height: 28px; stroke: var(--s-navy); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 12px;}
#su-tools .to-hoe-item h3{margin: 0 0 8px; font-family: var(--s-font-head); font-weight: 700; font-size: 20px; line-height: 1.35; color: var(--s-navy-dark);}
#su-tools .to-hoe-item p{margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--s-ink-soft);}
#su-tools .to-disclaimer{margin: 32px 0 0; padding: 14px 18px; max-width: 78ch; background: rgba(200, 107, 58, 0.07); border-left: 3px solid var(--s-terracotta-deep); border-radius: 0 6px 6px 0; font-size: 15.5px; line-height: 1.6; color: var(--s-ink-soft);}
#su-tools .to-disclaimer strong{color: var(--s-ink);}
@media (max-width: 560px){
  #su-tools .to-wrap{padding: 0 18px;}
}
@media (max-width: 820px){
  #su-tools .to-grid{grid-template-columns: 1fr;}
}
@media (max-width: 940px){
  #su-tools .to-hoe-grid{grid-template-columns: 1fr;}
}
@media (prefers-reduced-motion: reduce){
  #su-tools .to-card{transition: none;}
  #su-tools .to-card:hover, #su-tools .to-card:focus-within{transform: none;}
}