.webbe-popular-tools {
  --wpt-accent: #316dff;
  --wpt-accent-soft: #eaf1ff;
  --wpt-surface: #ffffff;
  --wpt-page: #f7f9fd;
  --wpt-text: #111c35;
  --wpt-muted: #5e6a80;
  --wpt-border: rgba(26, 43, 75, .14);
  box-sizing: border-box;
  width: min(1180px, calc(100% - 28px));
  margin: clamp(28px, 5vw, 56px) auto;
  padding: clamp(18px, 2.8vw, 30px);
  border: 1px solid var(--wpt-border);
  border-radius: 24px;
  background: linear-gradient(145deg, #fff 0%, #f5f8ff 100%);
  box-shadow: 0 18px 50px rgba(25, 48, 92, .11);
  color: var(--wpt-text);
  min-height: 410px;
  font-family: inherit;
  overflow: hidden;
  isolation: isolate;
}
.webbe-popular-tools *, .webbe-popular-tools *::before, .webbe-popular-tools *::after { box-sizing: border-box; }
.webbe-tools-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.webbe-tools-heading-copy { min-width: 0; }
.webbe-tools-eyebrow { display: block; margin-bottom: 4px; color: #376bd6; font-size: .72rem; font-weight: 850; letter-spacing: .13em; line-height: 1.3; text-transform: uppercase; }
.webbe-tools-title { margin: 0; color: var(--wpt-text); font: inherit; font-size: clamp(1.45rem, 2.6vw, 2rem); font-weight: 900; line-height: 1.08; }
.webbe-tools-subtitle { margin: 6px 0 0; color: var(--wpt-muted); font-size: clamp(.82rem, 1.2vw, .96rem); line-height: 1.45; }
.webbe-tools-explore { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 15px; border: 1px solid rgba(49, 109, 255, .28); border-radius: 999px; color: #145ce6; background: #fff; font-size: .88rem; font-weight: 850; text-decoration: none; white-space: nowrap; transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease; }
.webbe-tools-explore:hover { transform: translateY(-1px); border-color: #316dff; box-shadow: 0 8px 22px rgba(49, 109, 255, .15); }
.webbe-tools-body { display: grid; gap: 14px; }
.webbe-feature-wrap { min-width: 0; }
.webbe-feature { --tool-accent: #316dff; display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(140px, 240px); align-items: center; gap: clamp(14px, 2vw, 28px); min-height: 210px; padding: clamp(20px, 3vw, 34px); border: 1px solid rgba(255,255,255,.18); border-radius: 21px; background: radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--tool-accent) 33%, transparent), transparent 36%), linear-gradient(135deg, #071631 0%, #0b2552 58%, #06152e 100%); box-shadow: 0 18px 38px rgba(7, 22, 49, .24), inset 0 0 0 1px rgba(255,255,255,.05); color: #fff; text-decoration: none; overflow: hidden; position: relative; transition: transform 160ms ease, box-shadow 160ms ease; }
.webbe-feature:hover { transform: translateY(-2px); box-shadow: 0 24px 48px rgba(7, 22, 49, .3), 0 0 0 2px color-mix(in srgb, var(--tool-accent) 75%, white); }
.webbe-feature--blue, .webbe-tool-card--blue { --tool-accent: #3478ff; --tool-soft: #eaf2ff; }
.webbe-feature--green, .webbe-tool-card--green { --tool-accent: #24a564; --tool-soft: #e8f8ef; }
.webbe-feature--orange, .webbe-tool-card--orange { --tool-accent: #f28b22; --tool-soft: #fff1e2; }
.webbe-feature--purple, .webbe-tool-card--purple { --tool-accent: #8b5cf6; --tool-soft: #f1ebff; }
.webbe-feature--cyan, .webbe-tool-card--cyan { --tool-accent: #079bbd; --tool-soft: #e5f8fc; }
.webbe-feature--indigo, .webbe-tool-card--indigo { --tool-accent: #4f5fe7; --tool-soft: #eceeff; }
.webbe-feature-rank { color: color-mix(in srgb, var(--tool-accent) 72%, white); font-size: clamp(2.7rem, 6vw, 5.2rem); font-weight: 950; line-height: .85; letter-spacing: -.08em; text-shadow: 0 0 30px color-mix(in srgb, var(--tool-accent) 50%, transparent); }
.webbe-feature-copy { display: grid; align-content: center; gap: 7px; min-width: 0; }
.webbe-feature-label { width: fit-content; padding: 4px 9px; border: 1px solid color-mix(in srgb, var(--tool-accent) 70%, white); border-radius: 999px; color: #dce8ff; background: color-mix(in srgb, var(--tool-accent) 28%, transparent); font-size: .66rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.webbe-feature-name { color: #fff; font-size: clamp(1.35rem, 2.5vw, 2.15rem); font-weight: 900; line-height: 1.08; }
.webbe-feature-description { max-width: 42ch; color: #d8e2f5; font-size: clamp(.85rem, 1.2vw, 1rem); line-height: 1.5; }
.webbe-feature-cta { width: fit-content; margin-top: 5px; padding: 9px 13px; border-radius: 10px; background: var(--tool-accent); color: #fff; font-size: .82rem; font-weight: 900; box-shadow: 0 8px 24px color-mix(in srgb, var(--tool-accent) 38%, transparent); }
.webbe-feature-controls { display: flex; align-items: center; justify-content: center; gap: 10px; padding-top: 10px; }
.webbe-feature-control, .webbe-feature-dot { border: 0; cursor: pointer; font: inherit; }
.webbe-feature-control { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--wpt-border); border-radius: 50%; background: #fff; color: #24405f; font-weight: 900; }
.webbe-feature-dots { display: flex; align-items: center; gap: 7px; }
.webbe-feature-dot { width: 8px; height: 8px; padding: 0; border-radius: 50%; background: #b8c2d2; transition: width 140ms ease, background 140ms ease; }
.webbe-feature-dot[aria-current="true"] { width: 24px; border-radius: 999px; background: #316dff; }
.webbe-tools-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.webbe-tool-card { --tool-accent: #316dff; --tool-soft: #eaf2ff; display: grid; grid-template-columns: 36px 70px minmax(0, 1fr) 24px; align-items: center; gap: 11px; min-height: 112px; padding: 12px; border: 1px solid var(--wpt-border); border-radius: 17px; background: linear-gradient(145deg, #fff 0%, var(--tool-soft) 160%); color: var(--wpt-text); text-decoration: none; box-shadow: 0 7px 19px rgba(28, 48, 83, .07); transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease; overflow: hidden; }
.webbe-tool-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--tool-accent) 56%, var(--wpt-border)); box-shadow: 0 14px 28px rgba(28, 48, 83, .13); }
.webbe-tool-rank { align-self: start; color: var(--tool-accent); font-size: .76rem; font-weight: 950; }
.webbe-tool-copy, .webbe-tool-name-row, .webbe-tool-name, .webbe-tool-description { min-width: 0; }
.webbe-tool-copy { display: grid; gap: 5px; }
.webbe-tool-name-row { display: flex; align-items: center; gap: 7px; }
.webbe-tool-name { overflow: hidden; font-size: .96rem; font-weight: 900; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.webbe-tool-new { flex: none; padding: 2px 6px; border-radius: 999px; background: var(--tool-soft); color: var(--tool-accent); font-size: .58rem; font-weight: 900; line-height: 1.35; text-transform: uppercase; }
.webbe-tool-description { display: -webkit-box; overflow: hidden; color: var(--wpt-muted); font-size: .75rem; line-height: 1.38; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.webbe-tool-arrow { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--tool-soft); color: var(--tool-accent); font-weight: 900; }
.webbe-tool-visual { display: grid; place-items: center; width: 100%; min-width: 0; }
.webbe-tool-visual svg { display: block; width: 100%; height: auto; max-height: 140px; overflow: visible; }
.webbe-tool-visual.is-compact svg { max-height: 68px; }
.webbe-tool-visual--blue { color: #3478ff; }.webbe-tool-visual--green { color: #24a564; }.webbe-tool-visual--orange { color: #f28b22; }.webbe-tool-visual--purple { color: #8b5cf6; }.webbe-tool-visual--cyan { color: #079bbd; }.webbe-tool-visual--indigo { color: #4f5fe7; }
.webbe-tool-visual .v-paper, .webbe-tool-visual .v-panel, .webbe-tool-visual .v-phone { fill: #fff; stroke: currentColor; stroke-width: 2; }
.webbe-tool-visual .v-image, .webbe-tool-visual .v-screen, .webbe-tool-visual .v-accent, .webbe-tool-visual .v-overlap { fill: color-mix(in srgb, currentColor 28%, white); }
.webbe-tool-visual .v-line, .webbe-tool-visual .v-ruler, .webbe-tool-visual .v-accent-line, .webbe-tool-visual .v-axis, .webbe-tool-visual .v-chart, .webbe-tool-visual .v-shot-lines, .webbe-tool-visual .v-merge-line { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.webbe-tool-visual .v-ruler, .webbe-tool-visual .v-axis, .webbe-tool-visual .v-shot-lines { stroke-width: 2; opacity: .72; }
.webbe-tool-visual .v-key { fill: currentColor; opacity: .55; }
.webbe-tool-visual .v-coin { fill: #ffd665; stroke: #e7a813; stroke-width: 2; }.webbe-tool-visual .v-coin-2 { fill: #ffbf2f; }
.webbe-tool-visual .v-calendar-a { fill: #fff3e6; stroke: #f28b22; stroke-width: 2; }.webbe-tool-visual .v-calendar-b { fill: #edf8ff; stroke: #3478ff; stroke-width: 2; }.webbe-tool-visual .v-calendar-head-a { fill: #f28b22; }.webbe-tool-visual .v-calendar-head-b { fill: #3478ff; }.webbe-tool-visual .v-day { fill: #f2a95d; }.webbe-tool-visual .v-day-b { fill: #78a6ff; }.webbe-tool-visual .v-overlap { fill: #7bd697; opacity: .9; }
.webbe-tool-visual .v-puzzle-base { fill: #a78bfa; }.webbe-tool-visual .v-puzzle-left { fill: #61a6ff; }.webbe-tool-visual .v-puzzle-right { fill: #f5b74d; }.webbe-tool-visual .v-spark { fill: #f38bc3; opacity: .7; }
.webbe-tool-visual .v-phone-a { fill: #e9f6ff; }.webbe-tool-visual .v-phone-b { fill: #fff; }.webbe-tool-visual .v-phone-c { fill: #e8fbf7; }
.webbe-tools-fallback { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 16px; }
.webbe-tools-fallback strong { font-size: 1rem; }
.webbe-popular-tools[data-webbe-state="ready"] > .webbe-tools-fallback { display: none; }
.webbe-popular-tools[data-webbe-state="fallback"] { min-height: 108px; }
.webbe-popular-tools[data-webbe-variant="rail"] .webbe-tools-body { grid-template-columns: minmax(0, 1.35fr) minmax(300px, .8fr); align-items: stretch; }
.webbe-popular-tools[data-webbe-variant="rail"] .webbe-tools-grid { grid-template-columns: 1fr; }
.webbe-popular-tools[data-webbe-variant="rail"] .webbe-tool-card { min-height: 86px; grid-template-columns: 30px 62px minmax(0, 1fr) 24px; }
.webbe-popular-tools[data-webbe-variant="ticker"] { min-height: 330px; }
.webbe-popular-tools[data-webbe-variant="ticker"] .webbe-feature { min-height: 128px; grid-template-columns: 58px minmax(0, 1fr) 160px; padding: 18px 24px; }
.webbe-popular-tools[data-webbe-variant="ticker"] .webbe-feature-rank { font-size: clamp(2.3rem, 4vw, 3.7rem); }
.webbe-popular-tools[data-webbe-variant="ticker"] .webbe-feature-name { font-size: clamp(1.15rem, 2vw, 1.6rem); }
.webbe-popular-tools[data-webbe-variant="ticker"] .webbe-feature-description { max-width: 52ch; }
.webbe-popular-tools[data-webbe-variant="ticker"] .webbe-tool-visual svg { max-height: 94px; }
.webbe-popular-tools[data-webbe-variant="ticker"] .webbe-tools-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.webbe-popular-tools[data-webbe-variant="ticker"] .webbe-tool-card { grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: 66px auto; align-items: start; min-height: 180px; padding: 13px; }
.webbe-popular-tools[data-webbe-variant="ticker"] .webbe-tool-card .webbe-tool-visual { grid-column: 1 / -1; grid-row: 1; }
.webbe-popular-tools[data-webbe-variant="ticker"] .webbe-tool-card .webbe-tool-copy { grid-column: 1 / -1; grid-row: 2; }
.webbe-popular-tools[data-webbe-variant="ticker"] .webbe-tool-card .webbe-tool-arrow { position: absolute; opacity: 0; }
.webbe-tools-explore--bottom { display: none; margin: 14px auto 0; width: fit-content; }
.webbe-popular-tools[data-webbe-variant="ticker"] .webbe-tools-explore--bottom { display: inline-flex; }
.webbe-feature:focus-visible, .webbe-tool-card:focus-visible, .webbe-tools-explore:focus-visible, .webbe-feature-control:focus-visible, .webbe-feature-dot:focus-visible { outline: 3px solid #4f8bff; outline-offset: 3px; }
@media (max-width: 980px) {
  .webbe-popular-tools[data-webbe-variant="rail"] .webbe-tools-body { grid-template-columns: 1fr; }
  .webbe-tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .webbe-popular-tools[data-webbe-variant="ticker"] .webbe-tools-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .webbe-popular-tools[data-webbe-variant="ticker"] .webbe-tool-card:nth-child(n+4) { display: none; }
}
@media (max-width: 640px) {
  .webbe-popular-tools { width: min(100% - 18px, 1180px); margin: 28px auto; padding: 16px; min-height: 520px; border-radius: 19px; }
  .webbe-tools-heading { align-items: start; }
  .webbe-tools-subtitle { max-width: 28ch; }
  .webbe-tools-heading > .webbe-tools-explore { display: none; }
  .webbe-feature { grid-template-columns: 46px minmax(0, 1fr); min-height: 235px; padding: 18px; }
  .webbe-feature > .webbe-tool-visual { grid-column: 1 / -1; grid-row: 1; max-width: 180px; justify-self: center; }
  .webbe-feature-rank { grid-column: 1; grid-row: 2; font-size: 2.4rem; }
  .webbe-feature-copy { grid-column: 2; grid-row: 2; }
  .webbe-feature-description { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; font-size: .8rem; }
  .webbe-feature-cta { padding: 8px 10px; font-size: .76rem; }
  .webbe-tools-grid, .webbe-popular-tools[data-webbe-variant="ticker"] .webbe-tools-grid { grid-template-columns: 1fr; }
  .webbe-tool-card, .webbe-popular-tools[data-webbe-variant="ticker"] .webbe-tool-card { display: grid; grid-template-columns: 30px 62px minmax(0, 1fr) 24px; grid-template-rows: auto; min-height: 86px; }
  .webbe-popular-tools[data-webbe-variant="ticker"] .webbe-tool-card .webbe-tool-visual, .webbe-popular-tools[data-webbe-variant="ticker"] .webbe-tool-card .webbe-tool-copy { grid-column: auto; grid-row: auto; }
  .webbe-popular-tools[data-webbe-variant="ticker"] .webbe-tool-card .webbe-tool-arrow { position: static; opacity: 1; }
  .webbe-tool-card:nth-child(n+4) { display: none !important; }
  .webbe-tools-explore--bottom { display: inline-flex; }
  .webbe-popular-tools[data-webbe-state="fallback"] { min-height: 96px; }
}
@media (prefers-reduced-motion: reduce) { .webbe-feature, .webbe-tool-card, .webbe-tools-explore, .webbe-feature-dot { transition: none; } }
@media (forced-colors: active) { .webbe-popular-tools, .webbe-feature, .webbe-tool-card { border: 1px solid CanvasText; } }