/* CoderFriend AI features page — detailed product-system direction. */

body.coderfriendai-features .wpo-shell {
  background-image:
    linear-gradient(180deg, rgba(0, 17, 38, .06), rgba(0, 8, 24, .46)),
    url("../images/context-contours.svg"),
    radial-gradient(circle at 78% 8%, rgba(23, 174, 207, .12), transparent 25%),
    radial-gradient(circle at 11% 27%, rgba(112, 223, 103, .055), transparent 22%),
    radial-gradient(circle at 78% 70%, rgba(189, 109, 255, .065), transparent 28%);
  background-size: auto, 1536px 1024px, auto, auto, auto;
  background-repeat: no-repeat, repeat-y, no-repeat, no-repeat, no-repeat;
}

body.coderfriendai-features .wpo-page-title {
  display: none;
}

.cfa-features-row {
  overflow: visible !important;
  margin-bottom: 0 !important;
}

.cfa-features-row > .wpb_column > .vc_column-inner > .wpb_wrapper {
  min-width: 0;
}

.cfa-features-hero-row {
  padding-top: 68px !important;
  padding-bottom: var(--cfa-section-gap) !important;
}

.cfa-features-pillars-row,
.cfa-features-catalog-row {
  padding-bottom: var(--cfa-section-gap) !important;
}

.cfa-features-cta-row {
  padding-bottom: 74px !important;
}

.cfa-section-eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 16px;
  color: var(--cfa-feature-accent, var(--cfa-cyan));
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .105em;
  line-height: 1.2;
  text-transform: uppercase;
}

.cfa-section-eyebrow > span {
  display: block;
  width: 32px;
  height: 1px;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}

.cfa-feature-section-heading {
  margin-bottom: 24px;
}

.cfa-feature-section-heading__row {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  align-items: end;
  gap: 64px;
}

body.coderfriendai-site .cfa-feature-section-heading h2,
body.coderfriendai-site .wpb_wrapper .cfa-feature-section-heading h2 {
  max-width: 760px;
  margin: 0;
  color: var(--cfa-text);
  font-family: inherit;
  font-size: clamp(39px, 3.4vw, 54px);
  font-weight: 730;
  letter-spacing: -.052em;
  line-height: 1.04;
}

.cfa-feature-section-heading__row > p {
  max-width: 470px;
  margin: 0 0 4px !important;
  color: rgba(192, 204, 222, .78);
  font-size: 16px;
  line-height: 1.7;
}

/* Feature hero */
.cfa-features-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(420px, .88fr) minmax(590px, 1.12fr);
  align-items: center;
  gap: clamp(42px, 5.1vw, 78px);
  min-height: 648px;
}

.cfa-features-hero::before {
  content: "";
  position: absolute;
  top: -156px;
  right: -230px;
  width: 850px;
  height: 850px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(16, 167, 197, .10), transparent 63%);
  filter: blur(4px);
}

.cfa-features-hero__copy {
  position: relative;
  z-index: 3;
  min-width: 0;
}

body.coderfriendai-site .cfa-features-hero__title,
body.coderfriendai-site .wpb_wrapper .cfa-features-hero__title {
  display: grid;
  margin: 0;
  color: var(--cfa-text);
  font-family: inherit;
  font-size: clamp(55px, 4.65vw, 71px);
  font-weight: 760;
  letter-spacing: -.062em;
  line-height: .99;
}

.cfa-features-hero__title > span {
  display: block;
}

.cfa-features-hero__title em {
  color: transparent;
  background: linear-gradient(96deg, #1cddd2 0%, #2798ec 47%, #b36aff 97%);
  background-clip: text;
  -webkit-background-clip: text;
  font-style: normal;
}

.cfa-features-hero__description {
  max-width: 580px;
  margin: 25px 0 0 !important;
  color: rgba(207, 217, 232, .83);
  font-size: 17px;
  font-weight: 380;
  letter-spacing: -.014em;
  line-height: 1.72;
}

.cfa-features-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 31px;
}

.cfa-features-hero__actions .cfa-button--primary {
  min-width: 228px;
}

.cfa-features-hero__actions .cfa-button--secondary {
  width: auto;
  min-width: 192px;
}

.cfa-features-hero__actions .cfa-button--secondary .cfa-icon {
  width: 25px;
  height: 25px;
}

.cfa-features-hero__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 520px;
  margin-top: 38px;
  padding-top: 22px;
  border-top: 1px solid rgba(82, 120, 158, .30);
}

.cfa-features-hero__metrics > span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding-right: 16px;
}

.cfa-features-hero__metrics > span + span {
  padding-left: 20px;
  border-left: 1px solid rgba(82, 120, 158, .23);
}

.cfa-features-hero__metrics strong {
  color: #fff;
  font-size: 24px;
  font-weight: 680;
  letter-spacing: -.035em;
  line-height: 1;
}

.cfa-features-hero__metrics small {
  overflow: hidden;
  color: rgba(174, 188, 210, .72);
  font-size: 11px;
  font-weight: 560;
  letter-spacing: .055em;
  line-height: 1.3;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Detailed Agent cockpit */
.cfa-agent-cockpit {
  position: relative;
  z-index: 2;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(60, 114, 161, .52);
  border-radius: var(--cfa-surface-radius);
  background:
    linear-gradient(145deg, rgba(11, 30, 54, .97), rgba(3, 13, 29, .99)),
    var(--cfa-feature-panel);
  box-shadow:
    0 42px 90px rgba(0, 0, 0, .42),
    0 0 0 1px rgba(10, 216, 211, .035),
    inset 0 1px rgba(255, 255, 255, .04);
}

.cfa-agent-cockpit::before {
  content: "";
  position: absolute;
  top: -180px;
  right: -120px;
  width: 440px;
  height: 360px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(24, 213, 208, .13), transparent 67%);
}

.cfa-agent-cockpit::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background-image: linear-gradient(rgba(104, 174, 212, .11) 1px, transparent 1px), linear-gradient(90deg, rgba(104, 174, 212, .08) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .7), transparent 65%);
}

