/* The landing page's second version (index-avatar.html): one AI-made virtual guide walks the visitor down the page
   and points at what to do next: the quiz, the steps, the price, the closing call to action. Loaded after site.css
   and scoped to body.av, so the quiz, result and lead form keep site.css as they are.
   The guide is a cut-out (transparent AVIF/WebP); every appearance carries a visible "virtual guide, made with AI"
   tag, and the footer says he is not a client, an employee or the credit professional. */

.av {
  --av-glow: oklch(0.89 0.175 122 / 0.26);
}

/* ---- the tag every appearance carries ------------------------------------------------------- */

.av-tag {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 9px;
  border-radius: 999px;
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-1);
  color: var(--lime-ink);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.av-tag::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 1.5px var(--lime-ink);
}

.av-tag--hero,
.av-tag--dark {
  background: oklch(0.2 0.04 168 / 0.72);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.18);
  color: oklch(1 0 0 / 0.92);
}

.av-tag--hero::before,
.av-tag--dark::before {
  box-shadow: none;
}

/* ---- a figure of the guide in the page ------------------------------------------------------ */

.av-fig {
  position: relative;
  margin: 0;
  pointer-events: none;
}

.av-fig picture {
  display: block;
}

.av-fig img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- hero: the guide in place of the photo ---------------------------------------------------- */

/* the guide's glow reaches past the screen edge; clip it sideways only, so he can still stand behind the card */
.av .stage {
  overflow-x: clip;
}

/* Phones: headline on the start side, the guide on the end side pointing down at the quiz card, which overlaps his
   lower half (the card sits above the band). */
.av .av-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 41%;
  align-items: end;
  column-gap: 2px;
  padding: 2px var(--gutter) 0;
}

.av .av-hero .hero__text {
  padding: 0 0 18px;
  align-self: center;
}

.av .av-hero .hero__title {
  font-size: clamp(1.72rem, 1.05rem + 3vw, 3.3rem);
  max-width: 14ch;
}

.av .av-hero .hero__sub {
  font-size: 0.95rem;
}

/* The small line under the headline (owner, 26.10.2026): small loans and millions alike, the key words in a marker
   highlight of the spirit-level lime, dark ink on it for contrast. */
.av .av-hero .hero__note {
  margin-top: 10px;
  color: var(--on-deep-soft);
  font-size: 0.92rem;
  line-height: 1.5;
}

.hl {
  padding: 0.04em 0.28em;
  border-radius: 3px 6px 4px 7px;
  background: var(--copper);
  color: var(--brand-deep);
  font-weight: 700;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.av-hero__guide {
  position: relative;
  z-index: 0;
  margin: 0 -8px -60px 0;
  margin-inline-end: calc(var(--gutter) * -0.5);
  align-self: end;
}

.av-hero__guide::before {
  content: "";
  position: absolute;
  inset: 4% -18% 8%;
  z-index: -1;
  background: radial-gradient(closest-side, var(--av-glow), transparent);
}

.av-hero__guide picture {
  display: block;
}

.av-hero__img {
  display: block;
  width: 100%;
  height: auto;
  animation: av-hero-in 1100ms var(--ease-quint) both;
}

@keyframes av-hero-in {
  from {
    transform: translateY(18px);
  }
}

/* phones: just above the card's top edge, over his side, clear of the headline */
.av-tag--hero {
  bottom: 52px;
  inset-inline-end: 0;
  font-size: 0.66rem;
}

/* ---- steps: the guide stands beside the heading and points at the steps ---------------------- */

.av .av-how {
  position: relative;
  overflow: hidden;
}

.av .av-how h2 {
  padding-inline-end: 36%;
}

.av-fig--how {
  position: absolute;
  top: 26px;
  inset-inline-end: -6px;
  width: 42%;
  max-width: 200px;
}

.av-fig--how .av-tag {
  bottom: 20%;
  inset-inline-end: 8px;
  background: oklch(0.2 0.04 168 / 0.72);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.18);
  color: oklch(1 0 0 / 0.92);
}

