.dial-page .pinned-container {
  position: relative;
}

.quao-dial-css-titles {
  position: fixed;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.quao-dial-css-title {
  position: absolute;
  top: clamp(220px, 43vh, 430px);
  left: 50%;
  width: min(74vw, 780px);
  display: flex;
  justify-content: center;
  transform: translate(-50%, -50%) scale(0.94);
  opacity: 0;
  transition:
    opacity 0.34s ease,
    transform 0.48s var(--custom-ease-in-out, cubic-bezier(0.56, 0.01, 0.17, 0.98));
}

.quao-dial-css-title.is-active {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.quao-dial-css-titles.is-dial-open {
  opacity: 0;
}

.dial-disabled .quao-dial-css-titles,
.menu-open .quao-dial-css-titles,
.search-menu-open .quao-dial-css-titles,
.has-newsletter-popup .quao-dial-css-titles {
  opacity: 0;
}

.quao-dial-title {
  --qt-title-bg: rgba(189, 52, 92, 0.94);
  --qt-title-ink: #fffaf4;
  --qt-title-shadow: rgba(91, 27, 51, 0.24);
  --qt-title-font: "Be Vietnam Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  display: inline-flex;
  max-width: 100%;
  color: var(--qt-title-ink);
  font-family: var(--qt-title-font);
  letter-spacing: 0;
  text-align: center;
}

.quao-dial-title__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.quao-dial-title__line {
  display: block;
  font-family: var(--qt-title-font) !important;
  letter-spacing: 0 !important;
}

.quao-dial-title--ribbon .quao-dial-title__label {
  position: relative;
  isolation: isolate;
  flex-direction: column;
  gap: 0.01em;
  min-width: clamp(350px, 34vw, 620px);
  min-height: clamp(88px, 8.8vh, 126px);
  border: 3px solid rgba(255, 250, 244, 0.5);
  border-radius: 34px 22px 31px 25px / 25px 34px 22px 31px;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.13), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(55, 12, 30, 0.06)),
    var(--qt-title-bg);
  box-shadow:
    0 18px 34px var(--qt-title-shadow),
    0 2px 0 rgba(255, 255, 255, 0.11),
    inset 0 -8px 0 rgba(78, 17, 39, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  clip-path: polygon(2.8% 7%, 96.4% 0, 100% 77%, 96.1% 98%, 3.5% 93%, 0 20%);
  overflow: hidden;
  padding:
    clamp(22px, 1.85vw, 34px)
    clamp(72px, 6.7vw, 128px)
    clamp(24px, 1.95vw, 36px);
  transform: rotate(-1.1deg) skewX(-1.4deg);
}

.quao-dial-title--ribbon .quao-dial-title__label::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    repeating-linear-gradient(92deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(-8deg, rgba(86, 20, 44, 0.05) 0 1px, transparent 1px 12px);
  content: "";
  mix-blend-mode: soft-light;
  opacity: 0.56;
}

.quao-dial-title--ribbon .quao-dial-title__label::after {
  position: absolute;
  inset: 8% 2.3% 10% 2.8%;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 25px 17px 24px 18px / 18px 25px 16px 24px;
  clip-path: polygon(1.2% 12%, 98.2% 2%, 98.6% 86%, 4.2% 100%, 0 26%);
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.16), transparent 24%),
    radial-gradient(circle at 78% 70%, rgba(255, 255, 255, 0.1), transparent 28%);
  content: "";
  opacity: 0.72;
}

.quao-dial-title--ribbon .quao-dial-title__line {
  position: relative;
  z-index: 1;
  color: #fffaf4;
  font-size: clamp(2.25rem, 4.3vw, 5.05rem);
  font-weight: 900;
  line-height: 0.8;
  text-shadow:
    0 0.04em 0 rgba(255, 255, 255, 0.18),
    0 0.09em 0 rgba(91, 23, 48, 0.08),
    0 0.14em 0.2em rgba(79, 18, 39, 0.2);
  text-transform: uppercase;
  white-space: nowrap;
  transform: skewX(1deg);
}

.quao-dial-title--script .quao-dial-title__label {
  display: grid;
  gap: 0.04em;
  font-family: var(--qt-title-font);
  transform: rotate(-1.5deg);
}

.quao-dial-title--script .quao-dial-title__line {
  color: var(--qt-title-ink);
  font-family: var(--qt-title-font) !important;
  font-size: clamp(2.8rem, 6.8vw, 7.4rem);
  font-weight: 900;
  line-height: 0.88;
  text-shadow:
    0 7px 20px rgba(255, 217, 0, 0.2),
    0 2px 0 rgba(255, 255, 255, 0.3);
}

.quao-dial-title--green {
  --qt-title-bg: rgba(47, 134, 190, 0.94);
  --qt-title-ink: #2f86be;
  --qt-title-shadow: rgba(47, 134, 190, 0.22);
}

.quao-dial-title--rose {
  --qt-title-bg: rgba(47, 134, 190, 0.94);
  --qt-title-ink: #2f86be;
  --qt-title-shadow: rgba(23, 63, 99, 0.24);
}

.quao-dial-title--blue {
  --qt-title-bg: rgba(47, 134, 190, 0.94);
  --qt-title-ink: #2f86be;
  --qt-title-shadow: rgba(33, 91, 132, 0.24);
}

.quao-dial-title--purple {
  --qt-title-bg: rgba(31, 99, 143, 0.94);
  --qt-title-ink: #1f638f;
  --qt-title-shadow: rgba(23, 63, 99, 0.24);
}

.quao-dial-title--red {
  --qt-title-bg: rgba(47, 134, 190, 0.94);
  --qt-title-ink: #2f86be;
  --qt-title-shadow: rgba(23, 63, 99, 0.24);
}

.quao-dial-title--brown {
  --qt-title-bg: rgba(23, 63, 99, 0.94);
  --qt-title-ink: #173f63;
  --qt-title-shadow: rgba(23, 63, 99, 0.24);
}

.quao-dial-svg-title {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  --qt-svg-title-font: var(--quaotea-font-sans, "Be Vietnam Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  color: rgba(255, 250, 244, 0.74);
  font-family: var(--qt-svg-title-font);
  opacity: 0.92;
  overflow: visible;
  pointer-events: none;
  transform: translateY(-2%);
}

.quao-dial-svg-title.layer-badge {
  transform: translateY(-2%) scale(1.01);
}

.quao-dial-svg-title__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.015em;
  color: inherit;
  line-height: 0.76;
  text-align: center;
  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.14),
    0 10px 28px rgba(70, 33, 55, 0.16);
  transform: translateY(-8%) rotate(-1.4deg);
}