.cfa-agent-cockpit__bar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 48px;
  padding: 0 17px;
  border-bottom: 1px solid rgba(57, 105, 148, .34);
  background: rgba(2, 10, 23, .72);
}

.cfa-agent-cockpit__bar strong {
  color: rgba(218, 229, 242, .75);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 520;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.cfa-agent-cockpit__lights,
.cfa-agent-cockpit__signal {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cfa-agent-cockpit__lights i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #31506f;
}

.cfa-agent-cockpit__lights i:first-child { background: #ff6a6a; }
.cfa-agent-cockpit__lights i:nth-child(2) { background: #ffbd32; }
.cfa-agent-cockpit__lights i:last-child { background: #70df67; }

.cfa-agent-cockpit__signal {
  justify-self: end;
  gap: 3px;
}

.cfa-agent-cockpit__signal i {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: rgba(24, 213, 208, .77);
}

.cfa-agent-cockpit__signal i:first-child { height: 5px; opacity: .45; }
.cfa-agent-cockpit__signal i:nth-child(2) { height: 8px; opacity: .7; }
.cfa-agent-cockpit__signal i:last-child { height: 11px; }

.cfa-agent-cockpit__mode-row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 58px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(57, 105, 148, .26);
}

.cfa-agent-cockpit__mode-row > small {
  color: rgba(157, 174, 198, .66);
  font-size: 10px;
  font-weight: 620;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.cfa-agent-cockpit__modes {
  display: flex;
  padding: 3px;
  border: 1px solid rgba(72, 118, 160, .30);
  border-radius: var(--cfa-action-radius);
  background: rgba(0, 6, 17, .53);
}

.cfa-agent-cockpit__modes span {
  min-width: 64px;
  padding: 7px 10px;
  border-radius: var(--cfa-action-radius);
  color: rgba(164, 180, 201, .75);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

.cfa-agent-cockpit__modes span.is-active {
  background: linear-gradient(180deg, rgba(24, 213, 208, .19), rgba(13, 151, 174, .12));
  box-shadow: inset 0 0 0 1px rgba(45, 225, 218, .30), 0 4px 16px rgba(0, 0, 0, .22);
  color: #7bf5ef;
}

.cfa-agent-cockpit__conversation {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 13px;
  padding: 17px 18px 14px;
}

.cfa-agent-cockpit__prompt {
  padding: 14px 16px;
  border: 1px solid rgba(87, 126, 164, .27);
  border-radius: var(--cfa-surface-radius);
  background: rgba(13, 31, 53, .65);
}

.cfa-agent-cockpit__prompt > span {
  display: block;
  margin-bottom: 6px;
  color: rgba(121, 231, 226, .82);
  font-size: 9px;
  font-weight: 680;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.cfa-agent-cockpit__prompt p {
  margin: 0 !important;
  color: rgba(235, 241, 249, .90);
  font-size: 12px;
  line-height: 1.55;
}

.cfa-agent-cockpit__context {
  padding: 12px 14px 14px;
  border: 1px dashed rgba(82, 126, 166, .31);
  border-radius: var(--cfa-surface-radius);
  background: rgba(1, 8, 20, .34);
}

.cfa-agent-cockpit__context-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
  color: rgba(172, 190, 213, .74);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.cfa-agent-cockpit__context-heading .cfa-icon {
  width: 14px;
  height: 14px;
  color: var(--cfa-cyan);
}

.cfa-agent-cockpit__context-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.cfa-agent-cockpit__context-grid > span {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 6px;
  min-width: 0;
  padding: 9px;
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  border-radius: var(--cfa-surface-radius);
  background: color-mix(in srgb, currentColor 5%, rgba(6, 17, 34, .82));
  color: var(--tone, var(--cfa-cyan));
}

.cfa-agent-cockpit__context-grid .tone-cyan { --tone: var(--cfa-cyan); }
.cfa-agent-cockpit__context-grid .tone-green { --tone: var(--cfa-green); }
.cfa-agent-cockpit__context-grid .tone-blue { --tone: var(--cfa-blue); }
.cfa-agent-cockpit__context-grid .tone-amber { --tone: var(--cfa-amber); }
.cfa-agent-cockpit__context-grid .tone-violet { --tone: var(--cfa-violet); }
.cfa-agent-cockpit__context-grid .tone-indigo { --tone: var(--cfa-indigo); }

.cfa-agent-cockpit__context-grid .cfa-icon {
  grid-row: 1 / span 2;
  width: 16px;
  height: 16px;
}

.cfa-agent-cockpit__context-grid b,
.cfa-agent-cockpit__context-grid small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cfa-agent-cockpit__context-grid b {
  color: rgba(225, 234, 246, .87);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.25;
}

.cfa-agent-cockpit__context-grid small {
  margin-top: 2px;
  color: rgba(153, 172, 196, .63);
  font-size: 8px;
  line-height: 1.2;
}

.cfa-agent-cockpit__run {
  padding: 13px 15px 14px;
  border: 1px solid rgba(25, 196, 194, .27);
  border-radius: var(--cfa-surface-radius);
  background: linear-gradient(120deg, rgba(11, 53, 66, .42), rgba(5, 19, 37, .62));
}

.cfa-agent-cockpit__run-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(56, 112, 146, .22);
}

.cfa-agent-cockpit__avatar {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid rgba(47, 231, 220, .33);
  border-radius: 50%;
  background: rgba(24, 213, 208, .11);
  color: var(--cfa-cyan);
}

.cfa-agent-cockpit__avatar .cfa-icon {
  width: 14px;
  height: 14px;
}

.cfa-agent-cockpit__run-heading strong {
  color: rgba(235, 243, 250, .91);
  font-size: 10px;
  font-weight: 650;
}

.cfa-agent-cockpit__run-heading small {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  color: #78eee7;
  font-size: 9px;
  font-weight: 560;
  text-transform: uppercase;
}

.cfa-agent-cockpit__run-heading small i,
.cfa-agent-cockpit__footer > span:first-child i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cfa-cyan);
  box-shadow: 0 0 9px rgba(24, 213, 208, .8);
}

.cfa-agent-cockpit__run ol {
  display: grid;
  gap: 7px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.cfa-agent-cockpit__run li {
  display: grid;
  grid-template-columns: 13px 1fr;
  align-items: center;
  gap: 8px;
  color: rgba(181, 196, 216, .76);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
  line-height: 1.3;
}

.cfa-agent-cockpit__run li > span {
  position: relative;
  display: block;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(103, 139, 174, .48);
  border-radius: 50%;
}

.cfa-agent-cockpit__run li.is-done > span {
  border-color: rgba(112, 223, 103, .66);
  background: rgba(112, 223, 103, .13);
}

.cfa-agent-cockpit__run li.is-done > span::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 3px;
  width: 4px;
  height: 6px;
  transform: rotate(42deg);
  border-right: 1px solid var(--cfa-green);
  border-bottom: 1px solid var(--cfa-green);
}

.cfa-agent-cockpit__run li.is-working {
  color: rgba(232, 241, 249, .93);
}

.cfa-agent-cockpit__run li.is-working > span {
  border-color: var(--cfa-cyan) transparent var(--cfa-cyan) var(--cfa-cyan);
  animation: cfa-feature-spin 1.15s linear infinite;
}

.cfa-agent-cockpit__run li.is-queued {
  opacity: .53;
}

.cfa-agent-cockpit__composer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 47px;
  margin: 0 18px 13px;
  padding: 0 13px;
  border: 1px solid rgba(75, 123, 165, .38);
  border-radius: var(--cfa-surface-radius);
  background: rgba(2, 10, 24, .75);
  color: rgba(154, 173, 197, .59);
  font-size: 10px;
}

.cfa-agent-cockpit__composer kbd {
  padding: 4px 6px;
  border: 1px solid rgba(83, 128, 169, .33);
  border-radius: var(--cfa-surface-radius);
  background: rgba(16, 34, 55, .77);
  color: rgba(190, 204, 221, .68);
  font-family: inherit;
  font-size: 8px;
  font-weight: 600;
  white-space: nowrap;
}

.cfa-agent-cockpit__footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 33px;
  padding: 0 18px;
  border-top: 1px solid rgba(53, 101, 143, .26);
  background: rgba(1, 7, 18, .62);
  color: rgba(142, 163, 188, .60);
  font-size: 8px;
  font-weight: 560;
  letter-spacing: .04em;
}

.cfa-agent-cockpit__footer > span:first-child {
  display: flex;
  align-items: center;
  gap: 7px;
}

.cfa-agent-cockpit__footer > span:last-child {
  color: rgba(112, 223, 103, .78);
}

.cfa-agent-cockpit__footer .cfa-icon {
  width: 14px;
  height: 14px;
}

@keyframes cfa-feature-spin {
  to { transform: rotate(1turn); }
}

/* Four connected pillars */
.cfa-feature-pillars {
  position: relative;
}

.cfa-feature-pillars__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--cfa-card-gap);
}