.av-fig--how .av-tag::before {
  box-shadow: none;
}

/* ---- price: the guide on the start side, pointing at the card -------------------------------- */

.av .av-price {
  position: relative;
  overflow: hidden;
}

.av .av-price h2 {
  padding-inline-start: 38%;
}

.av-fig--price {
  position: absolute;
  top: 22px;
  inset-inline-start: -4px;
  width: 42%;
  max-width: 200px;
}

/* phones: above his head, since the card overlaps his lower half */
.av-fig--price .av-tag {
  top: -4px;
  inset-inline-start: 2px;
}

.av .av-price .price__grid {
  position: relative;
  z-index: 1;
}

/* price-lines arrive from the config; no figure is styled as a headline number here */
.av .price__lines li:first-child {
  font-size: 1.05rem;
}

/* ---- talk: the guide's portrait, head out of the circle ----------------------------------------- */

.av-talk__face {
  position: relative;
  width: 116px;
  aspect-ratio: 1 / 1.18;
  border-radius: 0 0 999px 999px;
  overflow: hidden;
  isolation: isolate;
}

.av-talk__face::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  aspect-ratio: 1;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 30%, oklch(1 0 0 / 0.55), transparent 60%),
    var(--lime);
}

.av .av-talk__face img {
  position: absolute;
  inset: auto 0 0;
  width: 100%;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.av .av-talk .talk__tag {
  color: var(--lime-ink);
}

/* ---- questions: the guide approves, beside the heading ---------------------------------------- */

.av-faq__head {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.av-fig--faq {
  flex: none;
  width: 32%;
  max-width: 150px;
  margin-bottom: -18px;
}

.av-fig--faq .av-tag {
  bottom: 24%;
  inset-inline-end: 0;
}

/* ---- closing: the guide welcomes, the button under his open arms ------------------------------- */

.av .av-closing {
  position: relative;
  overflow: hidden;
  padding-top: 28px;
}

.av-fig--closing {
  width: min(78vw, 340px);
  margin-bottom: -6px;
}

.av-fig--closing::before {
  content: "";
  position: absolute;
  inset: 0 -10% 10%;
  z-index: -1;
  background: radial-gradient(closest-side, var(--av-glow), transparent);
}

.av-fig--closing .av-tag {
  top: 4%;
  inset-inline-start: 0;
}

/* a figure that stops mid-body fades out at the bottom; the mask sits on the image, so the tag stays whole */
.av-fig--how picture,
.av-fig--price picture,
.av-fig--closing picture {
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 96%);
}

.av-fig--faq picture {
  -webkit-mask-image: linear-gradient(to bottom, #000 66%, transparent 98%);
  mask-image: linear-gradient(to bottom, #000 66%, transparent 98%);
}

.av-notice {
  color: var(--ink-soft);
}

/* ---- the guide steps in as each section scrolls into view (where the browser can, and motion is welcome) */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .av-fig picture {
      animation: av-step-in linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 70%;
    }
  }
}

@keyframes av-step-in {
  from {
    transform: translateY(28px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .av-hero__img {
    animation: none;
  }
}

/* ---- larger screens ---------------------------------------------------------------------------- */

@media (min-width: 720px) {
  .av .av-hero {
    grid-template-columns: minmax(0, 1fr) 36%;
  }

  .av-tag--hero {
    font-size: 0.72rem;
  }

  .av .av-how h2 {
    padding-inline-end: 30%;
  }

  .av .av-price h2 {
    padding-inline-start: 30%;
  }

  .av-talk__face {
    width: 168px;
  }

  .av-fig--faq {
    max-width: 180px;
  }
}

@media (min-width: 980px) {
  /* Wide screens: headline first, then the guide large at the bottom of the band, pointing across at the quiz card,
     with the two product chips beside him. */
  .av .av-hero {
    display: flex;
    flex-direction: column;
    padding: 36px 0 0;
    padding-inline-end: 24px;
  }

  .av .av-hero .hero__text {
    padding: 0;
    align-self: stretch;
  }

  .av .av-hero .hero__title {
    max-width: 18ch;
  }

  .av .av-hero .hero__sub {
    font-size: 1rem;
  }

  .av .av-hero .hero__note {
    margin-top: 14px;
    font-size: 1.05rem;
  }

  .av-hero__guide {
    order: 2;
    width: min(100%, 430px);
    margin: 22px 0 0;
    margin-inline-start: auto;
    margin-inline-end: 0;
    align-self: flex-end;
  }

  .av-hero__guide::before {
    inset: 6% -14% 0;
  }

  .av-tag--hero {
    top: auto;
    bottom: 22px;
    inset-inline-end: auto;
    inset-inline-start: 4px;
  }

  .av .av-hero .hero__chip--plan {
    top: 26%;
    inset-inline-start: -172px;
  }

  .av .av-hero .hero__chip--flow {
    top: 44%;
    bottom: auto;
    inset-inline-start: -150px;
  }

  /* steps: a 2 by 2 grid on the start side, the guide on the end side standing on the section's lower edge */
  .av .after > .av-how {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    column-gap: 32px;
    align-items: end;
    padding-bottom: 0;
  }

  .av-how__main {
    padding-bottom: 96px;
  }

  .av .av-how h2 {
    padding-inline-end: 0;
  }

  .av .av-how .how__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 44px 36px;
  }

  .av .av-how .how__step:nth-child(even)::before {
    display: none;
  }

  .av-fig--how {
    position: relative;
    top: auto;
    inset-inline-end: auto;
    width: 100%;
    max-width: none;
  }

  .av-fig--how::before {
    content: "";
    position: absolute;
    inset: 8% -12% 0;
    z-index: -1;
    background: radial-gradient(closest-side, oklch(0.89 0.175 122 / 0.16), transparent);
  }

  .av-fig--how .av-tag {
    bottom: 26px;
  }

  /* price: the guide on the start side, standing on the lower edge, pointing at the card */
  .av .after > .av-price {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    column-gap: 28px;
    align-items: end;
    padding-bottom: 0;
  }

  .av-price__main {
    padding-bottom: 96px;
  }

  .av .av-price h2 {
    padding-inline-start: 0;
  }

  .av-fig--price {
    position: relative;
    top: auto;
    inset-inline-start: auto;
    width: 100%;
    max-width: none;
  }

  .av-fig--price .av-tag {
    top: auto;
    bottom: 26px;
  }

  /* the figures that stand on a section's lower edge need no fade there */
  .av-fig--how picture,
  .av-fig--price picture,
  .av-fig--closing picture {
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* questions: the heading column holds the guide under the title */
  .av-faq__head {
    display: grid;
    justify-items: start;
    gap: 28px;
  }

  .av-fig--faq {
    width: 260px;
    max-width: none;
    margin-bottom: 0;
  }

  .av-fig--faq .av-tag {
    bottom: 22%;
    inset-inline-end: auto;
    inset-inline-start: 0;
  }

  /* closing: text on the start side, the welcoming guide on the end side */
  .av .after > .av-closing {
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-rows: 1fr auto auto auto 1fr;
    column-gap: 48px;
    justify-items: start;
    text-align: start;
    padding-top: 56px;
    padding-bottom: 0;
  }

  .av .av-closing > :not(.av-fig) {
    grid-column: 1;
  }

  .av .av-closing h2 {
    grid-row: 2;
  }

  .av .av-closing > p {
    grid-row: 3;
  }

  .av .av-closing .btn {
    grid-row: 4;
  }

  .av-fig--closing {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: end;
    width: 100%;
    margin-bottom: 0;
  }
}