.quao-dial-svg-title__badge {
  --qt-svg-title-bg: rgba(196, 61, 107, 0.9);
  --qt-svg-title-border: rgba(255, 250, 244, 0.48);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 0.01em;
  min-width: clamp(300px, 28vw, 620px);
  border: 3px solid var(--qt-svg-title-border);
  border-radius: 34px 20px 30px 22px / 21px 33px 20px 29px;
  background:
    linear-gradient(108deg, rgba(255, 255, 255, 0.14), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(58, 17, 33, 0.08)),
    var(--qt-svg-title-bg);
  box-shadow:
    0 14px 28px rgba(68, 21, 42, 0.18),
    inset 0 -7px 0 rgba(73, 17, 38, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  clip-path: polygon(2.2% 10%, 97.4% 0, 100% 77%, 96% 98%, 3% 91%, 0 21%);
  color: #fffaf4;
  font-family: "Be Vietnam Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow: hidden;
  padding:
    clamp(18px, 1.46vw, 31px)
    clamp(56px, 5.7vw, 118px)
    clamp(20px, 1.55vw, 34px);
  text-align: center;
  transform: translate(-50%, -50%) rotate(-1.7deg) skewX(-1.4deg);
}

.quao-dial-svg-title__badge::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    repeating-linear-gradient(92deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(-8deg, rgba(84, 22, 44, 0.06) 0 1px, transparent 1px 12px);
  content: "";
  mix-blend-mode: soft-light;
  opacity: 0.54;
}

.quao-dial-svg-title__badge::after {
  position: absolute;
  inset: 10% 2.6% 12% 2.8%;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 21px 14px 19px 15px / 15px 21px 14px 19px;
  clip-path: polygon(1% 14%, 98% 3%, 98.6% 84%, 4.5% 100%, 0 28%);
  content: "";
  opacity: 0.7;
}

.quao-dial-svg-title__badge-line {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  font-size: clamp(2.35rem, 4.7vw, 5.6rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.82;
  text-shadow:
    0 0.04em 0 rgba(255, 255, 255, 0.16),
    0 0.13em 0.2em rgba(79, 18, 39, 0.2);
  text-transform: uppercase;
  white-space: nowrap;
  transform: skewX(1.2deg);
}

.quao-dial-svg-title__line {
  display: block;
  max-width: 100%;
  color: inherit;
  font-family: var(--qt-svg-title-font) !important;
  font-size: clamp(3.7rem, 7.8vw, 10.2rem);
  font-feature-settings: "kern" 1, "liga" 1;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.84;
  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.14),
    0 9px 26px rgba(70, 33, 55, 0.16);
  white-space: nowrap;
}

.quao-dial-svg-title__backdrop .quao-dial-svg-title__line {
  font-size: clamp(4rem, 8.4vw, 10.8rem);
  opacity: 0.78;
  text-transform: none;
}

.quao-dial-svg-title.is-open.variant-ribbon .quao-dial-svg-title__line {
  font-size: clamp(4rem, 8.2vw, 10.2rem);
  text-transform: none;
}

.quao-dial-svg-title.is-open.variant-script .quao-dial-svg-title__badge {
  opacity: 0;
}

.quao-dial-svg-title.is-open.variant-script .quao-dial-svg-title__backdrop {
  opacity: 1;
}

.quao-dial-svg-title.is-open.tone-blue .quao-dial-svg-title__badge,
.quao-dial-svg-title.is-open.tone-green .quao-dial-svg-title__badge {
  --qt-svg-title-bg: rgba(47, 134, 190, 0.9);
  --qt-svg-title-border: rgba(255, 250, 244, 0.5);
}

.quao-dial-svg-title.is-open.tone-brown .quao-dial-svg-title__badge {
  --qt-svg-title-bg: rgba(112, 66, 40, 0.9);
}

.quao-dial-svg-title.is-open.tone-purple .quao-dial-svg-title__badge {
  --qt-svg-title-bg: rgba(90, 63, 124, 0.9);
}

.quao-dial-svg-title.is-open.tone-red .quao-dial-svg-title__badge {
  --qt-svg-title-bg: rgba(191, 60, 45, 0.9);
}

.quao-dial-svg-title.is-open.tone-blue,
.quao-dial-svg-title.is-open.tone-green {
  color: rgba(255, 255, 255, 0.74);
}

.quao-dial-svg-title.is-open.tone-brown,
.quao-dial-svg-title.is-open.tone-purple {
  color: rgba(255, 250, 244, 0.76);
}

.slide-berryTitle--css,
.slide-pageTitle--css {
  pointer-events: none;
}

.slide-berryTitle--css .quao-dial-title,
.slide-pageTitle--css .quao-dial-title {
  width: min(78vw, 560px);
}

.slide-berryTitle--css .quao-dial-title__label {
  width: auto;
}

.slide-berryTitle--css .quao-dial-title--ribbon .quao-dial-title__line {
  font-size: clamp(1.75rem, 9vw, 3.4rem);
}

.slide-pageTitle--css .quao-dial-title--script .quao-dial-title__line {
  font-size: clamp(2.55rem, 12vw, 5.4rem);
}

.qt-home-sample-flow {
  --qt-sample-cream: #fbf6e7;
  --qt-sample-green: #2f86be;
  --qt-sample-deep-green: #173f63;
  --qt-sample-yellow: #ffd900;
  --qt-sample-red: #2f86be;
  --qt-sample-pink: #2f86be;
  --qt-sample-blue: #68bdf2;
  --qt-sample-cocoa: #714528;
  background: var(--qt-sample-cream);
  color: #183456;
  font-family: "Be Vietnam Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.qt-home-sample {
  position: relative;
}

.qt-home-sample--hero {
  padding: 76px 32px 104px;
  background:
    radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.48) 0 9%, transparent 10%),
    radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.22), transparent 34%),
    var(--qt-sample-yellow);
  overflow: hidden;
}