.cfa-feature-pillar {
  --pillar-tone: var(--cfa-cyan);
  position: relative;
  display: flex;
  min-height: 324px;
  flex-direction: column;
  overflow: hidden;
  padding: 24px;
  border: 1px solid rgba(55, 101, 143, .42);
  border-radius: var(--cfa-surface-radius);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--pillar-tone) 6%, rgba(8, 24, 44, .92)), rgba(3, 13, 29, .96));
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.cfa-feature-pillar::before {
  content: "";
  position: absolute;
  top: -70px;
  right: -70px;
  width: 180px;
  height: 180px;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--pillar-tone) 17%, transparent), transparent 68%);
}

.cfa-feature-pillar::after {
  content: "";
  position: absolute;
  right: 24px;
  bottom: 0;
  left: 24px;
  height: 1px;
  transform: scaleX(.25);
  transform-origin: left;
  background: var(--pillar-tone);
  box-shadow: 0 0 12px var(--pillar-tone);
  opacity: .65;
  transition: transform .22s ease;
}

.cfa-feature-pillar.tone-green { --pillar-tone: var(--cfa-green); }
.cfa-feature-pillar.tone-blue { --pillar-tone: var(--cfa-blue); }
.cfa-feature-pillar.tone-amber { --pillar-tone: var(--cfa-amber); }
.cfa-feature-pillar.tone-violet { --pillar-tone: var(--cfa-violet); }
.cfa-feature-pillar.tone-indigo { --pillar-tone: var(--cfa-indigo); }

.cfa-feature-pillar:hover,
.cfa-feature-pillar:focus-within {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--pillar-tone) 52%, #25405b);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .04);
}

.cfa-feature-pillar:hover::after,
.cfa-feature-pillar:focus-within::after {
  transform: scaleX(1);
}

.cfa-feature-pillar__top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.cfa-feature-pillar__icon {
  display: grid;
  place-items: center;
  width: 47px;
  height: 47px;
  border: 1px solid color-mix(in srgb, var(--pillar-tone) 38%, transparent);
  border-radius: var(--cfa-surface-radius);
  background: color-mix(in srgb, var(--pillar-tone) 10%, rgba(3, 15, 30, .82));
  color: var(--pillar-tone);
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--pillar-tone) 7%, transparent);
}

.cfa-feature-pillar__icon .cfa-icon {
  width: 23px;
  height: 23px;
}

.cfa-feature-pillar__top small {
  color: color-mix(in srgb, var(--pillar-tone) 65%, #7f91aa);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
}

body.coderfriendai-site .cfa-feature-pillar h3,
body.coderfriendai-site .wpb_wrapper .cfa-feature-pillar h3 {
  position: relative;
  z-index: 1;
  margin: 22px 0 0;
  color: #f3f7ff;
  font-family: inherit;
  font-size: 22px;
  font-weight: 680;
  letter-spacing: -.035em;
  line-height: 1.15;
}

.cfa-feature-pillar > p {
  position: relative;
  z-index: 1;
  margin: 13px 0 0 !important;
  color: rgba(179, 194, 214, .74);
  font-size: 13px;
  line-height: 1.65;
}

.cfa-feature-pillar__detail {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: auto;
  padding-top: 19px;
  color: color-mix(in srgb, var(--pillar-tone) 60%, #94a7c2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
  letter-spacing: .035em;
  line-height: 1.4;
}

.cfa-feature-pillar > a {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid rgba(69, 112, 152, .25);
  color: rgba(224, 232, 243, .88);
  font-size: 11px;
  font-weight: 620;
  line-height: 1.3;
}

.cfa-feature-pillar > a svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--pillar-tone);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s ease;
}

