/* === 2026-10-22 home page VoIP PBX features section: the /voip-pbx Features block, its rules scoped under .hf-features === */
.hf-features .band-head {
      max-width: 800px;}
.hf-features .band-head h2 {
      margin: 0;
      font-size: clamp(26px, 3.2vw, 40px);
      line-height: 1.18;}
.hf-features .band-head p {
      margin: 16px 0 0;
      font-size: 17px;
      line-height: 1.7;
      color: var(--ink-soft);}
.hf-features .yband {
      padding-top: 0;
      padding-bottom: clamp(48px, 6vw, 84px);}
.hf-features .pcard {
      position: relative;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 0 10px 10px 10px;
      padding: clamp(30px, 3.6vw, 52px) clamp(26px, 3.4vw, 48px) clamp(34px, 4vw, 56px);}
.hf-features .band-head {
      max-width: 60ch;
      margin: 0 0 clamp(18px, 2.1vw, 26px);}
.hf-features .band-head h2 {
      margin: 0;
      font-size: clamp(23px, 2.15vw, 30px);
      line-height: 1.24;
      letter-spacing: -.015em;}
.hf-features .kf-list {
      margin-top: 0;}
.hf-features .kf-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
      gap: 4px 30px;
      list-style: none;
      margin: clamp(28px, 3vw, 40px) 0 0;
      padding: 0;}
.hf-features .kf-list li {
      display: flex;
      align-items: flex-start;
      gap: 11px;
      font-size: 15.5px;
      line-height: 1.5;
      color: var(--ink);
      padding: 12px 0;
      border-bottom: 1px solid var(--line-soft);}
.hf-features .kf-list svg {
      width: 19px;
      height: 19px;
      flex: none;
      margin-top: 2px;
      color: var(--good-ink);}
.hf-features .kf-list li b {
      display: block;
      margin-bottom: 2px;}
.hf-features .kf-list li.kf-hi {
      grid-column: 1 / -1;
      align-items: center;
      gap: 13px;
      margin-top: 14px;
      padding: 16px 20px;
      border: 1px solid color-mix(in srgb, var(--magenta) 30%, transparent);
      border-radius: 14px;
      background: color-mix(in srgb, var(--magenta) 7%, var(--surface));
      font-size: 16.5px;
      font-weight: 700;
      color: var(--ink);}
.hf-features .kf-list li.kf-hi svg {
      color: var(--magenta-ink);
      margin-top: 0;}
.hf-features .kf-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0 44px;}
@media (max-width:900px) {
  .hf-features .kf-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;}
}
.hf-features .kf-group {
      margin: clamp(26px, 3vw, 36px) 0 2px;
      font-size: 17.5px;
      font-weight: 700;
      color: var(--ink);}
.hf-features .kf-group:first-of-type {
      margin-top: 0;}
.hf-features .band-head p {
      margin: 8px 0 0;
      color: var(--ink-soft);}
.hf-features .kf-list svg {
      box-sizing: border-box;
      width: 22px;
      height: 22px;
      padding: 4px;
      margin-top: 1px;
      border-radius: 50%;
      background: color-mix(in srgb, var(--good) 20%, transparent);}
.hf-features .kf-list li.kf-hi svg {
      background: color-mix(in srgb, var(--magenta) 16%, transparent);}
.hf-features .band-head {
  max-width: none;}
.hf-features .band-head p {
  max-width: 90ch;
  text-wrap: pretty;}
.hf-features .band-head h2 em {
  font-style: italic;}
.hf-features .vp-more {
  margin-top: clamp(26px, 3vw, 36px);}
.hf-features .vp-more > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  cursor: pointer;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--blue) 30%, var(--line));
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
  color: var(--blue-ink);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background .14s, border-color .14s;}
.hf-features .vp-more > summary::-webkit-details-marker {
  display: none;}
.hf-features .vp-more > summary:hover {
  background: color-mix(in srgb, var(--blue) 14%, var(--surface));
  border-color: var(--blue);}
.hf-features .vp-more > summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;}
.hf-features .vp-more > summary svg {
  width: 18px;
  height: 18px;
  transition: transform .2s;}
.hf-features .vp-more[open] > summary svg {
  transform: rotate(180deg);}
.hf-features .vp-more .vp-open,
.hf-features .vp-more[open] .vp-closed {
  display: none;}
.hf-features .vp-more[open] .vp-open {
  display: inline;}
.hf-features .vp-more-body {
  padding-top: clamp(22px, 2.6vw, 32px);}
