/* Four ways to sell the app in a compact block. A and D swap a panel on
   click, B scrolls, C is a static three-up. All share the same content. */

/* ============ shared ============ */
.fx__art{display:grid;place-items:center;border-radius:var(--r-lg);background:var(--t);
  aspect-ratio:5/4;overflow:hidden}
.fx__art img{width:64%}
.fx-eyebrow{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c)}
.fx-bullets{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.45rem}
.fx-bullets li{display:flex;align-items:flex-start;gap:.55rem;font-size:.95rem;
  color:var(--text-muted)}
.fx-bullets li::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--c);
  flex:0 0 auto;margin-top:.42rem}

/* ============ A · TABBED CALLOUTS ============ */
.fxa__tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.6rem}
.fxa__tab{font-family:var(--font-display);font-weight:700;font-size:.95rem;
  border:none;background:#fff;color:var(--text-muted);border-radius:var(--r-pill);
  padding:.5rem 1.15rem;cursor:pointer;box-shadow:0 1px 3px rgba(45,42,38,.14);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease}
.fxa__tab:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(45,42,38,.18)}
.fxa__tab[aria-selected="true"]{background:var(--tc);color:#fff;
  box-shadow:0 3px 0 rgba(45,42,38,.18)}
.fxa__tab[aria-selected="true"].ink{color:var(--text)}

.fxa__panel{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);
  align-items:center;background:#fff;border-radius:var(--r-xl);
  padding:clamp(1.3rem,3vw,2.2rem);box-shadow:0 3px 16px rgba(45,42,38,.10)}
.fxa__panel h3{font-size:clamp(1.4rem,3vw,2rem);margin-top:.35rem}
.fxa__panel > *{min-width:0}
.fxa__panel p.lede{color:var(--text-muted);margin-top:.6rem;font-size:1.02rem}
.fx-in{animation:fxIn .32s ease both}
@keyframes fxIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ============ B · CAROUSEL ============ */
.fxb{position:relative}
.fxb__rail{display:flex;gap:1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:.4rem .2rem 1.2rem;scrollbar-width:none}
.fxb__rail::-webkit-scrollbar{display:none}
.fxb__card{flex:0 0 clamp(230px,26vw,290px);scroll-snap-align:start;background:#fff;
  border-radius:var(--r-lg);overflow:hidden;box-shadow:0 2px 10px rgba(45,42,38,.12);
  border:1px solid rgba(45,42,38,.07);transition:transform .16s ease, box-shadow .16s ease}
.fxb__card:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(45,42,38,.16)}
.fxb__card .fx__art{border-radius:0;aspect-ratio:5/3}
.fxb__body{padding:1rem 1.1rem 1.25rem}
.fxb__body h3{font-size:1.15rem;margin-top:.4rem}
.fxb__body p{font-size:.9rem;color:var(--text-muted);margin-top:.35rem;line-height:1.5}
.fxb__nav{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.2rem}
.fxb__nav button{width:38px;height:38px;border-radius:50%;border:none;background:#fff;
  box-shadow:0 2px 8px rgba(45,42,38,.18);cursor:pointer;font-size:1.05rem;line-height:1}
.fxb__nav button:hover{background:var(--yellow)}

/* ============ C · VALUE PILLARS ============ */
.fxc{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.6rem}
.fxc__item{padding-top:1.1rem;border-top:4px solid var(--c)}
.fxc__item h3{font-size:1.2rem;margin-top:.5rem}
.fxc__item p{color:var(--text-muted);font-size:.95rem;margin-top:.35rem}

/* ============ D · ACCORDION + GRAPHIC ============ */
.fxd{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.fxd__list{display:grid;gap:.6rem}
.fxd__row{background:#fff;border-radius:var(--r-lg);box-shadow:0 2px 8px rgba(45,42,38,.10);
  overflow:hidden;transition:box-shadow .16s ease}
.fxd__btn{width:100%;display:flex;align-items:center;gap:.7rem;background:none;border:none;
  padding:.9rem 1.1rem;cursor:pointer;font-family:var(--font-display);font-weight:700;
  font-size:1.05rem;color:var(--text);text-align:left}
.fxd__btn i{width:11px;height:11px;border-radius:50%;background:var(--c);flex:0 0 auto;
  font-style:normal}
.fxd__btn .plus{margin-left:auto;color:var(--text-faint);font-weight:400;font-size:1.2rem;
  transition:transform .2s ease}
.fxd__row.open{box-shadow:0 6px 20px rgba(45,42,38,.14)}
.fxd__row.open .plus{transform:rotate(45deg)}
.fxd__panel{display:none;padding:0 1.1rem 1.1rem 2.5rem}
.fxd__row.open .fxd__panel{display:block;animation:fxIn .26s ease both}
.fxd__panel p{color:var(--text-muted);font-size:.95rem}
.fxd__stage{position:relative}
.fxd__stage .fx__art{aspect-ratio:1/1}

@media (max-width:820px){
  .fxa__panel,.fxd{grid-template-columns:1fr}
  .fxd__stage{order:-1}
}