.cfa-feature-pillar > a:hover svg {
  transform: translateX(4px);
}

/* Catalog toolbar */
.cfa-feature-catalog {
  position: relative;
  padding: 31px;
  border: 1px solid rgba(47, 91, 132, .43);
  border-radius: var(--cfa-surface-radius);
  background:
    linear-gradient(180deg, rgba(7, 22, 42, .93), rgba(2, 10, 24, .93)),
    var(--cfa-feature-panel);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .025);
}

.cfa-feature-catalog::before {
  content: "";
  position: absolute;
  top: 0;
  right: 8%;
  left: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(24, 213, 208, .58), rgba(189, 109, 255, .42), transparent);
  box-shadow: 0 0 18px rgba(24, 213, 208, .27);
}

.cfa-feature-section-heading--catalog {
  margin-bottom: 28px;
}

.cfa-feature-view-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 560px);
  gap: 5px;
  margin: 0 0 16px;
  padding: 4px;
  border: 1px solid rgba(64, 108, 150, .42);
  border-radius: var(--cfa-action-radius);
  background: rgba(1, 8, 20, .68);
}

.cfa-feature-view-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--cfa-action-radius);
  background: transparent;
  color: rgba(164, 182, 204, .72);
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}

.cfa-feature-view-tabs button small {
  display: grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  padding: 0 5px;
  border-radius: 50%;
  background: rgba(86, 127, 164, .17);
  color: rgba(201, 216, 233, .70);
  font-size: 8px;
}

.cfa-feature-view-tabs button:hover,
.cfa-feature-view-tabs button:focus-visible {
  color: #edf7ff;
}

.cfa-feature-view-tabs button.is-active {
  border-color: rgba(24, 213, 208, .36);
  background: linear-gradient(180deg, rgba(24, 213, 208, .17), rgba(15, 128, 154, .09));
  color: #94f6f1;
  box-shadow: inset 0 1px rgba(255, 255, 255, .04);
}

.cfa-feature-view-tabs button.is-active small {
  background: rgba(24, 213, 208, .17);
  color: #b3fbf7;
}

.cfa-feature-catalog__toolbar {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(280px, 1.05fr) minmax(520px, 1.95fr);
  gap: 13px 16px;
  margin-bottom: 24px;
}

.cfa-feature-search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  height: 54px;
  border: 1px solid rgba(72, 120, 162, .48);
  border-radius: var(--cfa-action-radius);
  background: rgba(1, 8, 20, .72);
  color: rgba(157, 180, 205, .66);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.cfa-feature-search:focus-within {
  border-color: rgba(24, 213, 208, .73);
  box-shadow: 0 0 0 3px rgba(24, 213, 208, .08);
}

.cfa-feature-search > .cfa-icon {
  width: 19px;
  height: 19px;
  margin-left: 16px;
  pointer-events: none;
}

.cfa-feature-search input {
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0 44px 0 12px;
  border: 0 !important;
  border-radius: var(--cfa-action-radius) !important;
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--cfa-text) !important;
  font: inherit;
  font-size: 13px;
}

.cfa-feature-search input::placeholder {
  color: rgba(151, 170, 194, .54);
  opacity: 1;
}

.cfa-feature-search input::-webkit-search-cancel-button {
  display: none;
}

.cfa-feature-search button {
  position: absolute;
  right: 9px;
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--cfa-action-radius);
  background: rgba(70, 111, 151, .17);
  color: rgba(220, 230, 242, .78);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.cfa-feature-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  padding: 4px;
  border: 1px solid rgba(64, 108, 150, .38);
  border-radius: var(--cfa-action-radius);
  background: rgba(1, 8, 20, .60);
}

.cfa-feature-filters button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  min-height: 44px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: var(--cfa-action-radius);
  background: transparent;
  color: rgba(164, 182, 204, .69);
  font: inherit;
  font-size: 10px;
  font-weight: 610;
  line-height: 1.15;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.cfa-feature-filters button span {
  line-height: 1.2;
  text-wrap: balance;
}

.cfa-feature-filters button small {
  display: grid;
  min-width: 19px;
  height: 19px;
  place-items: center;
  padding: 0 4px;
  border-radius: 50%;
  background: rgba(79, 120, 158, .16);
  color: rgba(181, 199, 220, .62);
  font-size: 8px;
  line-height: 1;
}

.cfa-feature-filters button:hover {
  color: rgba(238, 244, 252, .9);
}

.cfa-feature-filters button.is-active {
  border-color: rgba(41, 217, 210, .31);
  background: linear-gradient(180deg, rgba(24, 213, 208, .15), rgba(15, 128, 154, .09));
  color: #8af4ef;
  box-shadow: inset 0 1px rgba(255, 255, 255, .035);
}

.cfa-feature-filters button.is-active small {
  background: rgba(24, 213, 208, .16);
  color: #a4faf6;
}

.cfa-feature-catalog__results {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  min-height: 20px;
  margin: 0 !important;
  color: rgba(146, 168, 194, .62);
  font-size: 10px;
  font-weight: 520;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.cfa-feature-catalog__results strong {
  color: rgba(225, 235, 246, .90);
  font-size: 11px;
}

.cfa-feature-catalog__results i {
  width: 1px;
  height: 12px;
  margin: 0 5px;
  background: rgba(82, 123, 161, .38);
}

/* Catalog cards */
.cfa-feature-catalog__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cfa-card-gap);
}

