/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
  color-scheme: light;

  /* Tier 1: literal tokens */
  --color-black: #1a1a1a;
  --color-white: #ffffff;
  --color-gray-90: #2b2b2b;
  --color-gray-40: #d9d9d9;
  --font-sans: "Noto Sans JP", sans-serif;
  --font-serif: "Noto Serif JP", serif;

  /* Tier 2: semantic tokens */
  --color-text: var(--color-black);
  --color-text-on-media: var(--color-black);
  --color-placeholder-bg: var(--color-gray-40);
  --font-heading: var(--font-serif);
  --font-body: var(--font-sans);

  /* Layout */
  --content-max-width: 1200px;
  --content-padding-inline: 2.4rem;

  /* Section-specific colors */
  --color-step-badge-bg: #117a96;
  --color-cta-bg: #4b5395;
  --color-arrow: #64c1d1;
  --color-support-bg: #d9edfb;
  --color-divider: #e0e0e0;
}

html {
  font-size: 62.5%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.5;
}

img {
  max-width: 100%;
  display: block;
}

/* Responsive utilities */
.br-sp,
.br-pc {
  display: none;
}

@media (max-width: 767px) {
  .br-sp {
    display: inline;
  }
}

@media (min-width: 768px) {
  .br-pc {
    display: inline;
  }
}

/* ==========================================================================
   KV (key visual)
   ========================================================================== */
.kv {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}

@media (min-width: 768px) {
  .kv {
    aspect-ratio: 16 / 5;
  }
}

.kv__curve {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 127.48;
  fill: var(--color-white);
}

.kv__media {
  position: absolute;
  inset: 0;
}

.kv__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kv__inner {
  position: relative;
  z-index: 1;
}

.kv__title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ===========================================================================
   家族の笑顔があふれる旅
   =========================================================================== */
.recommend {
  overflow: hidden;
}

.recommend__inner {
  container-type: inline-size;
  max-width: 124.8rem;
  margin-inline: auto;
  padding: 0.4rem 2.4rem 5.4rem;
}

.recommend__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.recommend__eyebrow {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: 0.31em;
}

.recommend__rule {
  width: 5.2rem;
  height: 0.4rem;
  margin-block: 1.2rem 1.6rem;
  background-color: var(--color-arrow);
}

.recommend__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.35;
}

.recommend__lead {
  margin: 1.4rem 0 0;
  font-size: 1.4rem;
  line-height: 1.7;
}

.recommend__stories {
  display: flex;
  flex-direction: column;
  gap: 4.8rem;
  margin-block: 6.4rem;
}

