.plugin-page {
  background: #f6f1e8;
}

.plugin-hero {
  padding: clamp(88px, 12vw, 152px) 0 clamp(64px, 8vw, 104px);
  color: #fff;
  background: radial-gradient(circle at 82% 18%, rgba(242,216,115,.18), transparent 34%), #10273d;
}

.plugin-hero .kicker,
.plugin-hero p { color: rgba(255,255,255,.76); }
.plugin-hero h1 { max-width: 860px; margin: 12px 0 22px; font: 700 clamp(42px, 7vw, 82px)/1.02 Georgia,serif; }
.plugin-hero p { max-width: 720px; font-size: clamp(18px, 2.2vw, 23px); }
.plugin-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.plugin-actions .button.secondary { color: #fff; border-color: rgba(255,255,255,.35); }

.plugin-section { padding: clamp(64px, 9vw, 112px) 0; }
.plugin-section.alt { background: #ebe2d2; }
.plugin-heading { max-width: 760px; margin-bottom: 38px; }
.plugin-heading h2 { margin: 8px 0 14px; color: #10273d; font: 700 clamp(32px, 4.5vw, 54px)/1.08 Georgia,serif; }
.plugin-heading p { color: #647084; font-size: 18px; }

.plugin-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.plugin-card { display: flex; flex-direction: column; min-height: 290px; padding: 30px; border: 1px solid rgba(16,39,61,.13); border-radius: 18px; background: #fff; box-shadow: 0 16px 42px rgba(16,39,61,.08); }
.plugin-card .number { color: #8a9a4a; font-weight: 900; letter-spacing: .12em; }
.plugin-card h2,.plugin-card h3 { margin: 18px 0 10px; color: #10273d; font: 700 28px/1.14 Georgia,serif; }
.plugin-card p { margin: 0 0 22px; color: #647084; }
.plugin-card .status { display: inline-flex; align-self: flex-start; margin-top: auto; padding: 7px 11px; border-radius: 999px; color: #10273d; background: #f7ecc9; font-size: 12px; font-weight: 850; }
.plugin-card a { margin-top: 18px; color: #10273d; font-weight: 850; }
.plugin-card.featured { border-top: 5px solid #8a9a4a; }
.plugin-card.connector { grid-column: 1 / -1; min-height: 0; }
.plugin-features { display: grid; gap: 9px; margin: 0 0 22px; padding-left: 20px; color: #344b61; }
.plugin-card details { margin: 0 0 24px; padding: 14px 16px; border-radius: 12px; background: #f5f0e7; color: #344b61; }
.plugin-card summary { cursor: pointer; color: #10273d; font-weight: 850; }
.plugin-card details ol { margin: 14px 0 0; padding-left: 22px; }
.plugin-card details p { margin: 12px 0 0; font-size: 14px; }
.card-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.plugin-card .status.available { margin-top: 0; color: #29411f; background: #e2efce; }
.plugin-card .status.review { margin-top: 0; }
.plugin-card .button.download { margin: 0; color: #fff; text-decoration: none; }

.maker-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 54px; align-items: start; }
.maker-facts { padding: 30px; border-radius: 18px; color: #fff; background: #172f48; }
.maker-facts dl { margin: 0; }
.maker-facts div { padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.maker-facts div:last-child { border: 0; }
.maker-facts dt { color: #f2d873; font-size: 12px; font-weight: 850; text-transform: uppercase; letter-spacing: .1em; }
.maker-facts dd { margin: 5px 0 0; }
.principles { display: grid; gap: 14px; margin: 26px 0 0; padding: 0; list-style: none; }
.principles li { padding: 18px 20px; border-left: 4px solid #d7b957; background: rgba(255,255,255,.72); }

@media (max-width: 760px) {
  .plugin-grid,.maker-grid { grid-template-columns: 1fr; }
  .plugin-card { min-height: 0; }
  .plugin-card.connector { grid-column: auto; }
  .site-header .site-nav { display: none; }
}