.cfa-feature-card {
  --card-tone: var(--cfa-cyan);
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 300px;
  flex-direction: column;
  overflow: hidden;
  padding: 24px;
  border: 1px solid rgba(50, 94, 135, .42);
  border-radius: var(--cfa-surface-radius);
  background:
    linear-gradient(148deg, color-mix(in srgb, var(--card-tone) 4.5%, rgba(8, 23, 42, .95)), rgba(3, 13, 29, .97));
  box-shadow: inset 0 1px rgba(255, 255, 255, .023);
  transition: transform .2s ease, border-color .2s ease, opacity .18s ease;
}

.cfa-feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  width: 52px;
  height: 1px;
  background: var(--card-tone);
  box-shadow: 0 0 12px var(--card-tone);
  opacity: .72;
}

.cfa-feature-card.tone-green { --card-tone: var(--cfa-green); }
.cfa-feature-card.tone-blue { --card-tone: var(--cfa-blue); }
.cfa-feature-card.tone-amber { --card-tone: var(--cfa-amber); }
.cfa-feature-card.tone-violet { --card-tone: var(--cfa-violet); }
.cfa-feature-card.tone-indigo { --card-tone: var(--cfa-indigo); }

.cfa-feature-card:hover,
.cfa-feature-card:focus-within {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--card-tone) 42%, #29465f);
}

.cfa-feature-card[hidden],
.cfa-feature-catalog__grid[hidden],
.cfa-capability-accordions[hidden],
.cfa-capability-accordion[hidden],
.cfa-feature-catalog__empty[hidden],
.cfa-feature-search button[hidden] {
  display: none !important;
}

.cfa-feature-card.is-filter-entering {
  animation: cfa-feature-card-in .28s ease both;
}

@keyframes cfa-feature-card-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

.cfa-feature-card__topline {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cfa-feature-card__icon {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--card-tone) 34%, transparent);
  border-radius: var(--cfa-surface-radius);
  background: color-mix(in srgb, var(--card-tone) 9%, rgba(5, 17, 33, .90));
  color: var(--card-tone);
}

.cfa-feature-card__icon .cfa-icon {
  width: 20px;
  height: 20px;
}

.cfa-feature-card__topline > small {
  color: color-mix(in srgb, var(--card-tone) 57%, #8fa1ba);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .095em;
  text-transform: uppercase;
}

.cfa-feature-card__topline > i {
  margin-left: auto;
  color: rgba(119, 144, 172, .37);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  font-style: normal;
  letter-spacing: .08em;
}

body.coderfriendai-site .cfa-feature-card h3,
body.coderfriendai-site .wpb_wrapper .cfa-feature-card h3 {
  margin: 19px 0 0;
  color: #f2f6fd;
  font-family: inherit;
  font-size: 19px;
  font-weight: 670;
  letter-spacing: -.032em;
  line-height: 1.18;
}

.cfa-feature-card > p {
  margin: 12px 0 20px !important;
  color: rgba(177, 192, 212, .72);
  font-size: 12px;
  line-height: 1.64;
}

.cfa-feature-card mark {
  padding: 0 2px;
  border-radius: 3px;
  background: rgba(255, 189, 50, .22);
  color: #ffe4a3;
}

.cfa-feature-card details {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(61, 105, 146, .25);
}

.cfa-feature-card summary {
  display: flex;
  align-items: center;
  min-height: 26px;
  color: rgba(208, 222, 238, .79);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

.cfa-feature-card summary::-webkit-details-marker {
  display: none;
}

.cfa-feature-card summary > strong {
  margin-left: 4px;
  color: var(--card-tone);
  font-size: 10px;
}

.cfa-feature-card summary > span[data-cfa-card-capability-noun] {
  margin-left: 3px;
}

.cfa-feature-card summary svg {
  width: 17px;
  height: 17px;
  margin-left: auto;
  fill: none;
  stroke: var(--card-tone);
  stroke-width: 1.5;
  stroke-linecap: round;
  transition: transform .2s ease;
}

.cfa-feature-card details[open] summary svg {
  transform: rotate(45deg);
}

.cfa-feature-card details ul {
  display: grid;
  gap: 9px;
  margin: 14px 0 2px;
  padding: 0;
  list-style: none;
}

.cfa-feature-card details li {
  display: grid;
  grid-template-columns: 6px 1fr;
  align-items: start;
  gap: 9px;
  color: rgba(189, 203, 220, .75);
  font-size: 10px;
  line-height: 1.5;
}

.cfa-feature-card details li > span:first-child {
  width: 4px;
  height: 4px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--card-tone);
  box-shadow: 0 0 7px color-mix(in srgb, var(--card-tone) 70%, transparent);
}

.cfa-feature-card details li > span:last-child {
  display: grid;
  gap: 5px;
}

.cfa-feature-card details li strong {
  color: rgba(229, 239, 249, .88);
  font-size: 10px;
  font-weight: 650;
}

.cfa-feature-card details li strong + span {
  color: rgba(166, 185, 207, .69);
}

/* Searchable, server-rendered capability index. Native details elements keep
   every paragraph available to search engines and AI crawlers without JS. */
.cfa-capability-accordions {
  overflow: hidden;
  border: 1px solid rgba(55, 101, 143, .46);
  border-radius: var(--cfa-surface-radius);
  background: rgba(2, 11, 24, .67);
}

.cfa-capability-accordion {
  --card-tone: var(--cfa-cyan);
  scroll-margin-top: 110px;
  border: 0;
  border-bottom: 1px solid rgba(55, 101, 143, .34);
  background: transparent;
  transition: background .2s ease;
}

.cfa-capability-accordion:last-child {
  border-bottom: 0;
}

.cfa-capability-accordion.tone-green { --card-tone: var(--cfa-green); }
.cfa-capability-accordion.tone-blue { --card-tone: var(--cfa-blue); }
.cfa-capability-accordion.tone-amber { --card-tone: var(--cfa-amber); }
.cfa-capability-accordion.tone-violet { --card-tone: var(--cfa-violet); }
.cfa-capability-accordion.tone-indigo { --card-tone: var(--cfa-indigo); }

.cfa-capability-accordion[open] {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--card-tone) 7%, transparent), transparent 56%),
    rgba(7, 22, 40, .56);
}

.cfa-capability-accordion > summary {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 14px;
  min-height: 82px;
  padding: 12px 24px;
  color: var(--cfa-text);
  list-style: none;
  cursor: pointer;
}