.qt-home-sample__hero-frame {
  position: relative;
  min-height: 700px;
  max-width: 1704px;
  margin: 0 auto;
  border-radius: 32px;
  background:
    linear-gradient(90deg, rgba(23, 63, 99, 0.32), transparent 46%),
    radial-gradient(circle at 18% 88%, rgba(255, 88, 118, 0.34), transparent 24%),
    radial-gradient(circle at 52% 46%, rgba(113, 196, 232, 0.56), transparent 35%),
    linear-gradient(105deg, #fff6e5 0%, #fff9ef 42%, #eaf6ff 100%);
  box-shadow: 0 36px 96px rgba(122, 96, 16, 0.2);
  isolation: isolate;
  overflow: hidden;
}

.qt-home-sample__hero-frame::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(23, 63, 99, 0.38), transparent 42%),
    linear-gradient(0deg, rgba(10, 33, 42, 0.08), transparent 55%);
  content: "";
  pointer-events: none;
}

.qt-home-sample__hero-frame::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.18) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(104, 189, 242, 0.14) 0 1px, transparent 1.8px);
  background-position: 0 0, 16px 18px;
  background-size: 34px 34px, 46px 46px;
  mix-blend-mode: soft-light;
  content: "";
  opacity: 0.55;
  pointer-events: none;
}

.qt-home-sample__hero-title {
  position: absolute;
  top: 82px;
  left: 70px;
  z-index: 4;
  display: grid;
  gap: 2px;
  max-width: 760px;
  margin: 0;
  color: #fffdf1;
  font-size: 7.8rem;
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: 0;
  text-shadow:
    0 8px 22px rgba(47, 134, 190, 0.26),
    0 2px 0 rgba(23, 63, 99, 0.12);
}

.qt-home-sample__hero-title span {
  display: block;
}

.qt-home-sample__product-collage {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.qt-home-sample__product {
  position: absolute;
  display: block;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 28px 32px rgba(17, 50, 73, 0.22));
}

.qt-home-sample__product--milk-tea {
  bottom: -122px;
  left: -72px;
  width: 42%;
  transform: rotate(-6deg);
}

.qt-home-sample__product--matcha {
  right: 28%;
  bottom: 46px;
  width: 29%;
  transform: rotate(4deg);
}

.qt-home-sample__product--cacao {
  right: -74px;
  bottom: -104px;
  width: 38%;
  transform: rotate(7deg);
}

.qt-home-sample__product--soda {
  top: 28px;
  right: 17%;
  width: 24%;
  transform: rotate(-12deg);
  opacity: 0.94;
}

.qt-home-sample__cta {
  position: absolute;
  right: 40px;
  bottom: 38px;
  z-index: 5;
  width: min(440px, calc(100% - 80px));
  border-radius: 28px;
  background: rgba(47, 134, 190, 0.96);
  box-shadow: 0 26px 62px rgba(47, 134, 190, 0.26);
  padding: 28px 32px 30px;
  color: #fffdf1;
}

.qt-home-sample__cta p {
  margin: 0 0 22px;
  font-size: 1.18rem;
  font-weight: 650;
  line-height: 1.55;
  letter-spacing: 0;
}

.qt-home-sample__cta a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--qt-sample-yellow);
  padding: 0 18px;
  color: var(--qt-sample-deep-green);
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 14px 28px rgba(255, 217, 0, 0.28);
}

.qt-home-sample--statement {
  display: grid;
  min-height: 520px;
  place-items: start center;
  padding: 92px 24px 124px;
  background:
    radial-gradient(circle at 50% -18%, rgba(255, 217, 0, 0.32), transparent 24%),
    var(--qt-sample-cream);
}

.qt-home-sample__statement-text {
  max-width: 1180px;
  margin: 0;
  color: var(--qt-sample-deep-green);
  font-size: 4.1rem;
  font-weight: 900;
  line-height: 1.36;
  letter-spacing: 0;
  text-align: center;
}

.qt-home-sample__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.1em 0.14em;
  border-radius: 10px;
  padding: 0.04em 0.24em 0.1em;
  color: #fffdf1;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 6px rgba(48, 30, 17, 0.12);
  transform: rotate(-2deg);
  vertical-align: baseline;
  box-shadow: 0 16px 30px rgba(47, 134, 190, 0.12);
}

.qt-home-sample__badge--milk-tea {
  background: var(--qt-sample-red);
}

.qt-home-sample__badge--matcha {
  background: #2f86be;
}

.qt-home-sample__badge--cacao {
  background: var(--qt-sample-cocoa);
}

.qt-home-sample__badge--soda {
  background: var(--qt-sample-blue);
}

.qt-home-sample--articles {
  padding: 88px 32px 116px;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 217, 0, 0.22), transparent 26%),
    var(--qt-sample-cream);
}

.qt-home-sample__articles-heading {
  max-width: 1660px;
  margin: 0 auto 42px;
  color: var(--qt-sample-deep-green);
  font-size: 5.7rem;
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: 0;
}

.qt-home-sample__articles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  max-width: 1660px;
  margin: 0 auto;
}

.qt-home-sample__article-card {
  position: relative;
  display: flex;
  min-height: 520px;
  align-items: flex-end;
  border-radius: 8px;
  background: linear-gradient(135deg, #e8f7ff 0%, #ffffff 100%);
  color: #fffdf6;
  isolation: isolate;
  overflow: hidden;
  padding: 34px 36px 36px;
  text-decoration: none;
  box-shadow: 0 26px 68px rgba(47, 134, 190, 0.12);
}

.qt-home-sample__article-card::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(17, 29, 19, 0.04) 0%, rgba(15, 22, 15, 0.12) 46%, rgba(8, 13, 8, 0.68) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.22), transparent 58%);
  content: "";
}