.recommend-story {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.recommend-story__visuals {
  position: relative;
  width: 100%;
  aspect-ratio: 640 / 455;
}

.recommend-story__photo {
  position: absolute;
  object-fit: cover;
  border-radius: 0.5rem;
}

.recommend-story--hakodate .recommend-story__photo--main,
.recommend-story--tokyo .recommend-story__photo--main,
.recommend-story--okinawa .recommend-story__photo--main {
  top: 0;
  left: 0;
  width: 77.5%;
  aspect-ratio: 496 / 338;
}

.recommend-story--hakodate .recommend-story__photo--detail,
.recommend-story--tokyo .recommend-story__photo--detail,
.recommend-story--okinawa .recommend-story__photo--detail {
  top: 64.86%;
  right: 0;
  width: 50%;
  aspect-ratio: 320 / 230;
}

.recommend-story__content {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.recommend-story__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.recommend-story__description {
  margin: 0;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  line-height: 1.64;
}

.recommend-story__place {
  position: absolute;
  display: grid;
  grid-template-columns: 1.55rem 1fr;
  gap: 0.4rem 0.45rem;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-block-start: 1.4rem;
  border-block-start: 1px solid var(--color-arrow);
}

.recommend-story__place::before {
  content: "";
  position: absolute;
  top: 1.4rem;
  left: 0;
  width: 1.55rem;
  height: 2.1rem;
  background-color: var(--color-arrow);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 42'%3E%3Cpath fill-rule='evenodd' d='M15.5 0C6.94 0 0 6.94 0 15.5C0 27.13 15.5 42 15.5 42S31 27.13 31 15.5C31 6.94 24.06 0 15.5 0ZM15.5 7A8.5 8.5 0 1 1 15.5 24 8.5 8.5 0 0 1 15.5 7Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 42'%3E%3Cpath fill-rule='evenodd' d='M15.5 0C6.94 0 0 6.94 0 15.5C0 27.13 15.5 42 15.5 42S31 27.13 31 15.5C31 6.94 24.06 0 15.5 0ZM15.5 7A8.5 8.5 0 1 1 15.5 24 8.5 8.5 0 0 1 15.5 7Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.recommend-story__place p {
  margin: 0;
}

.recommend-story__place p:first-child {
  grid-column: 2;
  color: #404040;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

.recommend-story__place p:last-child {
  grid-column: 1 / -1;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

.recommend__cta {
  margin-inline: auto;
}

.recommend__wave {
  display: block;
  width: 100vw;
  max-width: none;
  height: auto;
  margin-inline: calc(50% - 50vw);
}

@media (max-width: 767px) {
  .recommend .recommend__cta {
    width: 100%;
    max-width: 32rem;
    height: 5rem;
    padding-inline: 1.4rem;
    font-size: 1.3rem;
    letter-spacing: 0.05em;
  }

  .recommend-story__content {
    position: relative;
    padding-block-start: 3rem;
    padding-block-end: 7rem;
  }
}

@media (min-width: 768px) {
  .recommend__wave {
    display: none;
  }

  .recommend__inner {
    padding-block: 2.667cqi 5.667cqi;
  }

  .recommend__eyebrow {
    font-size: calc(1.5cqi + 1.8rem - 18px);
  }

  .recommend__rule {
    width: 6.333cqi;
    height: 0.333cqi;
    margin-block: 1.333cqi 1.833cqi;
  }

  .recommend__title {
    font-size: calc(3.333cqi + 4rem - 40px);
  }

  .recommend__lead {
    margin-block-start: 1.167cqi;
    font-size: calc(1.5cqi + 1.8rem - 18px);
    line-height: calc(2.5cqi + 3rem - 30px);
  }

  .recommend__stories {
    gap: 10cqi;
    margin-block: 6.667cqi;
  }

  .recommend-story {
    display: block;
    height: calc(51.75cqi + 85rem - 850px);
  }

  .recommend-story__visuals {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }

  .recommend-story__content {
    position: absolute;
    z-index: 1;
    width: 51.75cqi;
    gap: 1.667cqi;
  }

  .recommend-story--hakodate .recommend-story__content,
  .recommend-story--okinawa .recommend-story__content {
    top: 14.583cqi;
    right: 0;
    align-items: flex-end;
  }

  .recommend-story--tokyo .recommend-story__content {
    top: 14.583cqi;
    left: 0;
    align-items: flex-start;
  }

  .recommend-story--hakodate .recommend-story__photo--main,
  .recommend-story--okinawa .recommend-story__photo--main {
    top: 0;
    left: 0;
    width: 43.75cqi;
    aspect-ratio: 3 / 2;
  }

  .recommend-story--tokyo .recommend-story__photo--main {
    top: 6.25cqi;
    right: auto;
    left: 49.167cqi;
    width: 43.75cqi;
    aspect-ratio: 3 / 2;
  }

  .recommend-story--hakodate .recommend-story__photo--detail,
  .recommend-story--okinawa .recommend-story__photo--detail {
    top: 26.5cqi;
    right: auto;
    left: 16.667cqi;
    width: 33.333cqi;
    aspect-ratio: 3 / 2;
  }

  .recommend-story--tokyo .recommend-story__photo--detail {
    top: 32.75cqi;
    right: auto;
    left: 66.667cqi;
    width: 33.333cqi;
    aspect-ratio: 3 / 2;
  }

  .recommend-story__title {
    width: 46cqi;
    font-size: calc(3.333cqi + 4rem - 40px);
    line-height: 1.35;
  }

  .recommend-story__description {
    width: 46cqi;
    font-size: calc(1.333cqi + 1.6rem - 16px);
    letter-spacing: 0.1em;
    line-height: calc(2.5cqi + 3rem - 30px);
  }

  .recommend-story__place {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.25cqi;
    width: 51.75cqi;
    padding-block-start: 2.167cqi;
    padding-block-end: calc(0.4rem - 4px);
    padding-inline-start: 2.25cqi;
    border-block-start: 0;
  }

  .recommend-story__place::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    background-color: var(--color-arrow);
  }

  .recommend-story--hakodate .recommend-story__place::after,
  .recommend-story--okinawa .recommend-story__place::after {
    left: 1.833cqi;
  }

  .recommend-story--hakodate .recommend-story__place,
  .recommend-story--okinawa .recommend-story__place {
    padding-inline-start: 6.75cqi;
  }

  .recommend-story--hakodate .recommend-story__place::before,
  .recommend-story--okinawa .recommend-story__place::before {
    left: 4.5cqi;
  }

  .recommend-story--tokyo .recommend-story__place::after {
    right: 2.5cqi;
  }

  .recommend-story__place::before {
    top: 2.167cqi;
    left: 0;
    width: 1.667cqi;
    height: 2.25cqi;
  }

  .recommend-story__place p:first-child {
    grid-column: auto;
    font-size: calc(1.5cqi + 1.8rem - 18px);
    line-height: calc(2cqi + 2.4rem - 24px);
  }

  .recommend-story__place p:last-child {
    grid-column: auto;
    font-size: calc(1.5cqi + 1.8rem - 18px);
    line-height: calc(2cqi + 2.4rem - 24px);
  }

  .recommend__cta {
    margin-inline: auto;
  }
}

/* ==========================================================================
   Shared section head
   ========================================================================== */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  text-align: center;
}

.section-head__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 2.4rem;
  letter-spacing: 0.1em;
  text-wrap: balance;
}

.section-head__lead {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .section-head__title {
    font-size: 4rem;
  }

  .section-head__lead {
    font-size: 1.8rem;
    line-height: 1.7;
  }
}

/* ==========================================================================
   この旅を、ANAがトータルサポート
   ========================================================================== */
.support {
  --support-curve-height: calc(6.6395833333vw - 3px);
  background: linear-gradient(
    to bottom,
    transparent var(--support-curve-height),
    var(--color-support-bg) var(--support-curve-height)
  );
}

.support__curve {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 127.48;
  background-color: transparent;
  fill: var(--color-support-bg);
}

.support__curve--bottom {
  background-color: #f4f8fc;
}

.support__inner {
  container-type: inline-size;
  max-width: 1446px;
  margin-inline: auto;
  padding-block: 4.8rem;
  padding-inline: var(--content-padding-inline);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
}

.support__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5rem;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.support-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  border-radius: 0.8rem;
  filter: drop-shadow(4px 4px 5px rgba(0, 0, 0, 0.12));
  overflow: hidden;
}

.support-card__photo-frame {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.support-card__photo {
  flex: 0 0 108%;
  width: 108%;
  height: 108%;
  max-width: none;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.support-card__body {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 1rem 1.5rem 1.6rem;
}

.support-card__head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.support-card__dot {
  flex: 0 0 auto;
  inline-size: 1.6rem;
  block-size: 1.6rem;
  background-color: var(--color-arrow);
}

.support-card__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 1.3;
}

.support-card__subtitle {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.4rem;
}

.support-card__divider {
  width: 100%;
  margin: 0;
  border: none;
  border-block-start: 1px solid var(--color-divider);
}

.support-card__desc {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.7;
  text-wrap: pretty;
}

.support-card__note {
  display: inline-block;
  margin-block-start: 0.8rem;
  font-size: 1.2rem;
  color: var(--color-gray-90);
}

.support-card__cta {
  align-self: center;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr auto 1fr;
  inline-size: 76%;
  margin-block-start: 0.8rem;
  padding-block: 1.3rem;
  padding-inline: 2.4rem;
  border-radius: 999px;
  background-color: var(--color-cta-bg);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 1.6rem;
  text-decoration: none;
  white-space: nowrap;
}

.support-card__cta > span:first-child {
  grid-column: 2;
}

.support-card__cta-icon {
  grid-column: 3;
  justify-self: end;
  position: relative;
  inline-size: 1.4rem;
  block-size: 2.8rem;
}

.support-card__cta-icon::before,
.support-card__cta-icon::after {
  content: "";
  position: absolute;
  inset-inline-start: -20.711%;
  inline-size: 141.421%;
  block-size: 2px;
  background-color: currentColor;
  transform-origin: center;
}

.support-card__cta-icon::before {
  inset-block-start: calc(25% - 1px);
  transform: rotate(45deg);
}

.support-card__cta-icon::after {
  inset-block-start: calc(75% - 1px);
  transform: rotate(-45deg);
}

@media (max-width: 767px) {
  .support-card__cta {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 0.8rem;
    white-space: normal;
  }

  .support-card__cta > span:first-child {
    grid-column: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: center;
  }

  .support-card__cta-icon {
    grid-column: 2;
  }

  .support-card__cta-icon::before {
    inset-block-start: 0.7rem;
    inset-inline-start: auto;
    inset-inline-end: 0;
    inline-size: 1.4rem;
    block-size: 1.4rem;
    border-block-start: 2px solid currentColor;
    border-inline-end: 2px solid currentColor;
    background-color: transparent;
    transform: rotate(45deg);
  }

  .support-card__cta-icon::after {
    content: none;
  }
}

@media (min-width: 768px) {
  .support__inner {
    padding: 0;
    gap: 8rem;
  }

  .support .section-head {
    flex: 0 0 auto;
    width: 100%;
    min-height: calc(6.155cqi + 8.9rem - 89px);
    height: auto;
    gap: 0.968cqi;
  }

  .support .section-head__title {
    width: 100%;
    min-height: 3.734cqi;
    height: auto;
    font-size: calc(2.767cqi + 4rem - 40px);
    font-weight: 500;
    line-height: calc(3.734cqi + 5.4rem - 54px);
    letter-spacing: 0.1em;
    white-space: nowrap;
  }

  .support .section-head__lead {
    width: 100%;
    font-size: calc(1.245cqi + 1.8rem - 18px);
    line-height: calc(2.075cqi + 3rem - 30px);
  }

  .support__list {
    grid-template-columns: repeat(4, 21.577cqi);
    gap: 4.564cqi;
    min-height: 38.866cqi;
    height: auto;
  }

  .support-card {
    width: 100%;
    min-height: 38.866cqi;
    height: auto;
    border-radius: 1.2rem;
  }

  .support-card__photo {
    width: 108%;
    height: 108%;
    aspect-ratio: auto;
  }

  .support-card__photo-frame {
    flex: 0 0 11.618cqi;
  }

  .support-card:nth-child(1) .support-card__photo {
    object-position: 50% 43%;
  }

  .support-card:nth-child(2) .support-card__photo {
    object-position: 50% 38%;
  }

  .support-card:nth-child(3) .support-card__photo {
    object-position: 50% 50%;
  }

  .support-card:nth-child(4) .support-card__photo {
    object-position: 50% 42%;
  }

  .support-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.5cqi;
    width: 100%;
    min-height: 0;
    padding: 1.383cqi 1.349cqi 3.043cqi;
  }

  .support-card__head {
    width: 18.88cqi;
  }

  .support-card__title {
    font-size: calc(1.66cqi + 2.4rem - 24px);
    font-weight: 500;
    line-height: calc(1.591cqi + 3.5rem - 35px);
  }

  .support-card__subtitle {
    width: 18.88cqi;
    font-size: calc(1.107cqi + 1.6rem - 16px);
    font-weight: 500;
    line-height: calc(1.867cqi + 2.7rem - 27px);
  }

  .support-card__divider {
    width: 18.88cqi;
    border-block-start-color: var(--color-arrow);
  }

  .support-card__desc {
    width: 18.88cqi;
    font-size: calc(1.107cqi + 1.6rem - 16px);
    line-height: 1.875;
  }

  .support-card__note {
    margin-block-start: 0;
    font-size: calc(0.968cqi + 1.4rem - 14px);
    line-height: calc(1.66cqi + 2.4rem - 24px);
  }

  .support-card__cta {
    align-self: center;
    width: min(100%, 18.88cqi);
    min-height: 4.426cqi;
    margin-block-start: auto;
    padding-inline: 0.7cqi 1.1cqi;
    border-radius: 3.2rem;
    font-size: calc(1.245cqi + 1.8rem - 18px);
    line-height: normal;
  }

  .support-card__cta-icon {
    --support-card-cta-arrow-inline-size: clamp(0.7rem, 0.553cqi, 0.8rem);
    --support-card-cta-arrow-block-size: clamp(1.4rem, 1.107cqi, 1.6rem);
    inline-size: var(--support-card-cta-arrow-inline-size);
    block-size: var(--support-card-cta-arrow-block-size);
  }
}

.steps {
  background-color: #f4f8fc;
}

.steps__inner {
  container-type: inline-size;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-block: 6.4rem;
  padding-inline: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
}

.steps__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  width: 100%;
  max-width: 23rem;
  text-align: center;
}