.cfa-capability-accordion > summary::-webkit-details-marker {
  display: none;
}

.cfa-capability-accordion > summary:hover,
.cfa-capability-accordion > summary:focus-visible {
  background: color-mix(in srgb, var(--card-tone) 4%, transparent);
  outline: 0;
}

.cfa-capability-accordion__number {
  align-self: start;
  padding-top: 9px;
  color: var(--card-tone);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .08em;
}

.cfa-capability-accordion__heading {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.cfa-capability-accordion__heading small {
  overflow: hidden;
  color: color-mix(in srgb, var(--card-tone) 54%, #8295ad);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .085em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.cfa-capability-accordion__heading strong {
  color: #eef4fb;
  font-size: 17px;
  font-weight: 680;
  letter-spacing: -.022em;
  line-height: 1.28;
}

.cfa-capability-accordion__toggle {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  justify-self: end;
  border: 1px solid color-mix(in srgb, var(--card-tone) 32%, transparent);
  border-radius: var(--cfa-action-radius);
  background: color-mix(in srgb, var(--card-tone) 7%, rgba(3, 14, 28, .75));
}

.cfa-capability-accordion__toggle::before,
.cfa-capability-accordion__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1px;
  background: var(--card-tone);
  transform: translate(-50%, -50%);
  transition: transform .2s ease, opacity .2s ease;
}

.cfa-capability-accordion__toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.cfa-capability-accordion[open] .cfa-capability-accordion__toggle::after {
  opacity: 0;
  transform: translate(-50%, -50%);
}

.cfa-capability-accordion__body {
  max-width: 1020px;
  padding: 0 72px 28px 100px;
}

.cfa-capability-accordion__body p {
  margin: 0 !important;
  color: rgba(182, 200, 220, .79);
  font-size: 14px;
  line-height: 1.78;
}

.cfa-capability-accordion__body p strong {
  color: rgba(228, 238, 249, .92);
  font-weight: 690;
}

.cfa-capability-accordion mark {
  padding: 0 2px;
  border-radius: 3px;
  background: rgba(255, 189, 50, .22);
  color: #ffe4a3;
}

.cfa-feature-catalog__empty {
  min-height: 320px;
  padding: 54px 24px;
  border: 1px dashed rgba(72, 119, 162, .43);
  border-radius: var(--cfa-surface-radius);
  background: rgba(3, 14, 29, .61);
  text-align: center;
}

.cfa-feature-catalog__empty > .cfa-icon {
  width: 34px;
  height: 34px;
  margin: 0 auto 18px;
  color: var(--cfa-cyan);
}

body.coderfriendai-site .cfa-feature-catalog__empty h3 {
  margin: 0;
  color: var(--cfa-text);
  font-family: inherit;
  font-size: 24px;
}

.cfa-feature-catalog__empty p {
  margin: 10px 0 20px !important;
  color: var(--cfa-muted);
  font-size: 13px;
}

.cfa-feature-catalog__empty button {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(24, 213, 208, .45);
  border-radius: var(--cfa-action-radius);
  background: rgba(24, 213, 208, .10);
  color: #8af5ef;
  font: inherit;
  font-size: 12px;
  font-weight: 620;
  cursor: pointer;
}

/* Closing coding-loop CTA */
.cfa-features-cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(390px, .86fr) minmax(590px, 1.14fr);
  align-items: center;
  gap: clamp(44px, 5vw, 76px);
  min-height: 500px;
  overflow: hidden;
  padding: 48px;
  border: 1px solid rgba(54, 104, 148, .46);
  border-radius: var(--cfa-surface-radius);
  background:
    radial-gradient(circle at 75% 5%, rgba(24, 213, 208, .11), transparent 35%),
    radial-gradient(circle at 95% 85%, rgba(189, 109, 255, .10), transparent 33%),
    linear-gradient(145deg, rgba(8, 27, 49, .97), rgba(2, 10, 24, .98));
  box-shadow: 0 32px 90px rgba(0, 0, 0, .27), inset 0 1px rgba(255, 255, 255, .03);
}

.cfa-features-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .15;
  background-image: linear-gradient(rgba(84, 144, 183, .10) 1px, transparent 1px), linear-gradient(90deg, rgba(84, 144, 183, .08) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(90deg, transparent 10%, #000 70%);
}

.cfa-features-cta__copy,
.cfa-features-loop {
  position: relative;
  z-index: 2;
}

body.coderfriendai-site .cfa-features-cta h2,
body.coderfriendai-site .wpb_wrapper .cfa-features-cta h2 {
  max-width: 530px;
  margin: 0;
  color: var(--cfa-text);
  font-family: inherit;
  font-size: clamp(42px, 3.7vw, 57px);
  font-weight: 740;
  letter-spacing: -.055em;
  line-height: 1.03;
}

.cfa-features-cta__copy > p {
  max-width: 520px;
  margin: 22px 0 0 !important;
  color: rgba(190, 204, 222, .78);
  font-size: 15px;
  line-height: 1.72;
}

.cfa-features-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.cfa-features-cta__actions .cfa-button--primary {
  min-width: 246px;
}

.cfa-features-cta__actions .cfa-button--primary .cfa-icon {
  width: 27px;
  height: 27px;
  margin: 0;
}

.cfa-features-cta__actions .cfa-button--secondary {
  width: auto;
  min-width: 142px;
}

.cfa-features-cta__note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  color: rgba(146, 170, 197, .64);
  font-size: 10px;
  font-weight: 550;
  letter-spacing: .045em;
}

.cfa-features-cta__note .cfa-icon {
  width: 16px;
  height: 16px;
  color: var(--cfa-green);
}

.cfa-features-loop {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(67, 114, 155, .35);
  border-radius: var(--cfa-surface-radius);
  background: rgba(1, 8, 20, .55);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .22);
}

.cfa-features-loop__track {
  position: absolute;
  top: 42px;
  bottom: 93px;
  left: 49px;
  width: 1px;
  background: linear-gradient(var(--cfa-cyan), var(--cfa-violet), var(--cfa-amber), var(--cfa-green));
  opacity: .38;
}

