/* Featured Tools: approved Illustrated Aurora presentation. */

.featured-tools [hidden] {
  display: none !important;
}

.featured-tools :is(h1, h2, p, figure) {
  margin: 0;
}

.featured-tools svg {
  inline-size: 1rem;
  block-size: 1rem;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.8;
}

.featured-tools__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-block-size: var(--featured-tools-height);
  padding-block: 0.75rem 2.65rem;
  gap: 0.5rem;
}

.featured-tools__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.featured-tools__topbar h1 {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-brand-navy);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.featured-tools__mark {
  display: inline-grid;
  color: var(--color-brand-orange);
  place-items: center;
}

.featured-tools__controls {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.featured-tools__controls button {
  display: inline-grid;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0;
  color: var(--featured-tools-ink);
  cursor: pointer;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--featured-tools-accent) 26%, #fff);
  border-radius: 50%;
  place-items: center;
}

.featured-tools__controls button:hover {
  color: #fff;
  background: var(--featured-tools-ink);
  border-color: var(--featured-tools-ink);
}

.featured-tools__controls [data-featured-position] {
  min-inline-size: 2.4rem;
  color: #555c71;
  font-size: 0.72rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.featured-tools__slides {
  display: grid;
  min-inline-size: 0;
  touch-action: pan-y;
}

.featured-tools__slide {
  --category-accent: var(--featured-tools-accent);
  --category-accent-dark: var(--featured-tools-ink);

  display: grid;
  grid-area: 1 / 1;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  align-items: center;
  gap: 2rem;
}

.featured-tools__slide[data-featured-state="inactive"] {
  visibility: hidden;
  pointer-events: none;
}

.featured-tools__content {
  min-inline-size: 0;
}

.featured-tools__category {
  margin-block-end: 0.4rem !important;
  color: var(--featured-tools-ink);
  font-size: 0.69rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.featured-tools__identity {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.featured-tools__identity h2 {
  min-inline-size: 0;
  color: var(--color-brand-navy);
  font-size: clamp(2rem, 3.1vw, 2.75rem);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -0.045em;
}

.featured-tools__logo {
  display: inline-grid;
  flex: 0 0 2.75rem;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0.5rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 0.625rem;
  place-items: center;
}

.featured-tools__logo img {
  display: block;
  max-inline-size: 100%;
  max-block-size: 100%;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.featured-tools__description {
  margin-block: 0.55rem 0.65rem !important;
  color: #343951;
  font-size: 1rem;
  line-height: 1.48;
}

.featured-tools__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-block-size: 1.8rem;
  gap: 0.4rem 0.6rem;
  font-size: 0.8rem;
  line-height: 1.4;
}

.featured-tools__score {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.65rem;
  color: var(--featured-tools-ink);
  background: var(--featured-tools-surface);
  border-radius: var(--radius-pill);
}

.featured-tools__score svg {
  inline-size: 0.8rem;
  block-size: 0.8rem;
  fill: currentcolor;
}

.featured-tools__free-plan {
  padding: 0.2rem 0.45rem;
  color: var(--color-status-neutral-text);
  background: var(--color-status-neutral-surface);
  border: 1px solid var(--color-status-neutral-border);
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 600;
}

.featured-tools__actions {
  display: flex;
  margin-block-start: 0.55rem;
  gap: 0.65rem;
}

.featured-tools__actions .button {
  min-inline-size: 7.5rem;
  min-block-size: 2.8rem;
  font-size: 0.82rem;
}

.featured-tools__disclosure {
  margin-block-start: 0.4rem !important;
  color: #555c71;
  font-size: 0.69rem;
  line-height: 1.35;
}

.featured-tools__media {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  block-size: clamp(17rem, 22vw, 19rem);
  gap: 0.65rem;
}

.featured-tools__media figure {
  min-inline-size: 0;
  min-block-size: 0;
  background: #fff;
  border: 1px solid
    color-mix(in srgb, var(--featured-tools-accent) 15%, #e8e9ee);
  border-radius: 0.65rem;
  box-shadow: 0 0.65rem 1.8rem rgb(24 27 82 / 9%);
}

.featured-tools__media figure:first-child {
  grid-row: 1 / -1;
}

.featured-tools__media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.featured-tools__media--1 {
  grid-template-columns: minmax(0, 1fr);
}

.featured-tools__media--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
}

.featured-tools__selectors {
  display: flex;
  min-inline-size: 0;
  padding: 0.2rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-block-start: 1px solid
    color-mix(in srgb, var(--featured-tools-accent) 14%, #e6e6ed);
  scrollbar-width: thin;
  scrollbar-color: #c9cad7 transparent;
}

.featured-tools__selector {
  display: flex;
  flex: 1 0 0;
  align-items: flex-start;
  min-inline-size: 0;
  min-block-size: 3.5rem;
  padding: 0.6rem 0.75rem 0.45rem;
  gap: 0.5rem;
  color: var(--color-text);
  text-decoration: none;
  border-block-end: 2px solid transparent;
}

.featured-tools__number {
  color: var(--featured-tools-ink);
  font-size: 0.68rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.featured-tools__selector strong {
  display: block;
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.4;
}

.featured-tools__selector small {
  display: block;
  margin-block-start: 0.2rem;
  font-size: 0.6rem;
  line-height: 1.4;
  color: #f2f2ff;
}

.featured-tools__selector[aria-current] {
  background: var(--featured-tools-surface);
  border-color: var(--featured-tools-accent);
}

.featured-tools__selector:hover {
  background: color-mix(in srgb, var(--featured-tools-surface) 65%, #fff);
}

.featured-tools__decoration {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: clip;
  border-radius: inherit;
  pointer-events: none;
}

.featured-tools .featured-tools__logo {
  border: 0;
  border-radius: 50%;
  box-shadow: 0 0.2rem 0.7rem rgb(24 27 82 / 8%);
}

.featured-tools .featured-tools__inner {
  padding-block: 1rem 2.65rem;
  min-block-size: var(--featured-tools-height);
}

.featured-tools .featured-tools__topbar h1 {
  gap: 0.8rem;
  color: #fff8ec;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.featured-tools__heading {
  display: grid;
  position: relative;
  gap: 0.16rem;
}

.featured-tools__heading small {
  color: #f3c98e;
  font-size: 0.54rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.featured-tools__heading > span {
  line-height: 1.08;
}

.featured-tools .featured-tools__category {
  color: color-mix(in srgb, var(--featured-tools-accent) 28%, #fff);
}

.featured-tools .featured-tools__identity h2 {
  font-weight: 600;
  letter-spacing: -0.035em;
  color: #fff;
}

.featured-tools .featured-tools__description {
  color: #e5eaf7;
}

.featured-tools .featured-tools__facts,
.featured-tools .featured-tools__price {
  color: #e1e7f5;
}

.featured-tools .featured-tools__disclosure {
  color: #d0d8ed;
}

.featured-tools .featured-tools__controls [data-featured-position] {
  color: #e2d7c2;
}

.featured-tools .featured-tools__controls button {
  color: #fff3d9;
  background: rgb(255 255 255 / 7%);
  border-color: rgb(255 228 184 / 32%);
}

.featured-tools .featured-tools__controls button:hover {
  color: #172044;
  background: #fff4de;
  border-color: #fff4de;
}

.featured-tools .featured-tools__media figure {
  border-radius: 0.4rem;
  border-block-start: 1px solid rgb(232 225 255 / 50%);
  background: #fff;
  box-shadow: 0 0.8rem 2rem rgb(2 7 27 / 24%);
}

.featured-tools .featured-tools__selectors {
  padding-block-start: 0.5rem;
  gap: 0.35rem;
  border: 0;
}

.featured-tools .featured-tools__selector {
  border: 1px solid #e4e6ed;
  border-radius: 0.5rem;

  --ft-surface-accent: color-mix(
    in srgb,
    var(--featured-tools-accent) 52%,
    #fff
  );

  color: #f4f5ff;
  background: linear-gradient(135deg, #5a507bba, #233955c9);
  border-color: #c5cced61;
  box-shadow:
    inset 0 1px 0 #ffffff24,
    inset 0 -1px 0 #101c4026;
  backdrop-filter: blur(10px) saturate(120%);
}

.featured-tools .featured-tools__selector:hover {
  background: linear-gradient(135deg, #756995d9, #364c6ae0);
  border-color: #e6e5ff99;
}

.featured-tools .featured-tools__selector[aria-current] {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--ft-surface-accent) 33%, #293354),
    #303654ed
  );
  border-color: var(--ft-surface-accent);
  box-shadow:
    inset 0 3px 0 var(--ft-surface-accent),
    inset 0 0 1rem #ffffff0c;
}

.featured-tools :is(a, button):focus-visible {
  outline: 3px solid var(--color-brand-blue);
  outline-offset: 3px;
  outline-color: #ffd28c;
}

.featured-tools .featured-tools__selector:focus-visible {
  outline-offset: -3px;
  outline-color: #f5ddb1;
}

.featured-tools {
  --featured-tools-original-height: calc(
    clamp(23.5rem, 26.5vw, 24rem) + 7.4rem
  );
  --featured-tools-accent: var(--color-ai);
  --featured-tools-ink: var(--color-ai-contrast);
  --featured-tools-surface: var(--color-ai-surface);

  position: relative;
  isolation: isolate;
  border-block: 1px solid #e5e7ee;
  color: #f5f6ff;
  border: 0;

  --featured-tools-height: calc(var(--featured-tools-original-height) * 1.04);
  --featured-tools-gold: #f6c574;
  --featured-tools-gold-star: #ffbf5c;
  --featured-tools-gold-soft: #efba70;
  --featured-tools-gold-edge: #e6ac59;

  background:
    radial-gradient(ellipse at 16% 0%, #3a3068, transparent 58%),
    linear-gradient(115deg, #121b43, #24245d 58%, #302168);
}

.featured-tools[data-featured-tool="elevenlabs"] {
  --featured-tools-art: url("../images/homepage-card-illustrations/elevenlabs.webp");
}

.featured-tools[data-featured-tool="novlr"] {
  --featured-tools-art: url("../images/homepage-card-illustrations/novlr.webp");
}

.featured-tools[data-featured-tool="kit-convertkit"] {
  --featured-tools-art: url("../images/homepage-card-illustrations/kit-convertkit.webp");
}

.featured-tools[data-featured-tool="1password"] {
  --featured-tools-art: url("../images/homepage-card-illustrations/1password.webp");
}

.featured-tools[data-featured-tool="mangools"] {
  --featured-tools-art: url("../images/homepage-card-illustrations/mangools.webp");
}

.featured-tools[data-featured-tool="pipedrive"] {
  --featured-tools-art: url("../images/homepage-card-illustrations/pipedrive.webp");
}

.featured-tools .featured-tools__decoration::after {
  position: absolute;
  inset: 0;
  content: "";
  background: var(--featured-tools-art) center / cover no-repeat;
  opacity: 0.58;
  mask-image: linear-gradient(
    90deg,
    transparent 7%,
    rgb(0 0 0 / 15%) 34%,
    #000 74%
  );
}

.featured-tools .featured-tools__decoration::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgb(14 21 51 / 45%), transparent 66%);
}

.featured-tools .featured-tools__content {
  position: relative;
  isolation: isolate;
}

.featured-tools .featured-tools__content::before {
  position: absolute;
  z-index: -1;
  inset: -0.3rem -0.4rem;
  pointer-events: none;
  content: "";
  background: rgb(12 19 48 / 52%);
  border-radius: 0.55rem;
  box-shadow: 0 0 0.75rem 0.3rem rgb(12 19 48 / 30%);
}

.featured-tools .featured-tools__controls {
  background: rgb(12 19 48 / 60%);
  border-radius: 999px;
  box-shadow: 0 0 0.65rem 0.2rem rgb(12 19 48 / 18%);
}

.featured-tools .featured-tools__mark {
  flex: 0 0 2.65rem;
  inline-size: 2.65rem;
  block-size: 2.65rem;
  border: 1px solid #d39a56;
  border-radius: 0.6rem;
  position: relative;
  overflow: hidden;
  color: var(--featured-tools-gold-star);
  border-color: var(--featured-tools-gold-edge);
  background:
    linear-gradient(
      145deg,
      rgb(255 239 206 / 17%),
      transparent 34%,
      rgb(255 210 147 / 5%) 64%,
      transparent
    ),
    linear-gradient(145deg, #70482d, #2d2b43 78%);
  box-shadow:
    inset 0 0 0 3px rgb(255 199 109 / 9%),
    0 0.2rem 0.8rem rgb(0 0 0 / 18%);
}

.featured-tools .featured-tools__mark::after {
  position: absolute;
  inset-block-start: 18%;
  inset-inline-end: 13%;
  inline-size: 0.45rem;
  block-size: 1px;
  pointer-events: none;
  content: "";
  background: linear-gradient(90deg, transparent, #fff1ce, transparent);
  transform: rotate(-38deg);
  opacity: 0.65;
}

.featured-tools .featured-tools__gold-defs {
  position: absolute;
  inline-size: 0;
  block-size: 0;
  pointer-events: none;
}

.featured-tools .featured-tools__mark svg {
  inline-size: 1.3rem;
  block-size: 1.3rem;
  stroke-width: 1.2;
  fill: url("#featured-tools-gold-star");
  stroke: #ffda98;
}

.featured-tools .featured-tools__heading > span {
  color: var(--featured-tools-gold);
}

.featured-tools .featured-tools__heading small {
  color: var(--featured-tools-gold-soft);
}

.featured-tools .featured-tools__heading::after {
  position: absolute;
  inset: auto 0 -0.28rem;
  block-size: 1px;
  content: "";
  background: linear-gradient(
    90deg,
    var(--featured-tools-gold-edge),
    #ffe8b8 35%,
    #c58c49 70%,
    transparent
  );
}

.featured-tools--tone-ai {
  --featured-tools-accent: var(--color-ai);
  --featured-tools-ink: var(--color-ai-contrast);
  --featured-tools-surface: var(--color-ai-surface);
}

.featured-tools--tone-writing {
  --featured-tools-accent: var(--color-writing);
  --featured-tools-ink: var(--color-writing-contrast);
  --featured-tools-surface: var(--color-writing-surface);
}

.featured-tools--tone-marketing {
  --featured-tools-accent: var(--color-marketing);
  --featured-tools-ink: var(--color-marketing-contrast);
  --featured-tools-surface: var(--color-marketing-surface);
}

.featured-tools--tone-productivity {
  --featured-tools-accent: var(--color-productivity);
  --featured-tools-ink: var(--color-productivity-contrast);
  --featured-tools-surface: var(--color-productivity-surface);
}

.featured-tools--tone-seo {
  --featured-tools-accent: var(--color-seo);
  --featured-tools-ink: var(--color-seo-contrast);
  --featured-tools-surface: var(--color-seo-surface);
}

.featured-tools--tone-crm {
  --featured-tools-accent: var(--color-crm);
  --featured-tools-ink: var(--color-crm-contrast);
  --featured-tools-surface: var(--color-crm-surface);
}

.featured-tools__controls [data-featured-previous] svg {
  transform: rotate(180deg);
}

@media (width < 75rem) and (width >= 64rem) {
  .featured-tools__slide {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 1.25rem;
  }

  .featured-tools__identity h2 {
    font-size: 2rem;
  }

  .featured-tools__description {
    font-size: 0.95rem;
  }

  .featured-tools__media {
    block-size: 17rem;
  }
}

@media (width < 64rem) {
  .featured-tools {
    --featured-tools-original-height: clamp(
      669.825px,
      calc(445.9705px + 29.1477vw),
      695.55px
    );

    inline-size: calc(100% - (2 * var(--container-gutter)));
    margin-block-start: 1rem;
    margin-inline: auto;
    border-radius: var(--radius-panel);
  }

  .featured-tools__inner {
    inline-size: 100%;
    padding-block-end: 1rem;
    padding-inline: 1.25rem;
  }

  .featured-tools .featured-tools__inner {
    padding-block-end: 1.25rem;
  }

  .featured-tools__slide {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: 0.75rem;
  }

  .featured-tools__identity h2 {
    font-size: 2rem;
  }

  .featured-tools__media {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
    block-size: clamp(9rem, 26vw, 13.5rem);
  }

  .featured-tools__media figure:nth-child(n + 3) {
    display: none;
  }

  .featured-tools__media--1 {
    grid-template-columns: minmax(0, 1fr);
  }

  .featured-tools__selector {
    flex: 0 0 10.5rem;
  }
}

@media (width <= 48rem) {
  .featured-tools {
    --featured-tools-original-height: clamp(
      669.825px,
      calc(720.4558px - 6.5925vw),
      683.5375px
    );
  }
}

@media (width <= 35rem) {
  .featured-tools {
    --featured-tools-original-height: max(
      683.5375px,
      calc(889.3375px - 36.75vw)
    );
  }

  .featured-tools__inner {
    padding: 0.6rem 1rem 0.9rem;
    gap: 0.4rem;
  }

  .featured-tools .featured-tools__inner {
    padding-block: 0.85rem 1.15rem;
  }

  .featured-tools__topbar {
    gap: 0.25rem;
  }

  .featured-tools__topbar h1 {
    gap: 0.4rem;
    font-size: 1rem;
  }

  .featured-tools__controls {
    gap: 0.05rem;
  }

  .featured-tools__controls [data-featured-position] {
    min-inline-size: 1.9rem;
    font-size: 0.65rem;
  }

  .featured-tools__identity {
    gap: 0.55rem;
  }

  .featured-tools__identity h2 {
    font-size: 1.9rem;
    letter-spacing: -0.04em;
  }

  .featured-tools__logo {
    flex-basis: 2.4rem;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    padding: 0.4rem;
  }

  .featured-tools__description {
    margin-block: 0.45rem 0.55rem !important;
    font-size: 0.95rem;
    line-height: 1.48;
  }

  .featured-tools__category {
    font-size: 0.65rem;
  }

  .featured-tools__media {
    grid-template-columns: minmax(0, 1fr);
    block-size: clamp(9rem, 42vw, 10.5rem);
  }

  .featured-tools__media figure:nth-child(n + 2) {
    display: none;
  }

  .featured-tools__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .featured-tools__actions .button {
    min-inline-size: 0;
  }

  .featured-tools__selectors {
    margin-inline: -0.15rem;
  }

  .featured-tools__selector {
    flex-basis: 9.4rem;
    padding-inline: 0.5rem;
  }

  .featured-tools__selector small {
    font-size: 0.61rem;
  }
}

/* Rotation control reuses the original counter footprint. */
.featured-tools .featured-tools__controls .featured-tools__rotation {
  position: relative;
  order: 1;
  inline-size: 2.4rem;
  color: #e2d7c2;
  background: transparent;
  border: 0;
  border-radius: 0.4rem;
  line-height: 1.6;
}

.featured-tools .featured-tools__rotation:disabled {
  cursor: default;
  opacity: 1;
}

.featured-tools .featured-tools__controls .featured-tools__rotation:hover {
  color: #e2d7c2;
  background: rgb(255 255 255 / 7%);
  border: 0;
}

.featured-tools__controls [data-featured-previous] {
  order: 0;
}

.featured-tools__controls [data-featured-next] {
  order: 2;
}

.featured-tools .featured-tools__rotation svg {
  position: absolute;
  inset-block-end: 0.1rem;
  inset-inline-start: calc(50% - 0.25rem);
  inline-size: 0.5rem;
  block-size: 0.5rem;
  stroke-width: 1.5;
}

.featured-tools .featured-tools__rotation [data-featured-play-icon] {
  fill: currentcolor;
  stroke: none;
}

@media (width <= 35rem) {
  .featured-tools .featured-tools__controls .featured-tools__rotation {
    inline-size: 1.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .featured-tools *,
  .featured-tools *::before,
  .featured-tools *::after {
    scroll-behavior: auto;
    transition: none;
    animation: none;
  }
}

@supports (background-clip: text) {
  .featured-tools .featured-tools__heading > span,
  .featured-tools .featured-tools__heading small {
    color: transparent;
    background: linear-gradient(
      110deg,
      #edb46b,
      #f4cf91 28%,
      #fff0c9 39%,
      #efbb76 54%,
      #f9dc9e 74%,
      #eab166
    );
    background-clip: text;
  }
}

@media (forced-colors: active) {
  .featured-tools .featured-tools__heading > span,
  .featured-tools .featured-tools__heading small {
    color: CanvasText;
    background: none;
  }

  .featured-tools .featured-tools__mark svg {
    fill: CanvasText;
  }
}

@media (width <= 35rem) {
  .featured-tools .featured-tools__topbar h1 {
    gap: 0.5rem;
    font-size: 1.03rem;
    letter-spacing: -0.035em;
  }

  .featured-tools .featured-tools__heading {
    gap: 0.12rem;
  }

  .featured-tools__heading small {
    font-size: 0.45rem;
    letter-spacing: 0.11em;
  }

  .featured-tools .featured-tools__mark {
    flex-basis: 2rem;
    inline-size: 2rem;
    block-size: 2rem;
  }

  .featured-tools .featured-tools__mark svg {
    inline-size: 1.05rem;
    block-size: 1.05rem;
  }

  .featured-tools .featured-tools__decoration::after {
    background-position: 60% center;
    opacity: 0.38;
    mask-image: linear-gradient(180deg, rgb(0 0 0 / 15%), #000 80%);
  }
}

.featured-tools__selector .featured-tools__number {
  color: #f2f2ff;
}