.step__photo {
  width: 23rem;
  height: 16.2rem;
  border-radius: 0.4rem;
  object-fit: cover;
}

.step__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.step__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
}

.step__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 1.8;
  white-space: nowrap;
}

.step__divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-arrow);
}

.step__desc {
  margin: 0;
  font-size: 1.4rem;
  line-height: 2.15;
  text-wrap: pretty;
}

.steps__booking-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 2.1rem;
  font-weight: 500;
  line-height: normal;
  text-align: center;
}

.steps__booking-module {
  width: 100%;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .steps__inner {
    padding-block: 8rem;
    padding-inline: 0;
    gap: clamp(4.8rem, 6.667vw, 8rem);
  }

  .steps .section-head {
    gap: 1.167cqi;
    width: 100%;
    min-height: 7.417cqi;
    height: auto;
  }

  .steps .section-head__title {
    font-size: calc(3.333cqi + 4rem - 40px);
    font-weight: 500;
    line-height: calc(4.5cqi + 5.4rem - 54px);
  }

  .steps .section-head__lead {
    font-size: calc(1.5cqi + 1.8rem - 18px);
    line-height: calc(2.5cqi + 3rem - 30px);
  }

  .steps__list {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 4cqi;
    width: 100%;
  }

  .step {
    gap: 2.583cqi;
    width: 30cqi;
    max-width: none;
  }

  .step__photo {
    width: 28.333cqi;
    height: 20cqi;
    border-radius: 0.4rem;
  }

  .step__text {
    gap: 0.667cqi;
  }

  .step__title {
    font-size: calc(2cqi + 2.4rem - 24px);
    font-weight: 500;
    line-height: calc(3cqi + 3.6rem - 36px);
    white-space: normal;
  }

  .step__desc {
    font-size: calc(1.333cqi + 1.6rem - 16px);
    line-height: calc(2.5cqi + 3rem - 30px);
  }

  .steps__booking-title {
    font-size: 3.2rem;
    letter-spacing: 0.1em;
  }
}

