.rh { padding: 80px 0 40px; border-bottom: 1px solid var(--base-border-tertiary); background: linear-gradient(180deg,#fafaf9,#fff); }
.rh .wrap { max-width: 860px; }
.rfilter { display: flex; gap: 8px; margin-top: 32px; flex-wrap: wrap; }
.rfilter button { background: #fff; border: 1px solid var(--base-border-tertiary); padding: 8px 16px; border-radius: 999px; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--base-text-secondary); cursor: pointer; transition: all .12s; }
.rfilter button:hover { border-color: var(--color-gray-950); color: var(--color-gray-950); }
.rfilter button.is-on { background: var(--color-gray-950); color: #fff; border-color: var(--color-gray-950); }

.feat { padding: 56px 0; background: #fafaf9; border-bottom: 1px solid var(--base-border-tertiary); }
.feat__card { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; background: #fff; border: 1px solid var(--base-border-tertiary); border-radius: 16px; overflow: hidden; }
.feat__art { aspect-ratio: 4/3; background: linear-gradient(135deg, var(--color-brand-navy) 0%, var(--color-gray-950) 100%); position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 32px; color: #fff; }
.feat__art::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 30%, rgba(34,197,94,.2), transparent 40%), radial-gradient(circle at 80% 70%, rgba(30,58,95,.4), transparent 50%); }
.feat__art::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 32px 32px; }
.feat__art__kind { position: relative; z-index: 1; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.2); padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.08); backdrop-filter: blur(4px); align-self: flex-start; }
.feat__body { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.feat__body .eyebrow { margin-bottom: 14px; }
.feat__body h2 { font-family: var(--brand-display-family); font-size: 32px; font-weight: 700; letter-spacing: -0.02em; color: var(--color-gray-950); line-height: 1.15; margin-bottom: 16px; }
.feat__body p { font-size: 15px; line-height: 1.6; color: var(--base-text-secondary); margin-bottom: 24px; }
.feat__meta { display: flex; gap: 20px; font-size: 12px; color: var(--base-text-tertiary); margin-bottom: 28px; }

.rgrid-section { padding: 80px 0; }
.rgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px; }
.rcard { background: #fff; border: 1px solid var(--base-border-tertiary); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s, transform .15s; cursor: pointer; }
.rcard:hover { border-color: var(--color-gray-950); transform: translateY(-2px); }
.rcard__art { aspect-ratio: 16/10; position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 20px; }
.rcard__art::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 24px 24px; }
.rcard__art--a { background: linear-gradient(135deg, #1e3a5f, #0f1f33); color: #fff; }
.rcard__art--b { background: linear-gradient(135deg, #1f5e3a, #0f3521); color: #fff; }
.rcard__art--c { background: linear-gradient(135deg, #8a5a2d, #4d2f14); color: #fff; }
.rcard__art--d { background: linear-gradient(135deg, #5e3a7a, #2f1d3d); color: #fff; }
.rcard__art--e { background: linear-gradient(135deg, #5e6670, #2d3238); color: #fff; }
.rcard__art--f { background: linear-gradient(135deg, #2d6e7a, #163b42); color: #fff; }
.rcard__kind { position: relative; z-index: 1; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.22); padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.08); }
.rcard__body { padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.rcard__body h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.012em; color: var(--color-gray-950); line-height: 1.3; margin-bottom: 10px; text-wrap: balance; }
.rcard__body p { font-size: 13px; line-height: 1.55; color: var(--base-text-secondary); flex: 1; }
.rcard__meta { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; font-size: 11px; color: var(--base-text-tertiary); font-weight: 600; letter-spacing: -0.005em; }

.tools { padding: 80px 0; background: #fafaf9; border-top: 1px solid var(--base-border-tertiary); border-bottom: 1px solid var(--base-border-tertiary); }
.tools__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.tool { background: #fff; border: 1px solid var(--base-border-tertiary); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; }
.tool__ico { width: 44px; height: 44px; border-radius: 10px; background: var(--color-gray-950); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.tool h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--color-gray-950); margin-bottom: 6px; }
.tool p { font-size: 13px; color: var(--base-text-secondary); line-height: 1.55; flex: 1; }
.tool a { margin-top: 18px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--color-gray-950); }

.newsletter { padding: 80px 0; }
.newsletter__card { background: var(--color-gray-950); color: #fff; border-radius: 20px; padding: 56px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.newsletter__card h2 { font-family: var(--brand-display-family); font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 16px; color: #fff; }
.newsletter__card p { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.75); }
.newsletter__form { display: flex; background: #fff; border-radius: 10px; padding: 5px; }
.newsletter__form input { flex: 1; border: 0; background: transparent; padding: 13px 16px; font-family: inherit; font-size: 14px; color: var(--color-gray-950); outline: none; }
.newsletter__form button { background: var(--color-brand-green); color: #fff; border: 0; padding: 0 22px; border-radius: 7px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; letter-spacing: -0.005em; }
.newsletter__meta { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 12px; }

@media (max-width: 1024px) {
  .rgrid, .tools__grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .rcard__art { aspect-ratio: 21/9; padding: 14px 18px; }
  .rcard__body { padding: 18px 20px 22px; }
  .rcard__body h3 { font-size: 16px; }
  .rcard__body p { font-size: 13px; }
}
@media (max-width: 900px) {
  .feat__card { grid-template-columns: 1fr; }
  .feat__art { aspect-ratio: 21/9; padding: 18px 22px; }
  .feat__body { padding: 28px 24px; }
  .feat__body h2 { font-size: 24px; }
  .newsletter__card { grid-template-columns: 1fr; padding: 36px; gap: 28px; }
  .newsletter__card h2 { font-size: 26px; }
  .rh { padding: 56px 0 28px; }
  .rgrid-section, .tools, .newsletter { padding: 56px 0; }
}
@media (max-width: 600px) {
  .rfilter {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .rfilter::-webkit-scrollbar { display: none; }
  .rfilter > * { flex-shrink: 0; }
  .rgrid { grid-template-columns: 1fr; gap: 14px; }
  .tools__grid { grid-template-columns: 1fr; }
  .rcard {
    display: grid;
    grid-template-columns: 96px 1fr;
    grid-template-rows: auto;
  }
  .rcard__art { aspect-ratio: auto; height: 100%; min-height: 96px; padding: 10px; }
  .rcard__kind { font-size: 9px; padding: 3px 7px; }
  .rcard__body { padding: 14px 16px; }
  .rcard__body h3 { font-size: 15px; margin-bottom: 6px; }
  .rcard__body p {
    font-size: 12px; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .rcard__meta { margin-top: 10px; font-size: 10px; }
  .newsletter__card { padding: 28px 22px; }
  .newsletter__form { flex-direction: column; gap: 6px; }
  .newsletter__form button { padding: 12px; }
}