/* FEATURED: six 2026 product brochures. All selectors prefixed #featured. */
#featured{background:var(--ink);--fx-gap:56px;--cw:clamp(250px,min(34vw,calc(100svh - 490px)),500px)}
#featured .fx-pin{position:relative;display:flex;flex-direction:column;padding:calc(var(--header-h) + 40px) 0 36px;overflow:clip;isolation:isolate;
  background:linear-gradient(var(--ink),transparent 120px),radial-gradient(ellipse at 10% 15%,rgba(25,101,98,.4) 0%,transparent 45%),radial-gradient(ellipse at 100% 100%,rgba(25,101,98,.35) 0%,transparent 40%),var(--ink)}
#featured .fx-hex{position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='%238C99A3' fill-opacity='0.07' fill-rule='evenodd'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 0%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 40%,#000 0%,transparent 75%)}
#featured .fx-glow{position:absolute;z-index:-1;pointer-events:none;left:50%;top:5%;width:70vw;height:90%;margin-left:-35vw;opacity:.7;will-change:transform;
  background:radial-gradient(closest-side,rgba(25,101,98,.55),rgba(25,101,98,.18) 55%,transparent)}
#featured .fx-head{display:grid;grid-template-columns:1fr 1fr;gap:16px 56px;align-items:end;width:100%}
#featured .fx-head .h2{margin-top:12px;max-width:16ch}
#featured .fx-head .lead{margin:0;max-width:46ch}
#featured .fx-stage{flex:1;min-height:0;display:flex;align-items:center;overflow:clip;padding:16px 0}
#featured .fx-track{display:flex;gap:var(--fx-gap);width:max-content;position:relative;padding:0 var(--fx-pad,calc(50vw - var(--cw)/2));will-change:transform}
#featured .fx-card{flex:none;width:var(--cw);will-change:transform,opacity}
#featured .fx-book{position:relative;width:100%;cursor:pointer}
#featured .fx-pages{position:absolute;inset:3% -2.5% 3% 1%;border-radius:2px 6px 6px 2px;opacity:0;
  background:repeating-linear-gradient(90deg,#F7F8FA 0 2px,#8C99A3 2px 3px);box-shadow:0 18px 40px rgba(11,13,16,.45)}
#featured .fx-cover{position:relative;width:100%;height:100%;transform-origin:0 50%;border-radius:2px 6px 6px 2px;overflow:hidden;background:var(--ink-3);
  box-shadow:0 24px 60px rgba(11,13,16,.5),0 0 0 1px rgba(247,248,250,.06);will-change:transform;backface-visibility:hidden}
#featured .fx-cover img{width:100%;height:100%;object-fit:cover}
#featured .fx-cover::after{content:"";position:absolute;inset:0 auto 0 0;width:7%;pointer-events:none;background:linear-gradient(90deg,rgba(11,13,16,.28),transparent)}
#featured .fx-meta{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:22px}
#featured .fx-meta h3{margin:0;font-size:22px;line-height:1.2;font-weight:600;letter-spacing:-.01em}
#featured .fx-meta p{margin:4px 0 0;font-size:14px;color:var(--grey)}
#featured .fx-meta .btn{flex:none;white-space:nowrap}
#featured .fx-rail{display:flex;align-items:center;gap:28px;width:100%;margin-top:4px}
#featured .fx-count{font-size:15px;font-weight:600;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--white);min-width:76px}
#featured .fx-count span{color:var(--grey);font-weight:500}
#featured .fx-ticks{position:relative;flex:1;display:flex;justify-content:space-between;align-items:center}
#featured .fx-line,#featured .fx-fill{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line-dark)}
#featured .fx-fill{background:var(--teal-mid);transform:scaleX(0);transform-origin:0 50%}
#featured .fx-tick{position:relative;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer}
#featured .fx-tick::after{content:"";position:absolute;left:50%;top:50%;width:2px;height:12px;margin:-6px 0 0 -1px;background:var(--grey);transition:background .3s,transform .4s var(--ease-out)}
#featured .fx-tick[aria-current="true"]::after{background:var(--teal);transform:scaleY(1.6)}
#featured .fx-tick:first-child{margin-left:-22px}#featured .fx-tick:last-child{margin-right:-22px}

/* Carousel mode: below 900px, or reduced motion. No pinning. */
@media (max-width:899px),(prefers-reduced-motion:reduce){
  #featured{--fx-gap:20px;--cw:min(78vw,420px)}
  #featured .fx-pin{padding:calc(var(--header-h) + 24px) 0 40px}
  #featured .fx-head{grid-template-columns:1fr}
  #featured .fx-stage{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:28px 0}
  #featured .fx-stage::-webkit-scrollbar{display:none}
  #featured .fx-card{scroll-snap-align:center}
  #featured .fx-meta{flex-direction:column;align-items:flex-start}
  #featured .fx-meta .btn{width:100%;justify-content:center}
  #featured .fx-glow{width:120vw;margin-left:-60vw;top:0;height:60%}
}
@media (max-width:899px){#featured .fx-count{min-width:68px}}
@media (min-width:900px) and (prefers-reduced-motion:no-preference){#featured .fx-pin{min-height:100svh}}