/* ========================================================================== 
   Recommend CTA
   ========================================================================== */
.recommend__cta {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr auto 1fr;
  width: 100%;
  max-width: 32rem;
  height: 5rem;
  padding-inline: 1.4rem;
  border-radius: 0.5rem;
  background-color: #4b5395;
  box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.12);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: normal;
  text-align: center;
  text-decoration: none;
}

.recommend__cta > span:first-child {
  grid-column: 2;
  white-space: nowrap;
}

.recommend__cta-icon {
  grid-column: 3;
  justify-self: end;
  position: relative;
  inline-size: 0.75rem;
  block-size: 0.75rem;
}

.recommend__cta-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-block-start: 2px solid currentColor;
  border-inline-end: 2px solid currentColor;
  transform: rotate(45deg);
}

.recommend__cta:focus-visible {
  outline: 3px solid #1a73e8;
  outline-offset: 3px;
}

@media (min-width: 768px) {
  .recommend__cta {
    max-width: none;
    padding-inline: 3.6rem;
    border-radius: 1rem;
    font-size: 2.2rem;
    letter-spacing: 0.22rem;
  }

  .recommend__cta-icon {
    inline-size: 1.5rem;
    block-size: 1.5rem;
  }

  .recommend__cta {
    width: min(100%, calc(50cqi + 60rem - 600px));
    min-height: calc(6.667cqi + 8rem - 80px);
    height: auto;
    font-size: calc(1.833cqi + 2.2rem - 22px);
    letter-spacing: 0.183cqi;
  }
}