.elementor-238 .elementor-element.elementor-element-f2635f9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-238 .elementor-element.elementor-element-7fabb2e{--display:flex;}.elementor-238 .elementor-element.elementor-element-e59a52f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-238 .elementor-element.elementor-element-7099870{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-238 .elementor-element.elementor-element-f5b0a7c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-238 .elementor-element.elementor-element-3544558{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-238 .elementor-element.elementor-element-e740f18{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-238 .elementor-element.elementor-element-26bdd4b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-238 .elementor-element.elementor-element-584f6fc{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-238 .elementor-element.elementor-element-f75a900{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-238 .elementor-element.elementor-element-64a7058{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-238 .elementor-element.elementor-element-6b0cfb9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-238 .elementor-element.elementor-element-f49cf38{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-238 .elementor-element.elementor-element-2ac80bd{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-238 .elementor-element.elementor-element-05e08f1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-238 .elementor-element.elementor-element-016e429{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-238 .elementor-element.elementor-element-057f44c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-223c2de */:root {
  --ink: #05302e;
  --ink-muted: rgba(5, 48, 46, 0.6);
  --ink-soft: rgba(5, 48, 46, 0.9);
  --border: #d7e0df;
  --track: #edf1f0;
  --new-fill: #237583;
  --repeat-fill: #c8d6d1;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: #f5f7f6;
  color: var(--ink);
  font-family: "Work Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.page-shell {
  width: 100%;
}

.search-card {
  width: 100%;
  min-height: 230px;
  padding: 36px 44px 42px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 26px;
}

.search-card__header h1 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

.search-card__header p {
  margin: 5px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
}

.search-card__rows {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.stat-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) 74px;
  align-items: center;
  column-gap: 16px;
  min-height: 38px;
}

.stat-row__label {
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
}

.stat-row__track {
  width: 100%;
  height: 22px;
  overflow: hidden;
  background: var(--track);
  border-radius: 999px;
}

.stat-row__fill {
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
}

.stat-row__fill--new {
  background: var(--new-fill);
}

.stat-row__fill--repeat {
  background: var(--repeat-fill);
}

.stat-row__value {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-align: right;
}

@media (max-width: 700px) {
  .search-card {
    padding: 28px 24px 32px;
    border-radius: 22px;
  }

  .search-card__rows {
    gap: 18px;
  }

  .stat-row {
    grid-template-columns: 1fr auto;
    row-gap: 8px;
  }

  .stat-row__label {
    grid-column: 1;
  }

  .stat-row__value {
    grid-column: 2;
    grid-row: 1;
  }

  .stat-row__track {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2b9269f */.google-visits-diagram,
.google-visits-diagram * {
  box-sizing: border-box;
}

.google-visits-diagram {
  --diagram-background: #ffffff;
  --diagram-border: #d7e0df;
  --diagram-text: #05302e;
  --diagram-muted: rgba(5, 48, 46, 0.65);
  --diagram-accent: #237583;
  --diagram-growth: #00c0a0;

  width: 100%;
  max-width: 1140px;
  min-height: 208px;
  margin: 0 auto;
  padding: 29px 35px;
  overflow: hidden;

  font-family: "Work Sans", Arial, sans-serif;
  color: var(--diagram-text);
  background: var(--diagram-background);
  border: 1px solid var(--diagram-border);
  border-radius: 26px;

  opacity: 0;
  transform: translateY(18px);
  animation: google-visits-reveal 0.7s ease forwards;
}

.google-visits-diagram__eyebrow {
  margin-bottom: 6px;
  color: var(--diagram-accent);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.google-visits-diagram__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px auto auto;
  align-items: center;
  gap: 38px;
  min-height: 125px;
}

.google-visits-diagram__primary {
  min-width: 0;
}

.google-visits-diagram__main-number {
  display: block;
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -4px;
  animation: google-visits-number 0.9s ease both 0.15s;
}

.google-visits-diagram__description {
  display: block;
  margin-top: 14px;
  color: var(--diagram-muted);
  font-size: 14px;
  line-height: 1.5;
}

.google-visits-diagram__divider {
  width: 1px;
  height: 108px;
  background: var(--diagram-border);
}

.google-visits-diagram__stat {
  min-width: 118px;
}

.google-visits-diagram__stat strong {
  display: block;
  margin-bottom: 7px;
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.6px;
}

.google-visits-diagram__stat span {
  display: block;
  color: var(--diagram-muted);
  font-size: 13px;
  line-height: 1.4;
}

.google-visits-diagram__growth strong {
  color: var(--diagram-growth);
}

@keyframes google-visits-reveal {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes google-visits-number {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .google-visits-diagram {
    padding: 28px;
  }

  .google-visits-diagram__content {
    gap: 24px;
  }

  .google-visits-diagram__main-number {
    font-size: 60px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .google-visits-diagram {
    min-height: auto;
    padding: 24px 20px;
    border-radius: 20px;
  }

  .google-visits-diagram__content {
    grid-template-columns: 1fr 1fr;
    gap: 24px 16px;
  }

  .google-visits-diagram__primary {
    grid-column: 1 / -1;
  }

  .google-visits-diagram__divider {
    display: none;
  }

  .google-visits-diagram__main-number {
    font-size: 52px;
    letter-spacing: -3px;
  }

  .google-visits-diagram__description {
    max-width: 100%;
    font-size: 13px;
  }

  .google-visits-diagram__stat {
    min-width: 0;
  }

  .google-visits-diagram__stat strong {
    font-size: 24px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-04a2144 */.google-market-chart,
.google-market-chart * {
  box-sizing: border-box;
}

.google-market-chart {
  /* Desktop options */
  --market-card-width: 1140px;
  --market-card-padding-x: 48px;
  --market-card-padding-y: 40px;
  --market-chart-height: 352px;
  --market-card-radius: 26px;
  --market-title-size: 20px;
  --market-subtitle-size: 13px;
  --market-line-width: 3px;
  --market-dot-size: 6px;

  --market-background: #ffffff;
  --market-border: #d7e0df;
  --market-text: #05302e;
  --market-muted: rgba(5, 48, 46, 0.6);
  --market-grid: #e7eeee;
  --market-line: #237583;
  --market-accent: #00c0a0;

  width: 100%;
  max-width: var(--market-card-width);
  margin: 0 auto;
  padding: var(--market-card-padding-y) var(--market-card-padding-x);
  overflow: hidden;

  font-family: "Work Sans", Arial, sans-serif;
  color: var(--market-text);
  background: var(--market-background);
  border: 1px solid var(--market-border);
  border-radius: var(--market-card-radius);

  opacity: 0;
  transform: translateY(18px);
  animation: google-market-card-reveal 0.7s ease forwards;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.google-market-chart:hover {
  border-color: var(--market-accent);
  box-shadow: 0 14px 17px rgba(5, 48, 46, 0.12);
  transform: translateY(-2px);
}

.google-market-chart__header h3 {
  margin: 0;
  color: var(--market-text);
  font-size: var(--market-title-size);
  font-weight: 600;
  line-height: 1.25;
}

.google-market-chart__header p {
  margin: 6px 0 0;
  color: var(--market-muted);
  font-size: var(--market-subtitle-size);
  line-height: 1.45;
}

.google-market-chart__scroll {
  width: 100%;
  margin-top: 24px;
}

.google-market-chart__svg {
  display: block;
  width: 100%;
  height: var(--market-chart-height);
  overflow: visible;
}

.google-market-chart__grid line {
  stroke: var(--market-grid);
  stroke-width: 1;
}

.google-market-chart__axis {
  fill: rgba(5, 48, 46, 0.52);
  font-family: "Work Sans", Arial, sans-serif;
  font-size: 11px;
  font-weight: 500;
}

.google-market-chart__area {
  fill: url("#google-market-area-gradient");
  opacity: 0;
  animation: google-market-area-reveal 0.7s ease forwards 0.85s;
}

.google-market-chart__line {
  fill: none;
  stroke: var(--market-line);
  stroke-width: var(--market-line-width);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: google-market-line-draw 1.25s ease forwards 0.2s;
}

.google-market-chart__point circle {
  fill: #ffffff;
  stroke: var(--market-line);
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  animation: google-market-point-show 0.35s ease forwards;
  transition:
    fill 0.2s ease,
    transform 0.2s ease;
}

.google-market-chart__point:nth-of-type(1) circle {
  animation-delay: 0.42s;
}

.google-market-chart__point:nth-of-type(2) circle {
  animation-delay: 0.48s;
}

.google-market-chart__point:nth-of-type(3) circle {
  animation-delay: 0.54s;
}

.google-market-chart__point:nth-of-type(4) circle {
  animation-delay: 0.6s;
}

.google-market-chart__point:nth-of-type(5) circle {
  animation-delay: 0.66s;
}

.google-market-chart__point:nth-of-type(6) circle {
  animation-delay: 0.72s;
}

.google-market-chart__point:nth-of-type(7) circle {
  animation-delay: 0.78s;
}

.google-market-chart__point:nth-of-type(8) circle {
  animation-delay: 0.84s;
}

.google-market-chart__point:nth-of-type(9) circle {
  animation-delay: 0.9s;
}

.google-market-chart__point:nth-of-type(10) circle {
  animation-delay: 0.96s;
}

.google-market-chart__point:nth-of-type(11) circle {
  animation-delay: 1.02s;
}

.google-market-chart__point:hover circle {
  fill: var(--market-accent);
  transform: scale(1.45);
}

.google-market-chart__tooltip {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.google-market-chart__tooltip rect {
  fill: var(--market-text);
}

.google-market-chart__tooltip text {
  fill: #ffffff;
  font-family: "Work Sans", Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
}

.google-market-chart__point:hover .google-market-chart__tooltip {
  opacity: 1;
}

@keyframes google-market-card-reveal {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes google-market-line-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes google-market-area-reveal {
  to {
    opacity: 1;
  }
}

@keyframes google-market-point-show {
  to {
    transform: scale(1);
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .google-market-chart {
    --market-card-padding-x: 30px;
    --market-card-padding-y: 32px;
    --market-chart-height: 320px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .google-market-chart {
    --market-card-padding-x: 20px;
    --market-card-padding-y: 26px;
    --market-card-radius: 20px;
    --market-title-size: 18px;
    --market-subtitle-size: 12px;
    --market-chart-height: 280px;
  }

  .google-market-chart:hover {
    transform: none;
  }

  .google-market-chart__scroll {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }

  .google-market-chart__svg {
    width: 690px;
    min-width: 690px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .google-market-chart,
  .google-market-chart__area,
  .google-market-chart__line,
  .google-market-chart__point circle {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
  }

  .google-market-chart {
    opacity: 1;
    transform: none;
  }

  .google-market-chart__area {
    opacity: 1;
  }

  .google-market-chart__line {
    stroke-dashoffset: 0;
  }

  .google-market-chart__point circle {
    transform: scale(1);
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9bc4edf */.google-timeframe-chart,
.google-timeframe-chart * {
  box-sizing: border-box;
}

.google-timeframe-chart {
  /* Desktop options */
  --timeframe-card-width: 1140px;
  --timeframe-card-padding-x: 48px;
  --timeframe-card-padding-y: 40px;
  --timeframe-card-radius: 26px;

  --timeframe-title-size: 20px;
  --timeframe-subtitle-size: 13px;
  --timeframe-label-size: 14px;
  --timeframe-value-size: 15px;

  --timeframe-label-width: 175px;
  --timeframe-value-width: 98px;
  --timeframe-bar-height: 24px;
  --timeframe-row-height: 44px;
  --timeframe-row-gap: 16px;
  --timeframe-column-gap: 15px;

  --timeframe-background: #ffffff;
  --timeframe-border: #d7e0df;
  --timeframe-text: #05302e;
  --timeframe-muted: rgba(5, 48, 46, 0.6);
  --timeframe-track: #edf1f0;
  --timeframe-hover: #00c0a0;

  width: 100%;
  max-width: var(--timeframe-card-width);
  margin: 0 auto;
  padding: var(--timeframe-card-padding-y)
    var(--timeframe-card-padding-x);

  overflow: hidden;
  font-family: "Work Sans", Arial, sans-serif;
  color: var(--timeframe-text);
  background: var(--timeframe-background);
  border: 1px solid var(--timeframe-border);
  border-radius: var(--timeframe-card-radius);

  opacity: 0;
  transform: translateY(18px);
  animation: google-timeframe-card-reveal 0.7s ease forwards;

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.google-timeframe-chart:hover {
  border-color: var(--timeframe-hover);
  box-shadow: 0 14px 17px rgba(5, 48, 46, 0.12);
  transform: translateY(-2px);
}

.google-timeframe-chart__header h3 {
  margin: 0;
  color: var(--timeframe-text);
  font-size: var(--timeframe-title-size);
  font-weight: 600;
  line-height: 1.25;
}

.google-timeframe-chart__header p {
  margin: 6px 0 0;
  color: var(--timeframe-muted);
  font-size: var(--timeframe-subtitle-size);
  font-weight: 400;
  line-height: 1.45;
}

.google-timeframe-chart__rows {
  display: grid;
  gap: var(--timeframe-row-gap);
  margin-top: 24px;
}

.google-timeframe-chart__row {
  display: grid;
  grid-template-columns:
    var(--timeframe-label-width)
    minmax(0, 1fr)
    var(--timeframe-value-width);

  align-items: center;
  gap: var(--timeframe-column-gap);
  min-height: var(--timeframe-row-height);
}

.google-timeframe-chart__label {
  color: rgba(5, 48, 46, 0.9);
  font-size: var(--timeframe-label-size);
  font-weight: 500;
  line-height: 1.3;
}

.google-timeframe-chart__track {
  width: 100%;
  height: var(--timeframe-bar-height);
  overflow: hidden;
  background: var(--timeframe-track);
  border-radius: 999px;
}

.google-timeframe-chart__fill {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left center;
  animation: google-timeframe-bar-grow 1.2s
    cubic-bezier(0.2, 0.75, 0.2, 1) forwards;
}

.google-timeframe-chart__fill--second {
  width: 41.3%;
  background: #c8d6d1;
  animation-delay: 0.15s;
}

.google-timeframe-chart__fill--day {
  width: 79.9%;
  background: #8ab6b0;
  animation-delay: 0.25s;
}

.google-timeframe-chart__fill--month {
  width: 91.5%;
  background: #50c0b3;
  animation-delay: 0.35s;
}

.google-timeframe-chart__fill--year {
  width: 100%;
  background: #237583;
  animation-delay: 0.45s;
}

.google-timeframe-chart__value {
  color: var(--timeframe-text);
  font-size: var(--timeframe-value-size);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

@keyframes google-timeframe-card-reveal {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes google-timeframe-bar-grow {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .google-timeframe-chart {
    --timeframe-card-padding-x: 30px;
    --timeframe-card-padding-y: 32px;
    --timeframe-label-width: 145px;
    --timeframe-value-width: 80px;
    --timeframe-column-gap: 12px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .google-timeframe-chart {
    --timeframe-card-padding-x: 20px;
    --timeframe-card-padding-y: 26px;
    --timeframe-card-radius: 20px;

    --timeframe-title-size: 18px;
    --timeframe-subtitle-size: 12px;
    --timeframe-label-size: 14px;
    --timeframe-value-size: 14px;

    --timeframe-bar-height: 18px;
    --timeframe-row-height: auto;
    --timeframe-row-gap: 20px;
  }

  .google-timeframe-chart:hover {
    transform: none;
  }

  .google-timeframe-chart__row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px 12px;
  }

  .google-timeframe-chart__label {
    grid-column: 1;
    grid-row: 1;
  }

  .google-timeframe-chart__value {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
  }

  .google-timeframe-chart__track {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .google-timeframe-chart,
  .google-timeframe-chart__fill {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
  }

  .google-timeframe-chart {
    opacity: 1;
    transform: none;
  }

  .google-timeframe-chart__fill {
    transform: scaleX(1);
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4802678 */.google-query-chart,
.google-query-chart * {
  box-sizing: border-box;
}

.google-query-chart {
  /* Desktop options */
  --query-card-width: 1140px;
  --query-card-padding-x: 48px;
  --query-card-padding-y: 40px;
  --query-card-radius: 26px;

  --query-title-size: 20px;
  --query-subtitle-size: 13px;
  --query-label-size: 14px;
  --query-value-size: 14px;

  --query-label-width: 175px;
  --query-value-width: 86px;
  --query-bar-height: 22px;
  --query-row-height: 40px;
  --query-row-gap: 16px;
  --query-column-gap: 15px;

  --query-background: #ffffff;
  --query-border: #d7e0df;
  --query-text: #05302e;
  --query-muted: rgba(5, 48, 46, 0.6);
  --query-track: #edf1f0;
  --query-new: #237583;
  --query-repeat: #c8d6d1;
  --query-hover: #00c0a0;

  width: 100%;
  max-width: var(--query-card-width);
  margin: 0 auto;
  padding: var(--query-card-padding-y) var(--query-card-padding-x);
  overflow: hidden;

  font-family: "Work Sans", Arial, sans-serif;
  color: var(--query-text);
  background: var(--query-background);
  border: 1px solid var(--query-border);
  border-radius: var(--query-card-radius);

  opacity: 0;
  transform: translateY(18px);
  animation: google-query-card-reveal 0.7s ease forwards;

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.google-query-chart:hover {
  border-color: var(--query-hover);
  box-shadow: 0 14px 17px rgba(5, 48, 46, 0.12);
  transform: translateY(-2px);
}

.google-query-chart__header h3 {
  margin: 0;
  color: var(--query-text);
  font-size: var(--query-title-size);
  font-weight: 600;
  line-height: 1.25;
}

.google-query-chart__header p {
  margin: 6px 0 0;
  color: var(--query-muted);
  font-size: var(--query-subtitle-size);
  font-weight: 400;
  line-height: 1.45;
}

.google-query-chart__rows {
  display: grid;
  gap: var(--query-row-gap);
  margin-top: 24px;
}

.google-query-chart__row {
  display: grid;
  grid-template-columns:
    var(--query-label-width)
    minmax(0, 1fr)
    var(--query-value-width);

  align-items: center;
  gap: var(--query-column-gap);
  min-height: var(--query-row-height);
}

.google-query-chart__label {
  color: rgba(5, 48, 46, 0.9);
  font-size: var(--query-label-size);
  font-weight: 500;
  line-height: 1.3;
}

.google-query-chart__track {
  width: 100%;
  height: var(--query-bar-height);
  overflow: hidden;
  background: var(--query-track);
  border-radius: 999px;
}

.google-query-chart__fill {
  height: 100%;
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left center;
  animation: google-query-bar-grow 1.2s
    cubic-bezier(0.2, 0.75, 0.2, 1) forwards;
}

.google-query-chart__fill--new {
  width: 15%;
  background: var(--query-new);
  animation-delay: 0.15s;
}

.google-query-chart__fill--repeat {
  width: 85%;
  background: var(--query-repeat);
  animation-delay: 0.3s;
}

.google-query-chart__value {
  color: var(--query-text);
  font-size: var(--query-value-size);
  font-weight: 600;
  line-height: 1.3;
  text-align: right;
  white-space: nowrap;
}

@keyframes google-query-card-reveal {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes google-query-bar-grow {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .google-query-chart {
    --query-card-padding-x: 30px;
    --query-card-padding-y: 32px;
    --query-label-width: 145px;
    --query-value-width: 70px;
    --query-column-gap: 12px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .google-query-chart {
    --query-card-padding-x: 20px;
    --query-card-padding-y: 26px;
    --query-card-radius: 20px;

    --query-title-size: 18px;
    --query-subtitle-size: 12px;
    --query-label-size: 14px;
    --query-value-size: 14px;

    --query-bar-height: 18px;
    --query-row-height: auto;
    --query-row-gap: 20px;
  }

  .google-query-chart:hover {
    transform: none;
  }

  .google-query-chart__row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px 12px;
  }

  .google-query-chart__label {
    grid-column: 1;
    grid-row: 1;
  }

  .google-query-chart__value {
    grid-column: 2;
    grid-row: 1;
  }

  .google-query-chart__track {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .google-query-chart,
  .google-query-chart__fill {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
  }

  .google-query-chart {
    opacity: 1;
    transform: none;
  }

  .google-query-chart__fill {
    transform: scaleX(1);
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-5cfae44 */.google-zero-click-chart,
.google-zero-click-chart * {
  box-sizing: border-box;
}

.google-zero-click-chart {
  /* Desktop options */
  --zero-card-width: 1140px;
  --zero-card-padding-x: 48px;
  --zero-card-padding-y: 40px;
  --zero-card-radius: 26px;

  --zero-title-size: 20px;
  --zero-subtitle-size: 13px;
  --zero-label-size: 14px;
  --zero-percentage-size: 26px;

  --zero-ring-size: 156px;
  --zero-ring-width: 14px;
  --zero-grid-columns: 4;
  --zero-grid-gap: 28px;
  --zero-label-gap: 16px;

  --zero-background: #ffffff;
  --zero-border: #d7e0df;
  --zero-text: #05302e;
  --zero-muted: rgba(5, 48, 46, 0.6);
  --zero-track: #edf1f0;
  --zero-hover: #00c0a0;

  width: 100%;
  max-width: var(--zero-card-width);
  margin: 0 auto;
  padding: var(--zero-card-padding-y) var(--zero-card-padding-x);
  overflow: hidden;

  font-family: "Work Sans", Arial, sans-serif;
  color: var(--zero-text);
  background: var(--zero-background);
  border: 1px solid var(--zero-border);
  border-radius: var(--zero-card-radius);

  opacity: 0;
  transform: translateY(22px);

  animation-name: google-zero-card-reveal;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-timeline: view();
  animation-range: entry 10% cover 32%;

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.google-zero-click-chart:hover {
  border-color: var(--zero-hover);
  box-shadow: 0 14px 17px rgba(5, 48, 46, 0.12);
}

.google-zero-click-chart__header h3 {
  margin: 0;
  color: var(--zero-text);
  font-size: var(--zero-title-size);
  font-weight: 600;
  line-height: 1.25;
}

.google-zero-click-chart__header p {
  margin: 6px 0 0;
  color: var(--zero-muted);
  font-size: var(--zero-subtitle-size);
  font-weight: 400;
  line-height: 1.45;
}

.google-zero-click-chart__grid {
  display: grid;
  grid-template-columns: repeat(
    var(--zero-grid-columns),
    minmax(0, 1fr)
  );
  gap: var(--zero-grid-gap);
  margin-top: 32px;
}

.google-zero-click-chart__item {
  min-width: 0;
  text-align: center;
}

.google-zero-click-chart__ring {
  position: relative;
  width: var(--zero-ring-size);
  height: var(--zero-ring-size);
  margin: 0 auto;
}

.google-zero-click-chart__ring svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
}

.google-zero-click-chart__track,
.google-zero-click-chart__progress {
  fill: none;
  stroke-width: var(--zero-ring-width);
}

.google-zero-click-chart__track {
  stroke: var(--zero-track);
}

.google-zero-click-chart__progress {
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;

  animation-duration: 1s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.2, 0.75, 0.2, 1);
  animation-timeline: view();
  animation-range: entry 15% cover 40%;
}

.google-zero-click-chart__progress--answers {
  stroke: #237583;
  animation-name: google-zero-ring-answers;
}

.google-zero-click-chart__progress--serp {
  stroke: #50c0b3;
  animation-name: google-zero-ring-serp;
}

.google-zero-click-chart__progress--rich {
  stroke: #f2bd51;
  animation-name: google-zero-ring-rich;
}

.google-zero-click-chart__progress--links {
  stroke: #ef8354;
  animation-name: google-zero-ring-links;
}

.google-zero-click-chart__percentage {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--zero-text);
  font-size: var(--zero-percentage-size);
  font-weight: 700;
  line-height: 1;

  opacity: 0;
  transform: scale(0.85);

  animation-name: google-zero-number-reveal;
  animation-duration: 0.7s;
  animation-fill-mode: both;
  animation-timeline: view();
  animation-range: entry 22% cover 42%;
}

.google-zero-click-chart__label {
  display: block;
  margin-top: var(--zero-label-gap);

  color: rgba(5, 48, 46, 0.85);
  font-size: var(--zero-label-size);
  font-weight: 500;
  line-height: 1.4;

  opacity: 0;
  transform: translateY(8px);

  animation-name: google-zero-label-reveal;
  animation-duration: 0.7s;
  animation-fill-mode: both;
  animation-timeline: view();
  animation-range: entry 25% cover 45%;
}

@keyframes google-zero-card-reveal {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes google-zero-ring-answers {
  from {
    stroke-dashoffset: 100;
  }

  to {
    stroke-dashoffset: 31.99;
  }
}

@keyframes google-zero-ring-serp {
  from {
    stroke-dashoffset: 100;
  }

  to {
    stroke-dashoffset: 41.8;
  }
}

@keyframes google-zero-ring-rich {
  from {
    stroke-dashoffset: 100;
  }

  to {
    stroke-dashoffset: 57.5;
  }
}

@keyframes google-zero-ring-links {
  from {
    stroke-dashoffset: 100;
  }

  to {
    stroke-dashoffset: 68.01;
  }
}

@keyframes google-zero-number-reveal {
  from {
    opacity: 0;
    transform: scale(0.85);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes google-zero-label-reveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .google-zero-click-chart {
    --zero-card-padding-x: 30px;
    --zero-card-padding-y: 32px;
    --zero-ring-size: 135px;
    --zero-grid-gap: 18px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .google-zero-click-chart {
    --zero-card-padding-x: 20px;
    --zero-card-padding-y: 26px;
    --zero-card-radius: 20px;

    --zero-title-size: 18px;
    --zero-subtitle-size: 12px;
    --zero-label-size: 12px;
    --zero-percentage-size: 20px;

    --zero-ring-size: 112px;
    --zero-ring-width: 12px;
    --zero-grid-columns: 2;
    --zero-grid-gap: 28px 12px;
    --zero-label-gap: 10px;
  }

  .google-zero-click-chart:hover {
    box-shadow: none;
  }
}

/* Small mobile */
@media (max-width: 380px) {
  .google-zero-click-chart {
    --zero-ring-size: 98px;
    --zero-percentage-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .google-zero-click-chart,
  .google-zero-click-chart__progress,
  .google-zero-click-chart__percentage,
  .google-zero-click-chart__label {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  .google-zero-click-chart__progress--answers {
    stroke-dashoffset: 31.99;
  }

  .google-zero-click-chart__progress--serp {
    stroke-dashoffset: 41.8;
  }

  .google-zero-click-chart__progress--rich {
    stroke-dashoffset: 57.5;
  }

  .google-zero-click-chart__progress--links {
    stroke-dashoffset: 68.01;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-5b059e6 */.google-lens-diagram,
.google-lens-diagram * {
  box-sizing: border-box;
}

.google-lens-diagram {
  /* Desktop options */
  --lens-card-width: 646px;
  --lens-card-height: 479px;
  --lens-card-padding-x: 48px;
  --lens-card-padding-bottom: 42px;
  --lens-card-radius: 15px;

  --lens-banner-width: calc(100% - 52px);
  --lens-banner-height: 85px;
  --lens-banner-offset-top: 22px;
  --lens-banner-padding-x: 28px;
  --lens-banner-radius: 13px;

  --lens-title-size: 29px;
  --lens-meta-size: 19px;
  --lens-intro-size: 19px;
  --lens-number-size: 126px;
  --lens-description-size: 19px;
  --lens-source-size: 13px;

  --lens-icon-size: 156px;
  --lens-icon-border: 18px;

  --lens-background: #ffffff;
  --lens-border: #cfcfcf;
  --lens-text: #05302e;
  --lens-muted: rgba(5, 48, 46, 0.62);
  --lens-description: rgba(5, 48, 46, 0.72);
  --lens-source: rgba(5, 48, 46, 0.45);
  --lens-banner-background: #05302e;

  position: relative;
  width: 100%;
  max-width: var(--lens-card-width);
  min-height: var(--lens-card-height);
  margin: 0 auto;
  padding:
    calc(var(--lens-banner-offset-top) + var(--lens-banner-height) + 55px)
    var(--lens-card-padding-x)
    var(--lens-card-padding-bottom);

  overflow: visible;
  font-family: "Work Sans", Arial, sans-serif;
  color: var(--lens-text);
  background: var(--lens-background);
  border: 1px solid var(--lens-border);
  border-radius: var(--lens-card-radius);

  opacity: 0;
  transform: translateY(30px) scale(0.98);

  animation-name: google-lens-card-reveal;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-timing-function: ease;
  animation-timeline: view();
  animation-range: entry 10% cover 34%;
}

.google-lens-diagram__banner {
  position: absolute;
  z-index: 3;
  top: var(--lens-banner-offset-top);
  left: -24px;

  width: var(--lens-banner-width);
  min-height: var(--lens-banner-height);
  padding: 15px var(--lens-banner-padding-x);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  color: #ffffff;
  background: var(--lens-banner-background);
  border-radius: var(--lens-banner-radius);

  opacity: 0;
  transform: translateX(-35px);

  animation-name: google-lens-banner-reveal;
  animation-duration: 0.8s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.2, 0.75, 0.2, 1);
  animation-timeline: view();
  animation-range: entry 14% cover 36%;
}

.google-lens-diagram__banner::after {
  content: "";
  position: absolute;
  left: 6px;
  bottom: -11px;

  width: 0;
  height: 0;

  border-top: 11px solid #021f1e;
  border-left: 18px solid transparent;
}

.google-lens-diagram__title {
  font-size: var(--lens-title-size);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 1.7px;
  text-transform: uppercase;
}

.google-lens-diagram__meta {
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--lens-meta-size);
  font-weight: 600;
  line-height: 1.25;
  text-align: right;
  white-space: nowrap;
}

.google-lens-diagram__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--lens-icon-size);
  align-items: center;
  gap: 36px;
  min-height: 260px;
}

.google-lens-diagram__text {
  min-width: 0;
}

.google-lens-diagram__intro,
.google-lens-diagram__description {
  margin: 0;
}

.google-lens-diagram__intro {
  color: var(--lens-muted);
  font-size: var(--lens-intro-size);
  font-weight: 500;
  line-height: 1.4;

  opacity: 0;
  transform: translateY(12px);

  animation-name: google-lens-text-reveal;
  animation-duration: 0.7s;
  animation-fill-mode: both;
  animation-timeline: view();
  animation-range: entry 20% cover 40%;
}

.google-lens-diagram__number {
  display: block;
  margin: 6px 0 9px;

  color: var(--lens-text);
  font-size: var(--lens-number-size);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -8px;

  opacity: 0;
  transform: translateY(18px) scale(0.8);

  animation-name: google-lens-number-reveal;
  animation-duration: 0.9s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.2, 0.9, 0.2, 1.2);
  animation-timeline: view();
  animation-range: entry 22% cover 45%;
}

.google-lens-diagram__description {
  color: var(--lens-description);
  font-size: var(--lens-description-size);
  font-weight: 400;
  line-height: 1.4;

  opacity: 0;
  transform: translateY(10px);

  animation-name: google-lens-text-reveal;
  animation-duration: 0.7s;
  animation-fill-mode: both;
  animation-timeline: view();
  animation-range: entry 27% cover 47%;
}

.google-lens-diagram__source {
  display: block;
  margin-top: 22px;

  color: var(--lens-source);
  font-size: var(--lens-source-size);
  font-weight: 400;
  line-height: 1.4;

  opacity: 0;

  animation-name: google-lens-source-reveal;
  animation-duration: 0.7s;
  animation-fill-mode: both;
  animation-timeline: view();
  animation-range: entry 30% cover 50%;
}

.google-lens-diagram__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.google-lens-diagram__lens-icon {
  position: relative;
  width: var(--lens-icon-size);
  height: var(--lens-icon-size);
  border: var(--lens-icon-border) solid transparent;
  border-radius: 34%;

  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    conic-gradient(
      from 5deg,
      #4285f4 0deg 88deg,
      #34a853 88deg 178deg,
      #fbbc05 178deg 268deg,
      #ea4335 268deg 360deg
    ) border-box;

  opacity: 0;
  transform: scale(0.55) rotate(-18deg);

  animation-name: google-lens-icon-reveal;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.2, 0.9, 0.2, 1.15);
  animation-timeline: view();
  animation-range: entry 18% cover 46%;
}

.google-lens-diagram__lens-center {
  position: absolute;
  top: 27%;
  left: 27%;

  width: 46%;
  height: 46%;

  border: 12px solid #4285f4;
  border-radius: 34%;
}

.google-lens-diagram__lens-dot {
  position: absolute;
  right: 12%;
  bottom: 12%;

  width: 18%;
  height: 18%;

  background: #34a853;
  border-radius: 50%;
}

@keyframes google-lens-card-reveal {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes google-lens-banner-reveal {
  from {
    opacity: 0;
    transform: translateX(-35px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes google-lens-text-reveal {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes google-lens-number-reveal {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.8);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes google-lens-source-reveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes google-lens-icon-reveal {
  from {
    opacity: 0;
    transform: scale(0.55) rotate(-18deg);
  }

  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .google-lens-diagram {
    --lens-card-width: 620px;
    --lens-card-padding-x: 38px;
    --lens-number-size: 108px;
    --lens-icon-size: 138px;
    --lens-title-size: 25px;
    --lens-meta-size: 16px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .google-lens-diagram {
    --lens-card-width: 100%;
    --lens-card-height: auto;
    --lens-card-padding-x: 20px;
    --lens-card-padding-bottom: 28px;
    --lens-card-radius: 15px;

    --lens-banner-width: calc(100% - 24px);
    --lens-banner-height: 68px;
    --lens-banner-offset-top: 18px;
    --lens-banner-padding-x: 16px;
    --lens-banner-radius: 12px;

    --lens-title-size: 18px;
    --lens-meta-size: 11px;
    --lens-intro-size: 14px;
    --lens-number-size: 78px;
    --lens-description-size: 14px;
    --lens-source-size: 11px;

    --lens-icon-size: 96px;
    --lens-icon-border: 11px;

    min-height: 375px;
    padding-top: 128px;
  }

  .google-lens-diagram__banner {
    left: -10px;
    gap: 10px;
  }

  .google-lens-diagram__content {
    grid-template-columns: minmax(0, 1fr) var(--lens-icon-size);
    gap: 14px;
    min-height: 200px;
  }

  .google-lens-diagram__number {
    letter-spacing: -5px;
  }

  .google-lens-diagram__lens-center {
    border-width: 8px;
  }
}

/* Very small mobile */
@media (max-width: 390px) {
  .google-lens-diagram {
    --lens-title-size: 16px;
    --lens-meta-size: 9px;
    --lens-number-size: 67px;
    --lens-icon-size: 82px;
  }

  .google-lens-diagram__content {
    gap: 8px;
  }
}

/* Fallback for browsers without scroll-driven animations */
@supports not (animation-timeline: view()) {
  .google-lens-diagram,
  .google-lens-diagram__banner,
  .google-lens-diagram__intro,
  .google-lens-diagram__number,
  .google-lens-diagram__description,
  .google-lens-diagram__source,
  .google-lens-diagram__lens-icon {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .google-lens-diagram,
  .google-lens-diagram__banner,
  .google-lens-diagram__intro,
  .google-lens-diagram__number,
  .google-lens-diagram__description,
  .google-lens-diagram__source,
  .google-lens-diagram__lens-icon {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-090774b */.google-ai-mode-diagram,
.google-ai-mode-diagram * {
  box-sizing: border-box;
}

.google-ai-mode-diagram {
  /* Desktop options */
  --ai-card-width: 646px;
  --ai-card-height: 479px;
  --ai-card-padding-x: 48px;
  --ai-card-padding-bottom: 42px;
  --ai-card-radius: 15px;

  --ai-banner-width: calc(100% - 28px);
  --ai-banner-height: 85px;
  --ai-banner-offset-top: 22px;
  --ai-banner-padding-x: 28px;
  --ai-banner-radius: 13px;

  --ai-title-size: 29px;
  --ai-meta-size: 16px;
  --ai-intro-size: 19px;
  --ai-number-size: 96px;
  --ai-description-size: 19px;
  --ai-source-size: 13px;

  --ai-icon-size: 156px;

  --ai-background: #ffffff;
  --ai-border: #cfcfcf;
  --ai-text: #05302e;
  --ai-muted: rgba(5, 48, 46, 0.62);
  --ai-description: rgba(5, 48, 46, 0.72);
  --ai-source: rgba(5, 48, 46, 0.45);
  --ai-banner-background: #05302e;
  --ai-accent: #00c0a0;
  --ai-accent-soft: #50c0b3;
  --ai-accent-dark: #237583;

  position: relative;
  width: 100%;
  max-width: var(--ai-card-width);
  min-height: var(--ai-card-height);
  margin: 0 auto;
  padding:
    calc(var(--ai-banner-offset-top) + var(--ai-banner-height) + 55px)
    var(--ai-card-padding-x)
    var(--ai-card-padding-bottom);

  overflow: visible;
  font-family: "Work Sans", Arial, sans-serif;
  color: var(--ai-text);
  background: var(--ai-background);
  border: 1px solid var(--ai-border);
  border-radius: var(--ai-card-radius);

  opacity: 0;
  transform: translateY(30px) scale(0.98);

  animation-name: google-ai-card-reveal;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-timing-function: ease;
  animation-timeline: view();
  animation-range: entry 10% cover 34%;
}

.google-ai-mode-diagram__banner {
  position: absolute;
  z-index: 3;
  top: var(--ai-banner-offset-top);
  left: -24px;

  width: var(--ai-banner-width);
  min-height: var(--ai-banner-height);
  padding: 15px var(--ai-banner-padding-x);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  color: #ffffff;
  background: var(--ai-banner-background);
  border-radius: var(--ai-banner-radius);

  opacity: 0;
  transform: translateX(-35px);

  animation-name: google-ai-banner-reveal;
  animation-duration: 0.8s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.2, 0.75, 0.2, 1);
  animation-timeline: view();
  animation-range: entry 14% cover 36%;
}

.google-ai-mode-diagram__banner::after {
  content: "";
  position: absolute;
  left: 6px;
  bottom: -11px;

  width: 0;
  height: 0;

  border-top: 11px solid #021f1e;
  border-left: 18px solid transparent;
}

.google-ai-mode-diagram__title {
  font-size: var(--ai-title-size);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  white-space: nowrap;
}

.google-ai-mode-diagram__meta {
  max-width: 215px;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--ai-meta-size);
  font-weight: 600;
  line-height: 1.3;
  text-align: right;
}

.google-ai-mode-diagram__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ai-icon-size);
  align-items: center;
  gap: 34px;
  min-height: 260px;
}

.google-ai-mode-diagram__text {
  min-width: 0;
}

.google-ai-mode-diagram__intro,
.google-ai-mode-diagram__description {
  margin: 0;
}

.google-ai-mode-diagram__intro {
  color: var(--ai-muted);
  font-size: var(--ai-intro-size);
  font-weight: 500;
  line-height: 1.4;

  opacity: 0;
  transform: translateY(12px);

  animation-name: google-ai-text-reveal;
  animation-duration: 0.7s;
  animation-fill-mode: both;
  animation-timeline: view();
  animation-range: entry 20% cover 40%;
}

.google-ai-mode-diagram__number {
  display: block;
  margin: 8px 0 12px;

  color: var(--ai-text);
  font-size: var(--ai-number-size);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -6px;

  opacity: 0;
  transform: translateY(18px) scale(0.78);

  animation-name: google-ai-number-reveal;
  animation-duration: 0.9s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.2, 0.9, 0.2, 1.2);
  animation-timeline: view();
  animation-range: entry 22% cover 45%;
}

.google-ai-mode-diagram__description {
  max-width: 320px;
  color: var(--ai-description);
  font-size: var(--ai-description-size);
  font-weight: 400;
  line-height: 1.4;

  opacity: 0;
  transform: translateY(10px);

  animation-name: google-ai-text-reveal;
  animation-duration: 0.7s;
  animation-fill-mode: both;
  animation-timeline: view();
  animation-range: entry 27% cover 47%;
}

.google-ai-mode-diagram__source {
  display: block;
  margin-top: 22px;

  color: var(--ai-source);
  font-size: var(--ai-source-size);
  font-weight: 400;
  line-height: 1.4;

  opacity: 0;

  animation-name: google-ai-source-reveal;
  animation-duration: 0.7s;
  animation-fill-mode: both;
  animation-timeline: view();
  animation-range: entry 30% cover 50%;
}

.google-ai-mode-diagram__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.google-ai-mode-diagram__icon {
  position: relative;
  width: var(--ai-icon-size);
  height: var(--ai-icon-size);

  opacity: 0;
  transform: scale(0.55) rotate(-16deg);

  animation-name: google-ai-icon-reveal;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.2, 0.9, 0.2, 1.15);
  animation-timeline: view();
  animation-range: entry 18% cover 46%;
}

.google-ai-mode-diagram__spark {
  position: absolute;
  display: block;
  border: 8px solid var(--ai-accent);
  border-radius: 16px;
  transform: rotate(45deg);
}

.google-ai-mode-diagram__spark::before,
.google-ai-mode-diagram__spark::after {
  content: "";
  position: absolute;
  background: #ffffff;
}

.google-ai-mode-diagram__spark::before {
  top: 50%;
  left: -12px;
  right: -12px;
  height: 18px;
  transform: translateY(-50%);
}

.google-ai-mode-diagram__spark::after {
  top: -12px;
  bottom: -12px;
  left: 50%;
  width: 18px;
  transform: translateX(-50%);
}

.google-ai-mode-diagram__spark--large {
  top: 22px;
  left: 22px;
  width: 92px;
  height: 92px;
  border-color: var(--ai-accent);
}

.google-ai-mode-diagram__spark--small {
  right: 10px;
  bottom: 14px;
  width: 54px;
  height: 54px;
  border-width: 6px;
  border-color: var(--ai-accent-dark);
  border-radius: 11px;
}

.google-ai-mode-diagram__spark--small::before {
  left: -10px;
  right: -10px;
  height: 12px;
}

.google-ai-mode-diagram__spark--small::after {
  top: -10px;
  bottom: -10px;
  width: 12px;
}

.google-ai-mode-diagram__dot {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: var(--ai-accent-soft);
}

.google-ai-mode-diagram__dot--one {
  top: 12px;
  right: 13px;
  width: 18px;
  height: 18px;
}

.google-ai-mode-diagram__dot--two {
  left: 13px;
  bottom: 16px;
  width: 12px;
  height: 12px;
  background: var(--ai-accent-dark);
}

@keyframes google-ai-card-reveal {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes google-ai-banner-reveal {
  from {
    opacity: 0;
    transform: translateX(-35px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes google-ai-text-reveal {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes google-ai-number-reveal {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.78);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes google-ai-source-reveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes google-ai-icon-reveal {
  from {
    opacity: 0;
    transform: scale(0.55) rotate(-16deg);
  }

  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .google-ai-mode-diagram {
    --ai-card-width: 620px;
    --ai-card-padding-x: 38px;
    --ai-number-size: 86px;
    --ai-icon-size: 138px;
    --ai-title-size: 25px;
    --ai-meta-size: 14px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .google-ai-mode-diagram {
    --ai-card-width: 100%;
    --ai-card-height: auto;
    --ai-card-padding-x: 20px;
    --ai-card-padding-bottom: 28px;
    --ai-card-radius: 15px;

    --ai-banner-width: calc(100% - 24px);
    --ai-banner-height: 68px;
    --ai-banner-offset-top: 18px;
    --ai-banner-padding-x: 16px;
    --ai-banner-radius: 12px;

    --ai-title-size: 17px;
    --ai-meta-size: 10px;
    --ai-intro-size: 14px;
    --ai-number-size: 72px;
    --ai-description-size: 14px;
    --ai-source-size: 11px;

    --ai-icon-size: 96px;

    min-height: 375px;
    padding-top: 128px;
  }

  .google-ai-mode-diagram__banner {
    left: -10px;
    gap: 10px;
  }

  .google-ai-mode-diagram__meta {
    max-width: 125px;
  }

  .google-ai-mode-diagram__content {
    grid-template-columns: minmax(0, 1fr) var(--ai-icon-size);
    gap: 14px;
    min-height: 200px;
  }

  .google-ai-mode-diagram__number {
    letter-spacing: -4px;
  }

  .google-ai-mode-diagram__spark {
    border-width: 6px;
  }

  .google-ai-mode-diagram__spark--large {
    top: 14px;
    left: 14px;
    width: 60px;
    height: 60px;
    border-radius: 11px;
  }

  .google-ai-mode-diagram__spark--small {
    right: 5px;
    bottom: 8px;
    width: 38px;
    height: 38px;
    border-width: 4px;
  }

  .google-ai-mode-diagram__spark::before {
    left: -9px;
    right: -9px;
    height: 12px;
  }

  .google-ai-mode-diagram__spark::after {
    top: -9px;
    bottom: -9px;
    width: 12px;
  }

  .google-ai-mode-diagram__spark--small::before {
    left: -7px;
    right: -7px;
    height: 8px;
  }

  .google-ai-mode-diagram__spark--small::after {
    top: -7px;
    bottom: -7px;
    width: 8px;
  }
}

/* Very small mobile */
@media (max-width: 390px) {
  .google-ai-mode-diagram {
    --ai-title-size: 15px;
    --ai-meta-size: 9px;
    --ai-number-size: 62px;
    --ai-icon-size: 82px;
  }

  .google-ai-mode-diagram__content {
    gap: 8px;
  }
}

/* Fallback for browsers without scroll-driven animations */
@supports not (animation-timeline: view()) {
  .google-ai-mode-diagram,
  .google-ai-mode-diagram__banner,
  .google-ai-mode-diagram__intro,
  .google-ai-mode-diagram__number,
  .google-ai-mode-diagram__description,
  .google-ai-mode-diagram__source,
  .google-ai-mode-diagram__icon {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .google-ai-mode-diagram,
  .google-ai-mode-diagram__banner,
  .google-ai-mode-diagram__intro,
  .google-ai-mode-diagram__number,
  .google-ai-mode-diagram__description,
  .google-ai-mode-diagram__source,
  .google-ai-mode-diagram__icon {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}/* End custom CSS */