.qt-home-sample__article-card img {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.qt-home-sample__article-card:hover img {
  transform: scale(1.04);
}

.qt-home-sample__article-label {
  position: absolute;
  top: 18px;
  left: 22px;
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  border-radius: 8px;
  background: var(--qt-sample-yellow);
  padding: 0 12px;
  color: var(--qt-sample-deep-green);
  font-size: 0.82rem;
  font-weight: 900;
}

.qt-home-sample__article-card h3 {
  max-width: 92%;
  margin: 0;
  color: #fffdf6;
  font-size: 2.15rem;
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: 0;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.qt-dial-sample-page {
  --qt-dial-sample-cream: #fbf6e7;
  --qt-dial-sample-accent: #2f86be;
  --qt-dial-sample-badge: #2f86be;
  --qt-dial-sample-muted: #766f68;
  background: var(--qt-dial-sample-cream);
  color: #173f63;
  font-family: "Be Vietnam Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.qt-dial-sample-page--pink {
  --qt-dial-sample-accent: #2f86be;
  --qt-dial-sample-badge: #2f86be;
}

.qt-dial-sample-page--berry {
  --qt-dial-sample-accent: #1f638f;
  --qt-dial-sample-badge: #2f86be;
}

.qt-dial-sample-page--matcha {
  --qt-dial-sample-accent: #2f86be;
  --qt-dial-sample-badge: #68bdf2;
}

.qt-dial-sample-page--coffee {
  --qt-dial-sample-accent: #173f63;
  --qt-dial-sample-badge: #1f638f;
}

.qt-dial-sample-page--cacao {
  --qt-dial-sample-accent: #173f63;
  --qt-dial-sample-badge: #2f86be;
}

.qt-dial-sample-page--soda {
  --qt-dial-sample-accent: #2f74a9;
  --qt-dial-sample-badge: #2f86be;
}

.qt-dial-sample-page--topping {
  --qt-dial-sample-accent: #173f63;
  --qt-dial-sample-badge: #2f86be;
}

.qt-dial-sample-section {
  position: relative;
}

.qt-dial-sample-section--statement {
  display: grid;
  min-height: 520px;
  place-items: center;
  padding: 94px 24px 118px;
  background:
    radial-gradient(circle at 50% 100%, rgba(255, 217, 0, 0.28), transparent 20%),
    var(--qt-dial-sample-cream);
}

.qt-dial-sample__statement-text {
  max-width: 1220px;
  margin: 0;
  color: var(--qt-dial-sample-accent);
  font-size: 4rem;
  font-weight: 900;
  line-height: 1.38;
  letter-spacing: 0;
  text-align: center;
}

.qt-dial-sample__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.08em 0.13em;
  border-radius: 10px;
  background: var(--qt-dial-sample-badge);
  padding: 0.04em 0.25em 0.1em;
  color: #fffdf6;
  font-weight: 900;
  line-height: 1;
  transform: rotate(-2deg);
  vertical-align: baseline;
  box-shadow: 0 16px 30px rgba(47, 134, 190, 0.12);
}

.qt-dial-sample-section--feature {
  min-height: 650px;
  overflow: hidden;
  padding: 112px 32px 124px;
  background:
    radial-gradient(circle at 52% 100%, rgba(255, 217, 0, 0.3), transparent 21%),
    var(--qt-dial-sample-cream);
}

.qt-dial-sample__feature-copy {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 0.86fr);
  gap: 58px;
  max-width: 1260px;
  margin: 0 auto;
  align-items: center;
}

.qt-dial-sample__feature-title {
  display: grid;
  gap: 4px;
  margin: 0;
  color: var(--qt-dial-sample-accent);
  font-size: 6rem;
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: 0;
}

.qt-dial-sample__feature-title span {
  display: block;
}

.qt-dial-sample__feature-body {
  max-width: 620px;
  margin: 0;
  border-left: 4px solid var(--qt-dial-sample-accent);
  padding-left: 38px;
  color: var(--qt-dial-sample-badge);
  font-size: 1.48rem;
  font-weight: 600;
  line-height: 1.72;
  letter-spacing: 0;
}

.qt-dial-sample__feature-image {
  position: absolute;
  right: max(28px, calc((100vw - 1420px) / 2));
  bottom: 16px;
  z-index: 1;
  width: min(27vw, 390px);
  margin: 0;
  pointer-events: none;
}

.qt-dial-sample__feature-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 28px 36px rgba(24, 54, 66, 0.18));
}

.qt-dial-sample-section--tips {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(340px, 1fr);
  gap: 72px;
  max-width: 1420px;
  margin: 0 auto;
  padding: 108px 32px 132px;
  align-items: center;
}

.qt-dial-sample__tips-media {
  min-width: 0;
}

.qt-dial-sample__tips-title {
  display: grid;
  gap: 2px;
  margin: 0 0 22px;
  color: var(--qt-dial-sample-badge);
  font-size: 4.9rem;
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: 0;
}

.qt-dial-sample__tips-title span {
  display: block;
}

.qt-dial-sample__tips-media figure {
  position: relative;
  margin: 0;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.18)),
    var(--qt-dial-sample-badge);
  padding: 14px;
  box-shadow: 0 26px 70px rgba(47, 134, 190, 0.12);
  overflow: hidden;
}

.qt-dial-sample__tips-media figure::before {
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  content: "";
  pointer-events: none;
}

.qt-dial-sample__tips-media figure img {
  display: block;
  width: 100%;
  aspect-ratio: 0.78;
  border-radius: 8px;
  object-fit: cover;
}

.qt-dial-sample__tips-grid {
  display: grid;
  gap: 58px;
}

.qt-dial-sample__tip {
  position: relative;
  min-height: 210px;
  padding-left: 0;
}

.qt-dial-sample__tip img {
  display: block;
  width: 126px;
  max-height: 112px;
  object-fit: contain;
  margin: 0 0 16px;
  filter: drop-shadow(0 16px 24px rgba(47, 134, 190, 0.14));
}

.qt-dial-sample__tip h3 {
  margin: 0 0 18px;
  color: var(--qt-dial-sample-muted);
  font-size: 3.2rem;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0;
}

.qt-dial-sample__tip p {
  max-width: 620px;
  margin: 0;
  color: #766f68;
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.62;
  letter-spacing: 0;
}

.qt-dial-story {
  max-width: 1320px;
  margin: 0 auto;
  padding: 76px 32px 88px;
  color: #17324a;
  font-family: "Be Vietnam Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.qt-dial-story__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(280px, 0.72fr);
  gap: 44px;
  align-items: center;
}