.cfa-features-loop__item {
  --loop-tone: var(--cfa-cyan);
  position: relative;
  display: grid;
  grid-template-columns: 24px 42px 1fr;
  align-items: center;
  gap: 11px;
  min-height: 66px;
  padding: 10px 13px;
  border: 1px solid rgba(61, 105, 146, .30);
  border-radius: var(--cfa-surface-radius);
  background: linear-gradient(90deg, color-mix(in srgb, var(--loop-tone) 6%, rgba(8, 25, 44, .80)), rgba(4, 14, 29, .76));
}

.cfa-features-loop__item.tone-green { --loop-tone: var(--cfa-green); }
.cfa-features-loop__item.tone-blue { --loop-tone: var(--cfa-blue); }
.cfa-features-loop__item.tone-amber { --loop-tone: var(--cfa-amber); }
.cfa-features-loop__item.tone-violet { --loop-tone: var(--cfa-violet); }
.cfa-features-loop__item.tone-indigo { --loop-tone: var(--cfa-indigo); }

.cfa-features-loop__number {
  color: color-mix(in srgb, var(--loop-tone) 64%, #71849e);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
  font-weight: 650;
}

.cfa-features-loop__icon {
  position: relative;
  z-index: 2;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--loop-tone) 35%, transparent);
  border-radius: var(--cfa-surface-radius);
  background: color-mix(in srgb, var(--loop-tone) 10%, #061326);
  color: var(--loop-tone);
}

.cfa-features-loop__icon .cfa-icon {
  width: 19px;
  height: 19px;
}

body.coderfriendai-site .cfa-features-loop__item h3,
body.coderfriendai-site .wpb_wrapper .cfa-features-loop__item h3 {
  margin: 0;
  color: rgba(237, 244, 251, .93);
  font-family: inherit;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -.015em;
  line-height: 1.2;
}

.cfa-features-loop__item p {
  margin: 4px 0 0 !important;
  color: rgba(156, 177, 201, .67);
  font-size: 9px;
  line-height: 1.35;
}

.cfa-features-loop__providers {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  margin-top: 2px;
  padding: 12px 14px;
  border: 1px dashed rgba(72, 118, 159, .31);
  border-radius: var(--cfa-surface-radius);
}

