*{box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;margin:0;color:#171717;background:#fafafa}main{margin:auto;padding:44px 22px}a{text-decoration:none}footer{margin-top:44px;border-top:1px solid #ddd;padding-top:22px;color:#666}
/* Tindlo Learn square feature grid */
main{max-width:1180px;padding-top:44px}header .sub{line-height:1.65}.learn-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:34px}.learn-feature-grid .feature{box-sizing:border-box;aspect-ratio:1;min-width:0;padding:23px;border-radius:18px;display:flex;flex-direction:column;margin:0;border:1px solid #284361;background:#10233f;color:#fff;transition:transform .18s,box-shadow .18s}.learn-feature-grid .feature:hover{transform:translateY(-3px);box-shadow:0 12px 28px #10233f18}.learn-feature-grid .feature:focus-within{outline:3px solid #168889;outline-offset:4px}.feature .feature-meta{font-size:12px;font-weight:700;letter-spacing:1.2px;margin-bottom:18px;opacity:.8}.feature h2{font-size:23px;line-height:1.15;letter-spacing:-.7px;margin:0 0 10px}.feature p{font-size:14px;line-height:1.5;margin:0 0 16px;color:#d6e4f5}.feature a{align-self:flex-start;margin-top:auto;display:inline-block;padding:10px 13px;border-radius:8px;background:white;color:#10233f;font-size:14px;font-weight:700;line-height:1.3}.learn-feature-grid .feature-mbti{background:#123b38;border-color:#479889}.feature-mbti h2{color:#72efd0}.feature-mbti a{background:#72efd0;color:#10352f}.learn-feature-grid .feature-games{background:#302044;border-color:#8565a0}.feature-games h2{color:#ebcaff}.feature-games a{background:#ebcaff;color:#302044}.learn-feature-grid .feature-marble{background:#d5f779;border-color:#b1d953;color:#223118}.feature-marble p{color:#40512e}.feature-marble a{background:#25371d;color:#eeffd6}.feature-marble h2{font-size:27px}.feature a:focus-visible{outline:3px solid currentColor;outline-offset:4px}@media(max-width:1120px){.learn-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px}.learn-feature-grid .feature{padding:28px}.feature h2{font-size:28px}.feature p{font-size:16px;max-width:330px}.feature .feature-meta{margin-bottom:24px}}@media(max-width:550px){main{padding:28px 18px}h1{font-size:35px}.learn-feature-grid{grid-template-columns:1fr;gap:16px}.learn-feature-grid .feature{padding:25px;min-height:300px}.feature h2{font-size:29px}.feature p{font-size:16px}.feature a{font-size:15px}}@media(prefers-reduced-motion:reduce){.learn-feature-grid .feature{transition:none}.learn-feature-grid .feature:hover{transform:none}}

.feature-knowhow{background:#e7edf3!important;color:#152d43!important;border-color:#c8d7e3!important}.feature-knowhow p{color:#506675}.feature-knowhow a{background:#203c54;color:#fff}.feature-community{background:#10233f!important}.feature a{font-size:15px}.feature p{font-size:16px}.feature h2{font-size:28px}.learn-feature-grid .feature{padding:26px}.feature .feature-meta{margin-bottom:22px}header{display:flex;align-items:center;justify-content:space-between;gap:20px}header a{font-size:15px;color:#34536e}.intro{color:#667381;font-size:17px;line-height:1.6;max-width:680px}.brand{font-size:42px;letter-spacing:-1.5px;margin:8px 0 0}.feature-knowhow .count{font-weight:700}footer{display:flex;justify-content:space-between;gap:20px;font-size:14px}@media(max-width:550px){.brand{font-size:31px}header{align-items:flex-start}header a{font-size:13px}.feature p{font-size:16px}}

/* Every feature row shares the same height, including the final row. */
.learn-feature-grid{grid-auto-rows:1fr;align-items:stretch}
.learn-feature-grid .feature{height:100%;align-self:stretch}
.feature h2{min-height:3.45em}
@media(min-width:551px) and (max-width:760px){.learn-feature-grid{grid-template-columns:1fr;max-width:480px}}

/* Compact, equal-height portrait cards. */
.learn-feature-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;max-width:none;align-items:stretch}
.learn-feature-grid .feature{aspect-ratio:6 / 7;min-height:0;height:100%;padding:24px}
.feature h2{min-height:3.45em}
@media(max-width:1000px){.learn-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.learn-feature-grid{grid-template-columns:1fr;max-width:400px;margin-left:auto;margin-right:auto}.learn-feature-grid .feature{padding:24px}}

/* Reduce reserved whitespace while retaining aligned card heights. */
.feature h2{min-height:2.3em;margin-bottom:10px}.feature .feature-meta{margin-bottom:16px}

/* Research card contrast */
.learn-feature-grid .feature-research{color:#231942;border-color:#b6a9dc}.feature-research h2{color:#231942}.feature-research .feature-meta{color:#574177;opacity:1}.feature-research p{color:#4b4264}.feature-research a{background:#382655;color:#fff}
/* Distinct Playground card palette — 2026-09-21 */
.learn-feature-grid .feature-mbti{--card-bg:#123b38;--card-fg:#e7fff6;--card-body:#c3e6dc;--card-accent:#72efd0;--card-ink:#10352f;--card-border:#479889}
.learn-feature-grid .feature-games{--card-bg:#302044;--card-fg:#f7ecff;--card-body:#e2d2ee;--card-accent:#ebcaff;--card-ink:#302044;--card-border:#8565a0}
.learn-feature-grid .feature-marble{--card-bg:#d5f779;--card-fg:#223118;--card-body:#40512e;--card-accent:#25371d;--card-ink:#eeffd6;--card-border:#a8cb54}
.learn-feature-grid .feature-community{--card-bg:#102e58;--card-fg:#eef5ff;--card-body:#cddcf0;--card-accent:#b8d7ff;--card-ink:#102e58;--card-border:#53769f}
.learn-feature-grid .feature-knowhow{--card-bg:#ffe3a3;--card-fg:#49300c;--card-body:#65491e;--card-accent:#543810;--card-ink:#fff3d8;--card-border:#d9b568}
.learn-feature-grid .feature-teamplay{--card-bg:#ffc6ac;--card-fg:#522717;--card-body:#713d29;--card-accent:#68301d;--card-ink:#fff0e9;--card-border:#dc9b7d}
.learn-feature-grid .feature-research{--card-bg:#c1eaff;--card-fg:#153b50;--card-body:#30576b;--card-accent:#164a65;--card-ink:#edfaff;--card-border:#8cbfd9}
.learn-feature-grid .feature-guardians{--card-bg:#ffd2e5;--card-fg:#551f39;--card-body:#743c56;--card-accent:#722e4d;--card-ink:#fff0f6;--card-border:#dca3bb}
.learn-feature-grid .feature{background:var(--card-bg)!important;color:var(--card-fg)!important;border-color:var(--card-border)!important}
.learn-feature-grid .feature h2,.learn-feature-grid .feature .feature-meta{color:var(--card-fg)}
.learn-feature-grid .feature .feature-meta{opacity:1}
.learn-feature-grid .feature p{color:var(--card-body)}
.learn-feature-grid .feature a{background:var(--card-accent);color:var(--card-ink)}

/* Mobile launcher: eight destinations, two columns, no oversized description cards. */
@media(max-width:650px){
 main{padding:16px 12px 10px;max-width:650px}
 header{align-items:center;gap:8px}header .brand{font-size:24px;line-height:1.1;letter-spacing:-1px;margin:0}header>a{font-size:12px;white-space:nowrap}
 .intro{font-size:12px;line-height:1.4;margin:10px 0 0;max-width:none}
 .learn-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(98px,auto);gap:8px;max-width:none;margin:14px 0 0}
 .learn-feature-grid .feature{position:relative;aspect-ratio:auto;min-height:98px;height:clamp(98px,calc((100svh - 160px)/4),136px);padding:12px;border-radius:12px;justify-content:space-between;gap:7px}
 .learn-feature-grid .feature .feature-meta,.learn-feature-grid .feature p{display:none}
 .learn-feature-grid .feature h2{font-size:16px;line-height:1.16;letter-spacing:-.3px;min-height:0;margin:0;overflow-wrap:normal}
 .learn-feature-grid .feature a{align-self:flex-start;font-size:11px;line-height:1.2;padding:7px 8px;border-radius:7px;margin-top:auto}
 .learn-feature-grid .feature a::after{content:'';position:absolute;inset:0;border-radius:12px}
 .learn-feature-grid .feature:hover{transform:none}
 footer{margin-top:12px;padding-top:10px;font-size:10px;gap:8px;line-height:1.3}footer a{white-space:nowrap}
}
@media(max-width:360px){header .brand{font-size:21px}.learn-feature-grid .feature{padding:10px}.learn-feature-grid .feature h2{font-size:14px}.learn-feature-grid .feature a{font-size:10px;padding:6px}}
@media(max-width:360px){main{padding-bottom:4px}footer{margin-top:8px;padding-top:6px}}

/* Concise mobile subtitles preserve the compact launcher. */
@media(max-width:650px){
 .learn-feature-grid .feature{gap:5px;padding:10px 12px;height:clamp(116px,calc((100svh - 156px)/4),142px);min-height:116px}
 .learn-feature-grid .feature p{display:block;font-size:11px;line-height:1.3;margin:0;color:var(--card-body)}
 .learn-feature-grid .feature h2{font-size:15px;line-height:1.13}
 .learn-feature-grid .feature a{font-size:10px;padding:6px 7px}
 .mobile-subtitle{display:none}
 .learn-feature-grid .feature .mobile-subtitle{display:block}
 .learn-feature-grid .feature p:not(.mobile-subtitle){display:none}
}
@media(min-width:651px){.mobile-subtitle{display:none!important}}
@media(max-width:360px){.learn-feature-grid .feature{padding:9px}.learn-feature-grid .feature h2{font-size:13px}.learn-feature-grid .feature p{font-size:10px}}