/* ── Feature section ── */
.feat-sec { padding: 80px 48px; }
.feat-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.feat-card { background: var(--surface); border: 1px solid #1a1730; border-radius: 14px; padding: 26px; transition: border-color 0.2s; }
.feat-card:hover { border-color: var(--border-acc); }
.feat-card.hi { border-color: var(--border-acc); background: linear-gradient(135deg, var(--surface-hi), var(--surface)); }
.f-title { font-size: 15px; font-weight: 800; color: #fff; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.f-new { background: var(--purple); color: #fff; font-size: 9px; font-weight: 700; padding: 1px 7px; border-radius: 20px; }
.f-desc { font-size: 12px; color: var(--text-muted); line-height: 1.6; }

/* ── Feature icons (38×38px) ── */
.f-icon-css {
  width: 38px; height: 38px; border-radius: 8px;
  margin-bottom: 14px; position: relative;
  background: #1e1b3a; border: 1px solid var(--border-acc);
  flex-shrink: 0; display: block; overflow: hidden;
}
/* Bake: ◆ */
.f-icon-bake::after { content: "◆"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--purple-mut); }
/* IN/OUT: ▶ ◀ */
.f-icon-inout { display: flex; align-items: center; justify-content: space-evenly; }
.f-icon-inout::before { content: "▶"; font-size: 12px; color: var(--purple-mut); display: block; }
.f-icon-inout::after  { content: "◀"; font-size: 12px; color: #6d28d9; display: block; }
/* Mask: SVG background */
.f-icon-mask { background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzggMzgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjM4IiBoZWlnaHQ9IjM4IiByeD0iOCIgZmlsbD0iIzFlMWIzYSIvPjx0ZXh0IHg9IjE5IiB5PSIzNiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIyOCIgZm9udC13ZWlnaHQ9IjkwMCIgZm9udC1mYW1pbHk9Ii1hcHBsZS1zeXN0ZW0sQXJpYWwsc2Fucy1zZXJpZiIgZmlsbD0iI2M0YjVmZCI+VDwvdGV4dD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMzgiIGhlaWdodD0iMTIiIGZpbGw9IiMxZTFiM2EiLz48cmVjdCB4PSIwIiB5PSIyNiIgd2lkdGg9IjM4IiBoZWlnaHQ9IjEyIiBmaWxsPSIjMWUxYjNhIi8+PHJlY3QgeD0iMyIgeT0iMTIiIHdpZHRoPSIzMiIgaGVpZ2h0PSIxNCIgcng9IjIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2E3OGJmYSIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48L3N2Zz4="); background-size: cover; overflow: hidden; }
.f-icon-mask::before, .f-icon-mask::after { display: none; }
/* Ease: SVG background */
.f-icon-ease { background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzggMzgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjM4IiBoZWlnaHQ9IjM4IiByeD0iOCIgZmlsbD0iIzFlMWIzYSIvPjxwYXRoIGQ9Ik0gNiAzMiBDIDYgMTQgMzIgMjQgMzIgNiIgc3Ryb2tlPSIjYTc4YmZhIiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxjaXJjbGUgY3g9IjYiIGN5PSIzMiIgcj0iMi41IiBmaWxsPSIjYTc4YmZhIi8+PGNpcmNsZSBjeD0iMzIiIGN5PSI2IiByPSIyLjUiIGZpbGw9IiNhNzhiZmEiLz48bGluZSB4MT0iNiIgeTE9IjMyIiB4Mj0iNiIgeTI9IjE0IiBzdHJva2U9IiM2ZDI4ZDkiIHN0cm9rZS13aWR0aD0iMS4yIiBzdHJva2UtZGFzaGFycmF5PSIyIDIiLz48Y2lyY2xlIGN4PSI2IiBjeT0iMTQiIHI9IjIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzdjM2FlZCIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48bGluZSB4MT0iMzIiIHkxPSI2IiB4Mj0iMzIiIHkyPSIyNCIgc3Ryb2tlPSIjNmQyOGQ5IiBzdHJva2Utd2lkdGg9IjEuMiIgc3Ryb2tlLWRhc2hhcnJheT0iMiAyIi8+PGNpcmNsZSBjeD0iMzIiIGN5PSIyNCIgcj0iMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjN2MzYWVkIiBzdHJva2Utd2lkdGg9IjEuNSIvPjwvc3ZnPg=="); background-size: cover; overflow: hidden; }
.f-icon-ease::before, .f-icon-ease::after { display: none; }
/* Grouping: A + Aa */
.f-icon-grouping::before { content: "A"; position: absolute; left: 5px; top: 5px; font-size: 12px; font-weight: 900; color: var(--purple-mut); line-height: 1; }
.f-icon-grouping::after  { content: "Aa"; position: absolute; right: 4px; bottom: 4px; font-size: 9px; font-weight: 900; color: #6d28d9; line-height: 1; }
/* Presets: stacked bars */
.f-icon-presets::before { content: ""; position: absolute; top: 7px; left: 5px; right: 5px; height: 4px; background: var(--border-acc); border-radius: 2px; }
.f-icon-presets::after  { content: ""; position: absolute; top: 15px; left: 5px; right: 5px; height: 4px; background: var(--purple); border-radius: 2px; box-shadow: 0 8px 0 var(--purple-mut); }