.learn-hero,.tools-hero{background:var(--teal);padding:86px 0 68px}
.learn-hero h1,.tools-hero h1{font-family:'Space Grotesk';font-size:58px;line-height:.98;letter-spacing:-.075em;margin:0 0 20px}
.learn-hero h1 em,.tools-hero h1 em{font-style:normal;color:var(--coral)}
.learn-hero p,.tools-hero p{max-width:540px;color:rgba(16,43,43,.74);font-size:16px}

.learn-content,.tools-content{background:var(--cream);padding:10px 0 90px}

.category-filter{display:flex;gap:7px;flex-wrap:wrap;margin:34px 0 30px}
.category-filter button{background:var(--paper);border:1px solid var(--line);font-size:11px;padding:9px 15px;color:var(--muted);border-radius:20px}
.category-filter button.active,.category-filter button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

#learn-grid,#tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
#learn-grid .resource-card,#tools-grid .resource-card{background:var(--paper);border:1px solid var(--line);padding:22px;display:flex;flex-direction:column;gap:8px;min-height:160px}
#learn-grid .resource-card:hover,#tools-grid .resource-card:hover{border-color:var(--coral)}
#learn-grid .resource-card.has-cover{padding:0 0 22px}
#learn-grid .resource-card.has-cover .resource-type,#learn-grid .resource-card.has-cover .resource-title,#learn-grid .resource-card.has-cover .resource-link{margin-left:22px;margin-right:22px}
.cover-image{height:120px;margin-bottom:14px;display:grid;place-items:center}
.cover-icon{font-size:40px;line-height:1}
.article-cover{height:220px;margin:0 -28px 0;border-radius:0}
.article-cover .cover-icon{font-size:64px}
@media(max-width:850px){.article-cover{height:160px}.article-cover .cover-icon{font-size:48px}}
.resource-type{font-size:9px;color:var(--coral);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.resource-title{font-family:'Space Grotesk';font-size:19px;letter-spacing:-.04em;line-height:1.2;margin:0}
.resource-description{font-size:12px;color:var(--muted);margin:0;flex:1;line-height:1.5}
.resource-link{font-size:11px;font-weight:700;color:var(--coral);margin-top:auto}
.resource-link span{margin-left:5px}
.state-status,.tool-status{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-top:auto}

.tools-teaser-inner{background:var(--sage);padding:44px;display:flex;justify-content:space-between;align-items:center;gap:30px}
.tools-teaser-inner p{margin:0;max-width:380px;font-size:14px;color:rgba(16,43,43,.75)}

.calculator-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding:50px 0 90px}
.calculator-card{background:var(--paper);border:1px solid var(--line);padding:27px}
.calculator-card h3{font-family:'Space Grotesk';font-size:22px;letter-spacing:-.05em;margin:8px 0 6px}
.calculator-card>p{font-size:12px;color:var(--muted);margin:0 0 20px;line-height:1.5}
.calc-inputs{display:grid;gap:12px;margin-bottom:18px}
.input-group label{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:6px}
.input-group input{width:100%;border:1px solid var(--line);background:#fff;padding:11px 13px;font-size:14px;outline:0;border-radius:2px}
.input-group input:focus{border-color:var(--coral)}
.result-area:empty{display:none}
.result-area{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.result-area h4{font-family:'Space Grotesk';font-size:26px;letter-spacing:-.05em;margin:0 0 4px;color:var(--ink)}
.result-area .result-note{font-size:11px;color:var(--muted);margin:0}
.result-area .result-error{color:#c0392b;font-size:12px;margin:0}

.article-container{max-width:760px;margin:0 auto;padding:60px 28px 100px}
.article-header{margin-bottom:8px}
.article-header h1{font-family:'Space Grotesk';font-size:42px;letter-spacing:-.06em;line-height:1.08;margin:14px 0 0}
.article-content{font-size:16px;line-height:1.75;color:var(--ink);margin-top:30px}
.article-content h2{font-family:'Space Grotesk';font-size:23px;letter-spacing:-.04em;margin:34px 0 12px}
.article-content h2:first-child{margin-top:0}
.article-content p{margin:0 0 16px}
.article-content ul,.article-content ol{margin:0 0 16px;padding-left:22px}
.article-content li{margin:6px 0}
.article-content strong{font-weight:700}
.loading-text{color:var(--muted);font-size:14px}

@media(max-width:850px){
  #learn-grid,#tools-grid,.calculator-grid{grid-template-columns:1fr}
  .learn-hero h1,.tools-hero h1{font-size:44px}
  .tools-teaser-inner{flex-direction:column;align-items:start;padding:30px}
  .article-header h1{font-size:32px}
}