.hf-features .vp-more-body > .kf-group:first-child {
  margin-top: 0;}
.hf-features .vp-areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 14px;}
.hf-features .vp-areas article {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  border-radius: 12px;
  background: var(--surface);}
.hf-features .vp-areas h3 {
  margin: 0 0 4px;
  font-size: 16px;
  color: var(--blue-ink);}
.hf-features .vp-areas p {
  margin: 0 0 8px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);}
.hf-features .vp-areas small {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);}
.hf-features .vp-areas article,
.hf-features .vp-areas article {
  background: var(--surface);}

.hf-features .band-head {
  max-width: none;}
.hf-features .band-head p {
  max-width: 90ch;
  text-wrap: pretty;}
.hf-features .band-head h2 em {
  font-style: italic;}
.hf-features .vp-more {
  margin-top: clamp(26px, 3vw, 36px);}
.hf-features .vp-more > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  cursor: pointer;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--blue) 30%, var(--line));
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
  color: var(--blue-ink);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background .14s, border-color .14s;}
.hf-features .vp-more > summary::-webkit-details-marker {
  display: none;}
.hf-features .vp-more > summary:hover {
  background: color-mix(in srgb, var(--blue) 14%, var(--surface));
  border-color: var(--blue);}
.hf-features .vp-more > summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;}
.hf-features .vp-more > summary svg {
  width: 18px;
  height: 18px;
  transition: transform .2s;}
.hf-features .vp-more[open] > summary svg {
  transform: rotate(180deg);}
.hf-features .vp-more .vp-open,
.hf-features .vp-more[open] .vp-closed {
  display: none;}
.hf-features .vp-more[open] .vp-open {
  display: inline;}
.hf-features .vp-more-body {
  padding-top: clamp(22px, 2.6vw, 32px);}
.hf-features .vp-more-body > .kf-group:first-child {
  margin-top: 0;}
.hf-features .vp-areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 14px;}
.hf-features .vp-areas article {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  border-radius: 12px;
  background: var(--surface);}
.hf-features .vp-areas h3 {
  margin: 0 0 4px;
  font-size: 16px;
  color: var(--blue-ink);}
.hf-features .vp-areas p {
  margin: 0 0 8px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);}
.hf-features .vp-areas small {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);}
.hf-features .vp-areas article,
.hf-features .vp-areas article {
  background: var(--surface);}
@media (min-width: 1400px) {
  .hf-features .vp-areas {
    grid-template-columns: repeat(5, minmax(0, 1fr));}
}
@media (min-width: 640px) and (max-width: 1399px) {
  .hf-features .vp-areas {
    grid-template-columns: repeat(2, minmax(0, 1fr));}
}
.hf-features .vp-areas p,
.hf-features .vp-areas small {
  text-wrap: pretty;}
.hf-features .vp-blue-head {
  color: var(--blue);}
.hf-features .vp-more > summary,
.hf-features .vp-more-end {
  width: fit-content;
  min-width: min(320px, 100%);
  margin-inline: auto;}
.hf-features .vp-more-end {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(22px, 2.6vw, 32px);
  padding: 14px 20px;
  cursor: pointer;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--blue) 30%, var(--line));
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
  color: var(--blue-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;}
.hf-features .vp-more-end:hover {
  background: color-mix(in srgb, var(--blue) 14%, var(--surface));
  border-color: var(--blue);}
.hf-features .vp-more-end svg {
  width: 18px;
  height: 18px;
  transform: rotate(180deg);}
.hf-features .vp-more > summary,
.hf-features .vp-more-end {
  padding-top: 8px;
  padding-bottom: 8px;}


/* home page placement (Randall 2026-10-22) */
.hf-features {
  padding: clamp(36px, 4.4vw, 60px) 0;
}
.hf-features .pcard {
  border-radius: 14px;
}
.hf-features .band-head {
  max-width: none;
}
/* the lists start right under their bold group heading, as on /voip-pbx (there ".ppanel .kf-list" outranks the
   plain ".kf-list" margin; scoped here both had the same weight and the 40px margin won) */
.hf-features .pcard .kf-list {
  margin-top: 0;
}
.hf-features .pcard .band-head p {
  margin: 8px 0 0;
}
/* same heading lettering as on /voip-pbx (the home page's own h2 is the serif) */
.hf-features .band-head h2 {
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -.015em;
}
@media (min-width: 1024px) {
  .hf-features .band-head h2 {
    font-size: min(27px, calc((100vw - 210px) / 45));
    white-space: nowrap;
  }
}