.cfa-features-loop__providers strong {
  color: rgba(156, 177, 201, .64);
  font-size: 8px;
  font-weight: 620;
  letter-spacing: .075em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cfa-features-loop__providers > div {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 5px;
}

.cfa-features-loop__providers span {
  padding: 4px 7px;
  border: 1px solid rgba(75, 122, 164, .26);
  border-radius: var(--cfa-surface-radius);
  background: rgba(12, 31, 51, .67);
  color: rgba(190, 205, 222, .71);
  font-size: 7px;
  font-weight: 600;
  line-height: 1;
}

/* Tablet */
@media (max-width: 1180px) {
  .cfa-features-hero {
    grid-template-columns: minmax(360px, .82fr) minmax(520px, 1.18fr);
    gap: 36px;
  }

  body.coderfriendai-site .cfa-features-hero__title,
  body.coderfriendai-site .wpb_wrapper .cfa-features-hero__title {
    font-size: clamp(48px, 5.2vw, 61px);
  }

  .cfa-agent-cockpit__context-grid {
    grid-template-columns: 1fr;
  }

  .cfa-agent-cockpit__context-grid > span {
    grid-template-columns: auto 1fr auto;
  }

  .cfa-agent-cockpit__context-grid .cfa-icon {
    grid-row: auto;
  }

  .cfa-agent-cockpit__context-grid small {
    margin: 0;
  }

  .cfa-feature-pillars__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cfa-feature-pillar {
    min-height: 286px;
  }

  .cfa-feature-catalog__toolbar {
    grid-template-columns: 1fr;
  }

  .cfa-feature-catalog__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cfa-features-cta {
    grid-template-columns: minmax(330px, .78fr) minmax(480px, 1.22fr);
    gap: 34px;
    padding: 38px;
  }
}

@media (max-width: 960px) {
  .cfa-features-hero-row {
    padding-top: 54px !important;
  }

  .cfa-features-hero {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .cfa-features-hero__copy,
  .cfa-features-hero__description {
    max-width: 700px;
  }

  .cfa-agent-cockpit {
    width: 100%;
    max-width: 760px;
    justify-self: center;
  }

  .cfa-agent-cockpit__context-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cfa-agent-cockpit__context-grid > span {
    grid-template-columns: auto 1fr;
  }

  .cfa-agent-cockpit__context-grid .cfa-icon {
    grid-row: 1 / span 2;
  }

  .cfa-agent-cockpit__context-grid small {
    margin-top: 2px;
  }

  .cfa-feature-section-heading__row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .cfa-feature-section-heading__row > p {
    max-width: 680px;
    margin: 0 !important;
  }

  .cfa-feature-filters {
    grid-template-columns: repeat(5, minmax(118px, 1fr));
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .cfa-features-cta {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .cfa-features-cta__copy,
  .cfa-features-cta__copy > p {
    max-width: 680px;
  }
}

/* Small screens, including the required 390px verification viewport. */
@media (max-width: 767px) {
  .cfa-features-hero-row {
    padding-top: 34px !important;
    padding-bottom: var(--cfa-mobile-section-gap) !important;
  }

  .cfa-features-pillars-row,
  .cfa-features-catalog-row {
    padding-bottom: var(--cfa-mobile-section-gap) !important;
  }

  .cfa-features-cta-row {
    padding-bottom: 44px !important;
  }

  .cfa-section-eyebrow {
    margin-bottom: 13px;
    font-size: 10px;
    letter-spacing: .09em;
  }

  .cfa-section-eyebrow > span {
    width: 24px;
  }

  .cfa-feature-section-heading {
    margin-bottom: 20px;
  }

  body.coderfriendai-site .cfa-feature-section-heading h2,
  body.coderfriendai-site .wpb_wrapper .cfa-feature-section-heading h2 {
    font-size: clamp(31px, 9vw, 39px);
  }

  .cfa-feature-section-heading__row > p {
    font-size: 14px;
    line-height: 1.62;
  }

  .cfa-features-hero {
    gap: 34px;
    min-height: 0;
  }

  body.coderfriendai-site .cfa-features-hero__title,
  body.coderfriendai-site .wpb_wrapper .cfa-features-hero__title {
    font-size: clamp(39px, 11.5vw, 50px);
    letter-spacing: -.055em;
    line-height: 1.01;
  }

  .cfa-features-hero__description {
    margin-top: 20px !important;
    font-size: 15px;
    line-height: 1.64;
  }

  .cfa-features-hero__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 25px;
  }

  .cfa-features-hero__actions .cfa-button,
  .cfa-features-cta__actions .cfa-button {
    width: 100%;
    min-width: 0;
  }

  .cfa-features-hero__metrics {
    margin-top: 28px;
    padding-top: 18px;
  }

  .cfa-features-hero__metrics > span {
    padding-right: 8px;
  }

  .cfa-features-hero__metrics > span + span {
    padding-left: 12px;
  }

  .cfa-features-hero__metrics strong {
    font-size: 20px;
  }

  .cfa-features-hero__metrics small {
    font-size: 8px;
    white-space: normal;
  }

  .cfa-agent-cockpit__bar {
    grid-template-columns: auto 1fr auto;
    padding: 0 12px;
  }

  .cfa-agent-cockpit__bar strong {
    overflow: hidden;
    padding: 0 8px;
    font-size: 8px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cfa-agent-cockpit__mode-row {
    display: grid;
    gap: 8px;
    padding: 11px 12px;
  }

  .cfa-agent-cockpit__modes {
    width: 100%;
  }

  .cfa-agent-cockpit__modes span {
    min-width: 0;
    flex: 1;
  }

  .cfa-agent-cockpit__conversation {
    gap: 10px;
    padding: 12px;
  }

  .cfa-agent-cockpit__context-grid {
    grid-template-columns: 1fr;
  }

  .cfa-agent-cockpit__context-grid > span {
    grid-template-columns: auto 1fr auto;
  }

  .cfa-agent-cockpit__context-grid .cfa-icon {
    grid-row: auto;
  }

  .cfa-agent-cockpit__context-grid small {
    margin: 0;
  }

  .cfa-agent-cockpit__composer {
    margin: 0 12px 11px;
    padding: 0 11px;
  }

  .cfa-agent-cockpit__composer > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cfa-agent-cockpit__footer {
    padding: 0 12px;
  }

  .cfa-feature-pillars__grid,
  .cfa-feature-catalog__grid {
    grid-template-columns: 1fr;
    gap: var(--cfa-mobile-card-gap);
  }

  .cfa-feature-pillar,
  .cfa-feature-card {
    min-height: 0;
    padding: 20px;
  }

  .cfa-feature-pillar {
    min-height: 300px;
  }

  .cfa-feature-catalog {
    padding: 20px;
  }

  .cfa-feature-section-heading--catalog {
    margin-bottom: 20px;
  }

  .cfa-feature-view-tabs {
    width: 100%;
    margin-bottom: 10px;
  }

  .cfa-feature-view-tabs button {
    min-height: 48px;
    padding: 7px 8px;
    font-size: 10px;
  }

  .cfa-feature-catalog__toolbar {
    gap: 10px;
    margin-bottom: 20px;
  }

  .cfa-feature-search {
    height: 50px;
  }

  .cfa-feature-filters {
    padding: 4px;
    border-radius: var(--cfa-action-radius);
    background: rgba(1, 8, 20, .32);
  }

  .cfa-feature-catalog__results {
    justify-content: flex-start;
    flex-wrap: wrap;
    font-size: 9px;
  }

  .cfa-feature-card::before {
    left: 20px;
  }

  .cfa-feature-card > p {
    margin-bottom: 19px !important;
    font-size: 12px;
  }

  .cfa-capability-accordion > summary {
    grid-template-columns: 42px minmax(0, 1fr) 34px;
    gap: 9px;
    min-height: 78px;
    padding: 12px 20px;
  }

  .cfa-capability-accordion__number {
    padding-top: 8px;
    font-size: 9px;
  }

  .cfa-capability-accordion__heading {
    gap: 5px;
  }

  .cfa-capability-accordion__heading small {
    font-size: 8px;
  }

  .cfa-capability-accordion__heading strong {
    font-size: 14px;
    line-height: 1.3;
  }

  .cfa-capability-accordion__toggle {
    width: 29px;
    height: 29px;
  }

  .cfa-capability-accordion__body {
    padding: 0 20px 24px 71px;
  }

  .cfa-capability-accordion__body p {
    font-size: 13px;
    line-height: 1.7;
  }

  .cfa-features-cta {
    gap: 32px;
    min-height: 0;
    padding: 20px;
  }

  body.coderfriendai-site .cfa-features-cta h2,
  body.coderfriendai-site .wpb_wrapper .cfa-features-cta h2 {
    font-size: clamp(34px, 10vw, 43px);
  }

  .cfa-features-cta__copy > p {
    margin-top: 18px !important;
    font-size: 14px;
  }

  .cfa-features-cta__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 24px;
  }

  .cfa-features-cta__note {
    align-items: flex-start;
    line-height: 1.45;
  }

  .cfa-features-loop {
    padding: 10px;
  }

  .cfa-features-loop__track {
    left: 39px;
  }

  .cfa-features-loop__item {
    grid-template-columns: 18px 36px 1fr;
    gap: 8px;
    min-height: 70px;
    padding: 9px;
  }

  .cfa-features-loop__icon {
    width: 34px;
    height: 34px;
  }

  .cfa-features-loop__providers {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 12px;
  }

  .cfa-features-loop__providers > div {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cfa-agent-cockpit__run li.is-working > span,
  .cfa-feature-card.is-filter-entering {
    animation: none;
  }

  .cfa-feature-pillar,
  .cfa-feature-card,
  .cfa-feature-pillar::after,
  .cfa-feature-pillar > a svg {
    transition: none;
  }
}