/* :root {
  --background: #f5f8fa;
  --otter-dark-blue: #041d34;
  --otter-blue: #144fff;
  --otter-white: white;
  --otter-subtle: #515e71;
  --otter-default: #22282f;
} */

/* Global Resets & Typography */
/* body {
  background-color: var(--background);
  color: var(--otter-dark-blue);
  letter-spacing: -0.02em;
  font-family: Avertastd, sans-serif;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.45;
} */

h2 {
  letter-spacing: -0.01em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 4.8rem;
  font-weight: 600;
  line-height: 1.16;
}

h4 {
  letter-spacing: -0.03em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1.16;
}

p {
  letter-spacing: -0.02em;
  margin-bottom: 0;
}

img {
  max-width: 100%;
}

.w-layout-vflex {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

/* Layout Utilities */
.padding-global {
  padding-left: 5%;
  padding-right: 5%;
}

.padding-section-large {
  padding-top: 12rem;
  padding-bottom: 12rem;
}

.container-medium {
  width: 100%;
  max-width: 106.6rem;
  margin-left: auto;
  margin-right: auto;
}

.max-width-580 {
  width: 100%;
  max-width: 58rem;
}

.text-align-center {
  text-align: center;
}

.margin-bottom {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}

.margin-8 {
  margin: 0.8rem;
}

.margin-16 {
  margin: 1.6rem;
}

/* Typography Styles */
.heading-style-h1 {
  letter-spacing: -0.02em;
  font-size: 5.6rem;
  font-weight: 300;
  line-height: 1.1;
}

.heading-style-h4 {
  letter-spacing: -0.02em;
  font-size: 2.8rem;
  line-height: 1.2;
}

.text-color-blue {
  color: var(--otter-blue);
}

.text-size-regular {
  letter-spacing: 0;
  font-size: 1.6rem;
  line-height: 1.5;
}

.text-weight-light {
  font-weight: 300;
}

.text-weight-regular {
  font-weight: 400;
}

/* Section & Grid Components */
.section_hp-assistant {
  overflow: hidden;
}

.hp-assistant_container {
  grid-column-gap: 8rem;
  grid-row-gap: 8rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.hp-cards_container {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-flow: column;
  display: flex;
  width: 100%;
}

.hp-assistant_cards {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  place-items: stretch stretch;
  width: 100%;
  display: grid;
}

/* Card Components */
.card {
  border-radius: 3.2rem;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  height: auto;
  display: flex;
  overflow: hidden;
  position: relative;
}

.card-inner {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  display: flex;
  position: relative;
}

.card-head_holder {
  width: 100%;
  padding: 3.2rem 3.2rem 0;
}

.card-head {
  z-index: 1;
  width: 100%;
  max-width: 44.4rem;
  position: relative;
}

.card-visual {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.card-visual.is-820 {
  height: 41rem;
}
.card-visual.is-428 {
  height: 42.8rem;
}
.card-visual.is-custom-820 {
  height: 41rem;
}
.card-visual.is-424 {
  height: 42.4rem;
}

.img-cover {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

/* Card Variations */
/* Card 1 — Otter-style soft gradient */
/* ================================
   CARD 1 — Otter-style gradient + sketch lines
   Target: <div class="card-inner is-questions">
================================ */

/* ================================
   Card: Real-time truth (slightly bluish base)
   Replace your entire .card-inner.is-questions block with this
================================ */

/* Base gradient (cooler / bluish paper) */
/* ================================
   Card: Real-time truth (VERY soft blue, minimal purple)
   Replace your entire .card-inner.is-questions block with this
================================ */

/* Base gradient (cool + airy, almost no purple) */
/* ================================
   Card: Real-time truth (very soft blue + tiny hint of light purple overlap)
   Replace your entire .card-inner.is-questions block with this
================================ */

/* ================================
   is-questions — multi-color soft blobs like your reference
   Replace your entire is-questions CSS with this
================================ */

/* ================================
   is-questions — multi-color soft blobs (lavender + light blue, NO orange)
   Replace your entire is-questions CSS with this
================================ */

.card-inner.is-questions {
  position: relative;
  overflow: hidden;
  border-radius: inherit;

  background:
    /* ✅ light blue (bottom-left) */ radial-gradient(
      80% 85% at 28% 82%,
      rgba(120, 190, 255, 0.18) 0%,
      rgba(120, 190, 255, 0) 64%
    ),
    /* lavender (top-right) */
      radial-gradient(
        75% 85% at 86% 20%,
        rgba(185, 170, 255, 0.38) 0%,
        rgba(185, 170, 255, 0) 64%
      ),
    /* soft blue (upper-mid) */
      radial-gradient(
        70% 75% at 58% 18%,
        rgba(120, 170, 255, 0.12) 0%,
        rgba(120, 170, 255, 0) 62%
      ),
    /* subtle top highlight */
      radial-gradient(
        70% 55% at 22% 10%,
        rgba(255, 255, 255, 0.96) 0%,
        rgba(255, 255, 255, 0) 55%
      ),
    /* base paper */
      linear-gradient(180deg, #fbfbfc 0%, #f3f4f6 60%, #f2f3f8 100%);
}

/* haze for extra softness */
.card-inner.is-questions::before {
  content: "";
  position: absolute;
  inset: -110px;
  pointer-events: none;
  z-index: 0;

  background: radial-gradient(
      circle at 28% 82%,
      rgba(120, 190, 255, 0.12),
      rgba(0, 0, 0, 0) 60%
    ),
    radial-gradient(
      circle at 86% 20%,
      rgba(185, 170, 255, 0.18),
      rgba(0, 0, 0, 0) 62%
    ),
    radial-gradient(
      circle at 58% 18%,
      rgba(120, 170, 255, 0.08),
      rgba(0, 0, 0, 0) 62%
    );

  filter: blur(52px);
  opacity: 0.95;
}

/* sketch lines (bottom) */
.card-inner.is-questions::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 220px;
  pointer-events: none;
  z-index: 1;

  opacity: 0.34;
  mix-blend-mode: multiply;

  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 125% auto;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 220'%3E%3Cg fill='none' stroke='%23000000' stroke-opacity='0.12' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-40 210 L220 80'/%3E%3Cpath d='M40 220 L360 40'/%3E%3Cpath d='M140 220 L520 60'/%3E%3Cpath d='M260 220 L640 70'/%3E%3Cpath d='M380 220 L820 90'/%3E%3Cpath d='M520 220 L940 120'/%3E%3Cpath d='M-20 140 L260 220'/%3E%3Cpath d='M120 120 L420 220'/%3E%3Cpath d='M300 110 L610 220'/%3E%3Cpath d='M520 110 L820 220'/%3E%3Cpath d='M120 220 C 240 160 360 150 520 190'/%3E%3Cpath d='M260 220 C 420 150 560 150 740 205'/%3E%3Cpath d='M520 220 C 640 175 740 170 900 205'/%3E%3Cpath d='M70 180 L120 160'/%3E%3Cpath d='M610 160 L660 140'/%3E%3Cpath d='M760 170 L820 150'/%3E%3C/g%3E%3C/svg%3E");
}

/* keep content above haze + sketch */
.card-inner.is-questions .card-head_holder,
.card-inner.is-questions .card-visual {
  position: relative;
  z-index: 2;
}

/* optional noise overlay (if present) */
.card-inner.is-questions .noise {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.card-inner.is-hey-otter {
  color: #fff;
  background-color: #131313;
  background-position: 50% 100%;
  background-repeat: no-repeat;
}

/* =========================
   is-fiction — clean grey bg + image ~15% smaller (no grain / no crop)
========================= */

/* Light grey background */
.card-inner.is-fiction {
  background: #f3f3f3;
}

/* Make the IMAGE AREA smaller (not the <img>) */
.card-inner.is-fiction .card-visual.is-custom-820 {
  width: 100%;
  aspect-ratio: 1 / 1; /* your image is 1024x1024 */
  height: auto;

  /* ~15% smaller cap vs your earlier 34.85rem */
  max-height: clamp(18.7rem, 23.8vw, 29.6rem);

  overflow: hidden;
  background: #f3f3f3;
  padding: 1.2rem; /* breathing space around the image */
  box-sizing: border-box;
}

/* Your image uses .img-cover — keep it crisp and uncropped */
.card-inner.is-fiction .card-visual.is-custom-820 .img-cover {
  width: 100%;
  height: 100%;
  object-fit: contain; /* ✅ never cuts */
  object-position: center;
  display: block;

  /* ensure nothing “softens” it */
  filter: none;
  transform: none;
}

/* ================================
   CARD — GIST background (multi-color blur + grain)
================================ */

/* ================================
   CARD — GIST background (smooth, no grain)
================================ */

.card-inner.is-gist {
  color: #fff;
  position: relative;
  overflow: hidden;
  border-radius: inherit;

  background:
    /* purple-left bloom */ radial-gradient(
      70% 60% at 18% 18%,
      rgba(135, 121, 245, 0.75) 0%,
      rgba(135, 121, 245, 0) 62%
    ),
    /* warm center/peach */
      radial-gradient(
        75% 70% at 52% 35%,
        rgba(252, 108, 29, 0.5) 0%,
        rgba(252, 108, 29, 0) 62%
      ),
    /* magenta/top-right */
      radial-gradient(
        70% 60% at 88% 20%,
        rgba(179, 119, 231, 0.6) 0%,
        rgba(179, 119, 231, 0) 60%
      ),
    /* subtle dark base */
      linear-gradient(
        180deg,
        rgba(20, 20, 28, 0.55) 0%,
        rgba(12, 12, 16, 0.88) 100%
      );
}

/* soft blur haze (smoothens it) */
.card-inner.is-gist::before {
  content: "";
  position: absolute;
  inset: -100px;
  pointer-events: none;
  z-index: 0;

  background: radial-gradient(
      circle at 28% 30%,
      rgba(135, 121, 245, 0.38),
      rgba(0, 0, 0, 0) 58%
    ),
    radial-gradient(
      circle at 70% 35%,
      rgba(252, 108, 29, 0.3),
      rgba(0, 0, 0, 0) 60%
    ),
    radial-gradient(
      circle at 82% 18%,
      rgba(179, 119, 231, 0.3),
      rgba(0, 0, 0, 0) 60%
    );

  filter: blur(46px);
  opacity: 0.95;
}

/* keep content above haze */
.card-inner.is-gist .card-head_holder,
.card-inner.is-gist .card-visual {
  position: relative;
  z-index: 2;
}

/* Soft pastel gradient (no noise) */

/* ================================
   is-action — smooth gradient + NO grain
================================ */

/* ================================
   is-action — text left, image right (no grain)
================================ */

/* remove grain */
.card-inner.is-action .noise {
  display: none;
}

/* layout + background */
.card-inner.is-action {
  position: relative;
  overflow: hidden;
  border-radius: inherit;

  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;

  gap: 5rem;
  padding: 3.2rem;

  /* smooth pastel gradient */
  background: radial-gradient(
      70% 80% at 84% 18%,
      rgba(135, 121, 245, 0.42) 0%,
      rgba(135, 121, 245, 0) 62%
    ),
    radial-gradient(
      60% 70% at 92% 55%,
      rgba(179, 119, 231, 0.22) 0%,
      rgba(179, 119, 231, 0) 64%
    ),
    radial-gradient(
      75% 85% at 28% 88%,
      rgba(252, 108, 29, 0.18) 0%,
      rgba(252, 108, 29, 0) 66%
    ),
    linear-gradient(180deg, #f7f7f8 0%, #f1f2f4 100%);

  text-align: left;
}

/* keep the text block left (and not centered) */
.card-inner.is-action .card-head {
  flex: 0 1 52rem; /* text column width */
  max-width: 52rem; /* override default 44.4rem */
  margin: 0;
  text-align: left;
}

/* push image to the right and keep it smaller */
.card-inner.is-action .hp-assistant_tasks {
  flex: 0 0 auto;
  margin-left: auto; /* ✅ forces right alignment */
  align-self: flex-start;

  width: 44%;
  max-width: 62rem;
  height: auto;
  object-fit: contain;
}

/* responsive: stack on mobile */
@media screen and (max-width: 991px) {
  .card-inner.is-action {
    flex-direction: column;
    gap: 2.4rem;
  }
  .card-inner.is-action .hp-assistant_tasks {
    width: 100%;
    max-width: none;
    margin-left: 0;
  }
}

.card-inner.is-insights {
  color: #fff;
  position: relative;
  overflow: hidden;
  border-radius: inherit;
  min-height: 54.4rem;

  background:
    /* purple haze (top-left) */ radial-gradient(
      55% 70% at 10% 20%,
      rgba(169, 95, 255, 0.55) 0%,
      rgba(169, 95, 255, 0) 60%
    ),
    /* teal wash (upper-mid) */
      radial-gradient(
        60% 70% at 55% 25%,
        rgba(0, 210, 190, 0.4) 0%,
        rgba(0, 210, 190, 0) 62%
      ),
    /* deep blue (top-right) */
      radial-gradient(
        65% 75% at 85% 20%,
        rgba(40, 120, 255, 0.55) 0%,
        rgba(40, 120, 255, 0) 62%
      ),
    /* green glow (mid-right) */
      radial-gradient(
        70% 70% at 70% 60%,
        rgba(70, 210, 120, 0.32) 0%,
        rgba(70, 210, 120, 0) 65%
      ),
    /* purple shadow (bottom-left) */
      radial-gradient(
        70% 80% at 20% 90%,
        rgba(120, 70, 255, 0.35) 0%,
        rgba(120, 70, 255, 0) 65%
      ),
    /* base */ linear-gradient(180deg, #0f1113 0%, #0b0c0e 100%);
}
.card-inner.is-insights::before {
  content: "";
  position: absolute;
  inset: -100px;
  pointer-events: none;
  background: radial-gradient(
      circle at 50% 40%,
      rgba(0, 210, 190, 0.22),
      rgba(0, 0, 0, 0) 60%
    ),
    radial-gradient(
      circle at 85% 25%,
      rgba(40, 120, 255, 0.2),
      rgba(0, 0, 0, 0) 62%
    ),
    radial-gradient(
      circle at 15% 25%,
      rgba(169, 95, 255, 0.22),
      rgba(0, 0, 0, 0) 62%
    );
  filter: blur(50px);
  opacity: 0.9;
}
.card-inner.is-insights > * {
  position: relative;
  z-index: 1;
}

.card-inner.is-keep-your {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
  color: #22282f;
  min-height: 54.4rem;

  background:
    /* bottom purple bloom */ radial-gradient(
      80% 65% at 50% 120%,
      rgba(179, 119, 231, 0.55) 0%,
      rgba(179, 119, 231, 0) 60%
    ),
    /* right-side tint */
      radial-gradient(
        60% 55% at 88% 78%,
        rgba(135, 121, 245, 0.22) 0%,
        rgba(135, 121, 245, 0) 58%
      ),
    /* top soft highlight */
      radial-gradient(
        70% 55% at 20% 8%,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0) 55%
      ),
    /* base paper */
      linear-gradient(180deg, #fbfbfc 0%, #f3f4f6 55%, #f2efff 100%);
}

/* Mist layer (soft blur haze) */
.card-inner.is-keep-your::before {
  content: "";
  position: absolute;
  inset: -80px;
  pointer-events: none;

  background: radial-gradient(
      circle at 55% 80%,
      rgba(179, 119, 231, 0.28),
      rgba(255, 255, 255, 0) 58%
    ),
    radial-gradient(
      circle at 40% 95%,
      rgba(135, 121, 245, 0.2),
      rgba(255, 255, 255, 0) 60%
    );

  filter: blur(32px);
  opacity: 0.9;
  z-index: 0;
}

/* Sketch lines overlay (bottom) */
.card-inner.is-keep-your::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 220px;
  pointer-events: none;
  z-index: 1;

  /* overall subtlety */
  opacity: 0.38;
  mix-blend-mode: multiply;

  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 125% auto;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 220'%3E%3Cg fill='none' stroke='%23000000' stroke-opacity='0.12' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- long construction diagonals --%3E%3Cpath d='M-40 210 L220 80'/%3E%3Cpath d='M40 220 L360 40'/%3E%3Cpath d='M140 220 L520 60'/%3E%3Cpath d='M260 220 L640 70'/%3E%3Cpath d='M380 220 L820 90'/%3E%3Cpath d='M520 220 L940 120'/%3E%3C!-- secondary cross lines --%3E%3Cpath d='M-20 140 L260 220'/%3E%3Cpath d='M120 120 L420 220'/%3E%3Cpath d='M300 110 L610 220'/%3E%3Cpath d='M520 110 L820 220'/%3E%3C!-- faint arcs like pencil compass marks --%3E%3Cpath d='M120 220 C 240 160 360 150 520 190'/%3E%3Cpath d='M260 220 C 420 150 560 150 740 205'/%3E%3Cpath d='M520 220 C 640 175 740 170 900 205'/%3E%3C!-- a few short stray strokes --%3E%3Cpath d='M70 180 L120 160'/%3E%3Cpath d='M610 160 L660 140'/%3E%3Cpath d='M760 170 L820 150'/%3E%3C/g%3E%3C/svg%3E");
}

/* Keep card content above mist + sketch */
.card-inner.is-keep-your .card-head_holder,
.card-inner.is-keep-your .card-visual {
  position: relative;
  z-index: 2;
}

/* If you have a noise overlay inside the card, keep it on top */
.card-inner.is-keep-your .noise {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.noise {
  z-index: 1;
  opacity: 0.7;
  pointer-events: none;
  mix-blend-mode: overlay;
  background-image: url("https://cdn.prod.website-files.com/618e9316785b3582a5178502/67d027e8f322d591814b4b4d_noise%20copy.png");
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

/* Visibility Utilities */
.show-tablet {
  display: none;
}
@media screen and (max-width: 991px) {
  .hide-tablet {
    display: none;
  }
  .show-tablet {
    display: block;
  }
  .hp-assistant_cards {
    flex-flow: column;
    display: flex;
  }
}

/* Grid Node Assignments */
#w-node-dcb7c8c6-ea60-a020-0e71-d036967e87d0-ecfa1921,
#w-node-dcb7c8c6-ea60-a020-0e71-d036967e87ea-ecfa1921,
#w-node-dcb7c8c6-ea60-a020-0e71-d036967e8806-ecfa1921 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

/* Image fix for expiry card on small screens */

@media screen and (max-width: 991px) {
  .card-inner.is-fiction .hide-tablet {
    display: block !important;
  }

  /* optional: make the image area a bit shorter on mobile */
  .card-inner.is-fiction .card-visual.is-custom-820 {
    height: 28rem; /* tweak */
  }
}

/* =========================
   is-fiction: square (1024x1024) image – no weird cropping
========================= */

/* Make the image container responsive + square */
.card-inner.is-fiction .card-visual.is-custom-820 {
  width: 100%;
  aspect-ratio: 1 / 1; /* ✅ matches 1024x1024 */
  height: auto; /* overrides fixed heights */
  max-height: clamp(22rem, 28vw, 34.85rem); /* keeps it from getting huge */
  overflow: hidden;
  background: #f3f3f3; /* light grey behind image */
}

/* Default: keep full, no cut */
.card-inner.is-fiction .card-visual.is-custom-820 .img-cover {
  width: 100%;
  height: 100%;
  object-fit: contain; /* ✅ never crops */
  object-position: center;
}

/* Optional: if you still want “cover” on large screens only */
@media (min-width: 992px) {
  .card-inner.is-fiction .card-visual.is-custom-820 .img-cover {
    object-fit: cover; /* crops on desktop only */
  }
}

/* ===== is-fiction: fix cutting on large screens ===== */
@media (min-width: 992px) {
  .card-inner.is-fiction .card-visual.is-custom-820 {
    height: auto !important; /* overrides the 41rem */
    aspect-ratio: 1 / 1; /* 1024x1024 */
    max-height: none; /* remove the cap on big screens */
    background: #f3f3f3;
    overflow: hidden;
    position: relative;
  }

  .card-inner.is-fiction .card-visual.is-custom-820 .img-cover {
    position: absolute; /* keep absolute */
    inset: 1.2rem; /* ✅ creates “padding” without scaling */
    width: calc(100% - 2.4rem);
    height: calc(100% - 2.4rem);
    object-fit: contain !important; /* ✅ never cut */
    object-position: center;
  }
}

/* Keep is-fiction card height consistent with other cards on smaller screens */
@media (max-width: 991px) {
  .card-inner.is-fiction .card-visual.is-custom-820 {
    height: 41rem; /* match other cards */
    max-height: none; /* remove the smaller cap */
    aspect-ratio: auto; /* let height drive size */
  }

  .card-inner.is-fiction .card-visual.is-custom-820 .img-cover {
    position: absolute;
    inset: 1.2rem; /* keeps padding */
    width: calc(100% - 2.4rem);
    height: calc(100% - 2.4rem);
    object-fit: contain; /* no cutting */
  }
}

/* Optional: if 41rem feels too tall on very small phones */
@media (max-width: 479px) {
  .card-inner.is-fiction .card-visual.is-custom-820 {
    height: 34rem;
  }
}

/* =========================
   S3 Actions: hide arrows + CTA, keep description visible (autoswitch stays)
   Put this at the bottom of assistant.css
========================= */

/* hide left/right arrows + Learn more */
.s3Actions .s3Arrow,
.s3Actions #s3Cta {
  display: none !important;
}

/* keep the description text visible */
.s3Actions #s3Desc {
  display: block !important;
  margin: 0 !important;
  text-align: center; /* change to left if you want */
}

/* prevent layout collapse / center the text */
.s3Actions {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Keep image from stretching */
.preview__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fit;
  object-position: center;
}

/* Mobile: lock the stage to the image aspect ratio (1183×1280) */
@media (max-width: 767px) {
  .hero__right .preview {
    height: auto !important;
  }

  .preview__stage.preview__stage--img {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 1183 / 1280; /* ✅ matches your image */
    padding: 0 !important;
  }
}