.qt-dial-story__copy {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.qt-dial-story__eyebrow {
  margin: 0;
  color: #2f86be;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.qt-dial-story__title {
  max-width: 760px;
  margin: 0;
  color: #173f63;
  font-size: clamp(2.25rem, 4.8vw, 4.9rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: 0;
}

.qt-dial-story__intro {
  max-width: 780px;
  margin: 0;
  color: rgba(23, 50, 74, 0.78);
  font-size: 1.08rem;
  line-height: 1.75;
}

.qt-dial-story__chips,
.qt-dial-story__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.qt-dial-story__chip {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  border: 1px solid rgba(104, 189, 242, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  padding: 0 16px;
  color: #2f86be;
  font-size: 0.95rem;
  font-weight: 700;
  box-shadow: 0 14px 30px rgba(184, 155, 51, 0.11);
}

.qt-dial-story__button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 0 20px;
  color: #17324a;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.qt-dial-story__button:hover {
  transform: translateY(-2px);
}

.qt-dial-story__button--primary {
  background: #ffd900;
  box-shadow: 0 18px 38px rgba(255, 217, 0, 0.26);
}

.qt-dial-story__button--secondary {
  border: 1px solid rgba(23, 50, 74, 0.14);
  background: rgba(255, 255, 255, 0.86);
  color: #2f86be;
}

.qt-dial-story__visual {
  margin: 0;
  border: 1px solid rgba(23, 50, 74, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 28px 64px rgba(23, 50, 74, 0.1);
  overflow: hidden;
}

.qt-dial-story__visual img {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
}

.qt-dial-story__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 42px;
}

.qt-dial-story__card {
  min-height: 170px;
  border: 1px solid rgba(23, 50, 74, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  padding: 24px;
  box-shadow: 0 22px 46px rgba(23, 50, 74, 0.08);
}

.qt-dial-story__card h2 {
  margin: 0 0 10px;
  color: #173f63;
  font-size: 1.18rem;
  font-weight: 800;
  line-height: 1.35;
}

.qt-dial-story__card p {
  margin: 0;
  color: rgba(23, 50, 74, 0.72);
  font-size: 0.98rem;
  line-height: 1.65;
}

@media (max-width: 980px) {
  .qt-home-sample--hero {
    padding: 58px 22px 86px;
  }

  .qt-home-sample__hero-frame {
    min-height: 620px;
  }

  .qt-home-sample__hero-title {
    top: 58px;
    left: 36px;
    font-size: 5.2rem;
  }

  .qt-home-sample__product--milk-tea {
    width: 50%;
  }

  .qt-home-sample__product--matcha {
    right: 22%;
    width: 35%;
  }

  .qt-home-sample__product--cacao {
    width: 45%;
  }

  .qt-home-sample__product--soda {
    right: 11%;
    width: 31%;
  }

  .qt-home-sample__statement-text {
    max-width: 820px;
    font-size: 3rem;
  }

  .qt-home-sample__articles-heading {
    font-size: 4rem;
  }

  .qt-home-sample__articles-grid {
    grid-template-columns: 1fr;
    max-width: 680px;
  }

  .qt-home-sample__article-card {
    min-height: 460px;
  }

  .qt-dial-sample__statement-text {
    max-width: 840px;
    font-size: 3rem;
  }

  .qt-dial-sample-section--feature {
    min-height: auto;
    padding: 86px 24px 96px;
  }

  .qt-dial-sample__feature-copy,
.qt-dial-sample-section--tips {
    grid-template-columns: 1fr;
  }

  .qt-dial-sample__feature-title {
    font-size: 4.3rem;
  }

  .qt-dial-sample__feature-body {
    max-width: 760px;
  }

  .qt-dial-sample__feature-image {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(58vw, 360px);
    margin: 34px auto 0;
  }

  .qt-dial-sample-section--tips {
    gap: 46px;
    padding: 82px 24px 100px;
  }

  .qt-dial-sample__tips-title {
    font-size: 3.9rem;
  }

  .qt-dial-story {
    padding: 56px 22px 72px;
  }

  .qt-dial-story__inner {
    grid-template-columns: 1fr;
  }

  .qt-dial-story__visual {
    max-width: 560px;
  }

  .qt-dial-story__cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .quao-dial-css-titles {
    display: none;
  }

  .qt-home-sample--hero {
    padding: 34px 14px 60px;
  }

  .qt-home-sample__hero-frame {
    min-height: 660px;
    border-radius: 22px;
  }

  .qt-home-sample__hero-title {
    top: 32px;
    left: 22px;
    max-width: calc(100% - 44px);
    font-size: 3.35rem;
  }

  .qt-home-sample__product--milk-tea {
    bottom: 150px;
    left: -54px;
    width: 68%;
  }

  .qt-home-sample__product--matcha {
    right: 12%;
    bottom: 220px;
    width: 54%;
  }

  .qt-home-sample__product--cacao {
    right: -62px;
    bottom: 116px;
    width: 64%;
  }

  .qt-home-sample__product--soda {
    top: 126px;
    right: -24px;
    width: 48%;
  }

  .qt-home-sample__cta {
    right: 16px;
    bottom: 16px;
    width: calc(100% - 32px);
    border-radius: 22px;
    padding: 22px;
  }

  .qt-home-sample__cta p {
    font-size: 1rem;
  }

  .qt-home-sample--statement {
    min-height: 420px;
    padding: 62px 18px 80px;
  }

  .qt-home-sample__statement-text {
    font-size: 2.15rem;
    line-height: 1.45;
  }

  .qt-home-sample__badge {
    border-radius: 8px;
  }

  .qt-home-sample--articles {
    padding: 58px 18px 76px;
  }

  .qt-home-sample__articles-heading {
    margin-bottom: 28px;
    font-size: 2.9rem;
  }

  .qt-home-sample__article-card {
    min-height: 380px;
    padding: 26px 24px 28px;
  }

  .qt-home-sample__article-card h3 {
    font-size: 1.7rem;
  }

  .qt-dial-sample-section--statement {
    min-height: 430px;
    padding: 62px 18px 82px;
  }

  .qt-dial-sample__statement-text {
    font-size: 2.12rem;
    line-height: 1.46;
  }

  .qt-dial-sample__badge {
    border-radius: 8px;
  }

  .qt-dial-sample-section--feature {
    padding: 62px 18px 76px;
  }

  .qt-dial-sample__feature-copy {
    gap: 28px;
  }

  .qt-dial-sample__feature-title {
    font-size: 3rem;
  }

  .qt-dial-sample__feature-body {
    border-left-width: 3px;
    padding-left: 22px;
    font-size: 1.08rem;
  }

  .qt-dial-sample__feature-image {
    width: min(74vw, 300px);
  }

  .qt-dial-sample-section--tips {
    padding: 60px 18px 82px;
  }

  .qt-dial-sample__tips-title {
    font-size: 2.7rem;
  }

  .qt-dial-sample__tips-grid {
    gap: 38px;
  }

  .qt-dial-sample__tip h3 {
    font-size: 2.15rem;
  }

  .qt-dial-sample__tip p {
    font-size: 1rem;
  }

  .qt-dial-story {
    padding: 42px 18px 58px;
  }

  .qt-dial-story__title {
    font-size: clamp(2rem, 11vw, 3.1rem);
  }

  .qt-dial-story__intro {
    font-size: 1rem;
  }

  .qt-dial-story__actions {
    align-items: stretch;
  }

  .qt-dial-story__button {
    width: 100%;
  }
}

.quao-dial-css-titles,
.quao-dial-svg-title {
  --qt-title-bg-brand: linear-gradient(135deg, rgba(47, 134, 190, 0.96), rgba(104, 189, 242, 0.94));
  --qt-title-shadow-brand: rgba(23, 63, 99, 0.22);
  font-family: "Be Vietnam Pro", Arial, sans-serif !important;
}

.quao-dial-css-titles.is-dial-open {
  opacity: 0;
}

.quao-dial-title,
.quao-dial-title *,
.quao-dial-svg-title,
.quao-dial-svg-title * {
  font-family: "Be Vietnam Pro", Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

.quao-dial-title--ribbon .quao-dial-title__label::before,
.quao-dial-title--ribbon .quao-dial-title__label::after,
.quao-dial-svg-title__badge::before,
.quao-dial-svg-title__badge::after {
  display: none !important;
  content: none !important;
}

.quao-dial-title--ribbon .quao-dial-title__label,
.quao-dial-svg-title__badge {
  min-width: clamp(260px, 31vw, 620px) !important;
  min-height: auto !important;
  padding:
    clamp(16px, 2vw, 30px)
    clamp(46px, 5.6vw, 104px) !important;
  border: 2px solid rgba(255, 255, 255, 0.58) !important;
  border-radius: 26px 42px 30px 48px / 34px 28px 40px 30px !important;
  background: var(--qt-title-bg-brand) !important;
  color: #fff !important;
  box-shadow:
    0 18px 46px rgba(23, 63, 99, 0.24),
    inset 0 -8px 0 rgba(23, 63, 99, 0.08) !important;
  clip-path: polygon(1.4% 11%, 98.6% 2%, 96.5% 90%, 5% 100%, 0 24%) !important;
  transform: rotate(-0.8deg) skewX(-0.8deg);
  overflow: visible !important;
}

.quao-dial-title__line,
.quao-dial-svg-title__badge-line {
  color: #fff !important;
  font-weight: 900 !important;
  line-height: 0.98 !important;
  text-shadow: 0 3px 10px rgba(23, 63, 99, 0.18);
}

.quao-dial-title--ribbon .quao-dial-title__line,
.quao-dial-svg-title__badge-line {
  font-size: clamp(2.1rem, 4vw, 4.7rem) !important;
  text-transform: none !important;
  white-space: normal !important;
}

.quao-dial-css-titles.is-dial-open .quao-dial-css-title {
  top: clamp(170px, 34vh, 330px);
  width: min(90vw, 1180px);
  z-index: 1;
  opacity: 0.92;
}

.quao-dial-css-titles.is-dial-open .quao-dial-title--ribbon .quao-dial-title__label,
.quao-dial-svg-title.is-open .quao-dial-svg-title__badge {
  min-width: 0 !important;
  padding: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
  transform: none !important;
}

.quao-dial-css-titles.is-dial-open .quao-dial-title__line,
.quao-dial-svg-title.is-open .quao-dial-svg-title__badge-line {
  color: rgba(255, 255, 255, 0.74) !important;
  font-size: clamp(4rem, 10vw, 12rem) !important;
  line-height: 0.92 !important;
  text-shadow: 0 8px 24px rgba(23, 63, 99, 0.14);
}

.qt-home-sample-flow,
.qt-dial-sample-page {
  --qt-sample-pink: var(--quaotea-brand-blue-deep, #2f86be);
  --qt-dial-sample-badge: var(--quaotea-brand-blue-deep, #2f86be);
  --qt-dial-sample-accent: var(--quaotea-brand-blue, #68bdf2);
}

.qt-home-sample__badge,
.qt-dial-sample__badge {
  border-radius: 24px 18px 22px 19px / 20px 24px 18px 23px !important;
  background: var(--quaotea-brand-blue-deep, #2f86be) !important;
  color: #fff !important;
}

.qt-dial-sample__statement-text,
.qt-dial-sample__feature-title,
.qt-dial-sample__tips-title {
  color: var(--quaotea-brand-blue-deep, #2f86be) !important;
}

.qt-dial-sample__feature-body {
  border-left-color: var(--quaotea-brand-blue, #68bdf2) !important;
  color: var(--quaotea-brand-navy, #173f63) !important;
}

@media (max-width: 767px) {
  .quao-dial-title--ribbon .quao-dial-title__label,
.quao-dial-svg-title__badge {
    min-width: min(82vw, 360px) !important;
    padding: 14px 28px !important;
  }

  .quao-dial-title--ribbon .quao-dial-title__line,
.quao-dial-svg-title__badge-line {
    font-size: clamp(1.65rem, 11vw, 3rem) !important;
  }

  .quao-dial-css-titles.is-dial-open .quao-dial-title__line,
.quao-dial-svg-title.is-open .quao-dial-svg-title__badge-line {
    font-size: clamp(2.7rem, 16vw, 5.25rem) !important;
  }
}

/* Final Quao Tea dial title skin: Vietnamese-safe typography, no legacy white slabs. */
.quao-dial-css-titles,
.quao-dial-svg-title,
.quao-dial-title {
  --qt-title-bg: rgba(47, 134, 190, 0.94) !important;
  --qt-title-ink: #ffffff !important;
  --qt-title-shadow: rgba(23, 63, 99, 0.2) !important;
  --qt-svg-title-bg: rgba(47, 134, 190, 0.94) !important;
  --qt-svg-title-border: rgba(255, 255, 255, 0.62) !important;
  font-family: "Be Vietnam Pro", Arial, sans-serif !important;
}

.quao-dial-css-titles.is-dial-turning:not(.is-dial-open) {
  opacity: 0;
}

.quao-dial-title--green,
.quao-dial-title--rose,
.quao-dial-title--blue,
.quao-dial-title--purple,
.quao-dial-title--red,
.quao-dial-title--brown,
.quao-dial-title--berry,
.quao-dial-title--matcha,
.quao-dial-title--coffee,
.quao-dial-title--cacao,
.quao-dial-title--soda,
.quao-dial-title--topping {
  --qt-title-bg: rgba(47, 134, 190, 0.94) !important;
  --qt-title-ink: #ffffff !important;
  --qt-title-shadow: rgba(23, 63, 99, 0.2) !important;
}

.quao-dial-svg-title.tone-green,
.quao-dial-svg-title.tone-rose,
.quao-dial-svg-title.tone-blue,
.quao-dial-svg-title.tone-purple,
.quao-dial-svg-title.tone-red,
.quao-dial-svg-title.tone-brown,
.quao-dial-svg-title.tone-berry,
.quao-dial-svg-title.tone-matcha,
.quao-dial-svg-title.tone-coffee,
.quao-dial-svg-title.tone-cacao,
.quao-dial-svg-title.tone-soda,
.quao-dial-svg-title.tone-topping {
  --qt-svg-title-bg: rgba(47, 134, 190, 0.94) !important;
  --qt-svg-title-border: rgba(255, 255, 255, 0.62) !important;
  color: rgba(255, 255, 255, 0.72) !important;
}

.quao-dial-title__label::before,
.quao-dial-title__label::after,
.quao-dial-title__line::before,
.quao-dial-title__line::after,
.quao-dial-svg-title__badge::before,
.quao-dial-svg-title__badge::after,
.quao-dial-svg-title__badge-line::before,
.quao-dial-svg-title__badge-line::after {
  display: none !important;
  content: none !important;
}

.quao-dial-title--ribbon .quao-dial-title__label,
.quao-dial-title--script .quao-dial-title__label,
.quao-dial-svg-title__badge {
  position: relative !important;
  min-width: clamp(250px, 30vw, 620px) !important;
  width: fit-content !important;
  max-width: min(86vw, 720px) !important;
  min-height: 0 !important;
  padding:
    clamp(16px, 2.1vw, 34px)
    clamp(42px, 5.4vw, 104px)
    clamp(18px, 2.2vw, 36px) !important;
  border: 2px solid rgba(255, 255, 255, 0.64) !important;
  border-radius: 26px 42px 32px 48px / 36px 26px 42px 30px !important;
  background:
    linear-gradient(116deg, rgba(255, 255, 255, 0.18), transparent 30%),
    linear-gradient(180deg, rgba(104, 189, 242, 0.24), rgba(23, 63, 99, 0.08)),
    linear-gradient(135deg, rgba(47, 134, 190, 0.96), rgba(104, 189, 242, 0.9)) !important;
  box-shadow:
    0 18px 42px rgba(23, 63, 99, 0.18),
    inset 0 -7px 0 rgba(23, 63, 99, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16) !important;
  clip-path: polygon(2% 13%, 98% 4%, 96.5% 89%, 4.5% 98%, 0 30%) !important;
  color: #fff !important;
  transform: rotate(-0.7deg) skewX(-0.7deg) !important;
  overflow: visible !important;
}

.quao-dial-title__line,
.quao-dial-title--script .quao-dial-title__line,
.quao-dial-svg-title__badge-line {
  color: #fff !important;
  font-family: "Be Vietnam Pro", Arial, sans-serif !important;
  font-size: clamp(2rem, 4vw, 4.6rem) !important;
  font-weight: 900 !important;
  line-height: 0.96 !important;
  text-transform: none !important;
  white-space: normal !important;
  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.16),
    0 6px 16px rgba(23, 63, 99, 0.18) !important;
  transform: none !important;
}

.quao-dial-svg-title__backdrop {
  color: rgba(255, 255, 255, 0.72) !important;
  font-family: "Be Vietnam Pro", Arial, sans-serif !important;
  text-shadow: 0 10px 28px rgba(23, 63, 99, 0.14) !important;
  transform: translateY(-2%) rotate(-0.8deg) !important;
}

.quao-dial-svg-title__line,
.quao-dial-svg-title__backdrop .quao-dial-svg-title__line {
  color: inherit !important;
  font-family: "Be Vietnam Pro", Arial, sans-serif !important;
  font-size: clamp(4rem, 9.2vw, 12.5rem) !important;
  font-weight: 900 !important;
  line-height: 0.94 !important;
  text-transform: none !important;
  white-space: normal !important;
}

.quao-dial-css-titles.is-dial-open .quao-dial-css-title {
  top: clamp(180px, 35vh, 340px) !important;
  width: min(92vw, 1200px) !important;
  z-index: 1 !important;
  opacity: 0.92 !important;
}

.quao-dial-css-titles.is-dial-open .quao-dial-title__label,
.quao-dial-svg-title.is-open .quao-dial-svg-title__badge {
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
  transform: none !important;
  opacity: 1 !important;
}

.quao-dial-css-titles.is-dial-open .quao-dial-title__line,
.quao-dial-svg-title.is-open .quao-dial-svg-title__badge-line,
.quao-dial-svg-title.is-open .quao-dial-svg-title__line {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: clamp(4rem, 10vw, 12rem) !important;
  line-height: 0.92 !important;
  text-shadow: 0 10px 30px rgba(23, 63, 99, 0.13) !important;
}

@media (max-width: 767px) {
  .quao-dial-title--ribbon .quao-dial-title__label,
.quao-dial-title--script .quao-dial-title__label,
.quao-dial-svg-title__badge {
    min-width: min(82vw, 360px) !important;
    padding: 14px 30px 16px !important;
  }

  .quao-dial-title__line,
.quao-dial-title--script .quao-dial-title__line,
.quao-dial-svg-title__badge-line {
    font-size: clamp(1.7rem, 10vw, 3.05rem) !important;
  }
}

/* Final badge reset: no clipped white corners; keep the editable title as real Vietnamese-safe text. */
.quao-dial-title--ribbon .quao-dial-title__label,
.quao-dial-title--script .quao-dial-title__label,
.quao-dial-svg-title__badge {
  min-width: 0 !important;
  width: max-content !important;
  max-width: min(84vw, 760px) !important;
  padding: clamp(18px, 2.25vw, 36px) clamp(52px, 6vw, 118px) clamp(20px, 2.35vw, 38px) !important;
  border: 2px solid rgba(255, 255, 255, 0.74) !important;
  border-radius: 30px 48px 36px 52px / 38px 30px 48px 34px !important;
  clip-path: none !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.28), transparent 28%),
    linear-gradient(116deg, rgba(255, 255, 255, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(23, 63, 99, 0.97), rgba(47, 134, 190, 0.94) 58%, rgba(104, 189, 242, 0.9)) !important;
  box-shadow:
    0 18px 40px rgba(23, 63, 99, 0.18),
    inset 0 -6px 0 rgba(23, 63, 99, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18) !important;
  transform: rotate(-0.55deg) skewX(-0.45deg) !important;
}

.quao-dial-title--ribbon .quao-dial-title__label::before,
.quao-dial-title--ribbon .quao-dial-title__label::after,
.quao-dial-title--script .quao-dial-title__label::before,
.quao-dial-title--script .quao-dial-title__label::after,
.quao-dial-svg-title__badge::before,
.quao-dial-svg-title__badge::after {
  display: none !important;
}

.quao-dial-css-titles.is-dial-open .quao-dial-title__label,
.quao-dial-svg-title.is-open .quao-dial-svg-title__badge {
  overflow: visible !important;
}

@media (max-width: 767px) {
  .quao-dial-title--ribbon .quao-dial-title__label,
.quao-dial-title--script .quao-dial-title__label,
.quao-dial-svg-title__badge {
    max-width: min(86vw, 420px) !important;
    padding: 14px 28px 16px !important;
    border-radius: 22px 32px 26px 34px / 28px 22px 32px 24px !important;
  }
}

/* Keep dial title rendering single-source: one active CSS title while closed, no fixed title while content is open. */
.quao-dial-css-title:not(.is-active) {
  visibility: hidden !important;
  opacity: 0 !important;
}

.quao-dial-css-title.is-active {
  visibility: visible !important;
}

.quao-dial-css-titles.is-dial-open,
.dial-disabled .quao-dial-css-titles,
.on-scroll .quao-dial-css-titles {
  opacity: 0 !important;
  visibility: hidden !important;
}

.quao-dial-svg-title.is-open {
  display: none !important;
}

/* Cleaner fallback pages for dial routes, including the featured menu route. */
.qt-dial-sample-page {
  background:
    radial-gradient(circle at 12% 0, rgba(255, 217, 0, 0.2), transparent 25rem),
    linear-gradient(180deg, #fffaf0 0%, #fbf6e7 100%) !important;
}

.qt-dial-sample-section--statement {
  min-height: auto !important;
  place-items: center !important;
  padding: clamp(88px, 8vw, 132px) clamp(20px, 4vw, 56px) clamp(42px, 5vw, 76px) !important;
  background: transparent !important;
}

.qt-dial-sample__statement-text {
  max-width: 980px !important;
  color: #173f63 !important;
  font-size: clamp(2.2rem, 4.2vw, 4.75rem) !important;
  line-height: 1.16 !important;
}

.qt-dial-sample__badge {
  display: inline-flex !important;
  margin: 0 0.12em 0.08em !important;
  border: 2px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 12px !important;
  padding: 0.02em 0.24em 0.08em !important;
  transform: rotate(-1.2deg) !important;
}

.qt-dial-sample-section--feature {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.48fr) !important;
  gap: clamp(28px, 5vw, 72px) !important;
  max-width: 1180px !important;
  min-height: auto !important;
  margin: 0 auto !important;
  align-items: center !important;
  overflow: visible !important;
  padding: clamp(34px, 5vw, 72px) clamp(20px, 4vw, 56px) clamp(68px, 7vw, 108px) !important;
  background: transparent !important;
}

.qt-dial-sample__feature-copy {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 24px !important;
  max-width: 700px !important;
  margin: 0 !important;
}

.qt-dial-sample__feature-title {
  font-size: clamp(2.6rem, 5.5vw, 5.8rem) !important;
  line-height: 1.02 !important;
}

.qt-dial-sample__feature-body {
  max-width: 620px !important;
  border-left-color: #ffd900 !important;
  padding-left: clamp(20px, 3vw, 34px) !important;
  color: #173f63 !important;
  font-size: clamp(1.02rem, 1.4vw, 1.28rem) !important;
  line-height: 1.68 !important;
}

.qt-dial-sample__feature-image {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  width: min(100%, 360px) !important;
  margin: 0 auto !important;
}

.qt-dial-sample__feature-image img {
  max-height: 520px !important;
}

.qt-dial-sample-section--tips {
  gap: clamp(32px, 5vw, 72px) !important;
  padding-top: clamp(58px, 7vw, 96px) !important;
}

@media (max-width: 860px) {
  .qt-dial-sample-section--feature {
    grid-template-columns: 1fr !important;
  }

  .qt-dial-sample__feature-image {
    order: -1;
    width: min(72vw, 320px) !important;
  }
}

@media (max-width: 767px) {
  body.dial-page.menu-open #nav .standard-menu,
body.dial-page #nav.menu-open .standard-menu {
    isolation: isolate !important;
    display: block !important;
    min-height: 100svh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: calc(13.05rem + env(safe-area-inset-top)) 0 calc(0.9rem + env(safe-area-inset-bottom)) !important;
    background:
      radial-gradient(circle at 50% -2.55rem, rgba(255, 218, 0, 0.3), transparent 5.2rem),
      linear-gradient(180deg, #a7db42 0%, #91ca35 100%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.dial-page.menu-open #nav .standard-menu::before,
body.dial-page #nav.menu-open .standard-menu::before {
    position: fixed !important;
    z-index: 0 !important;
    display: block !important;
    top: calc(4rem + env(safe-area-inset-top)) !important;
    left: -46vw !important;
    width: 196vw !important;
    height: calc(100svh + 10rem) !important;
    background: url("../vendor/quao-experience/assets/images/leaf-1-762x978-c-default.png") left top / 100% 100% no-repeat !important;
    content: "" !important;
    opacity: 1 !important;
    pointer-events: none !important;
    transform: none !important;
    transform-origin: left top !important;
  }

  body.dial-page.menu-open #nav .standard-menu .bg-leaf-1,
body.dial-page.menu-open #nav .standard-menu .bg-leaf-2,
body.dial-page.menu-open #nav .standard-menu .bg-leaf-3,
body.dial-page #nav.menu-open .standard-menu .bg-leaf-1,
body.dial-page #nav.menu-open .standard-menu .bg-leaf-2,
body.dial-page #nav.menu-open .standard-menu .bg-leaf-3 {
    display: none !important;
  }

  body.dial-page.menu-open #nav .standard-menu .container,
body.dial-page #nav.menu-open .standard-menu .container {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    min-height: calc(100svh - 13.55rem) !important;
    margin: 0 auto !important;
    padding: 0 1.45rem !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    inset-block-start: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  body.dial-page.menu-open #nav .standard-menu .container-inner,
body.dial-page #nav.menu-open .standard-menu .container-inner {
    display: grid !important;
    align-content: start !important;
    gap: 0.54rem !important;
    width: 100% !important;
    min-height: calc(100svh - 13.55rem) !important;
    padding: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }
}