/* ==========================================================================
   CM88 — Trang chuyển đổi link (mobile only, tối đa 484px)

   Hệ đo tỷ lệ: mọi kích thước viết dạng calc(N * var(--cc-u)),
   trong đó N là số px theo bản thiết kế Figma (khung 484px).
   --cc-u co lại theo bề rộng khối cha → toàn bộ UI thu nhỏ cùng tỷ lệ.
   ========================================================================== */

:root {
  /* 1 đơn vị = 1px ở bề rộng thiết kế 484px, nhỏ dần khi khung hẹp hơn */
  --cc-u: calc(min(100vw, 484px) / 484);

  --brand: #36a638;
  --brand-dark: #137940;
  --brand-deep: #117836;
  --brand-light: #1aba4e;
  --brand-mid: #1c9d4a;
  --brand-tint: #dfeede;
  --brand-wash: #edf2ee;

  --ink: #000;
  --ink-muted: #686868;
  --ink-soft: #717171;
  --ink-faint: #9bc3a8;

  --line: #e6ede8;
  --surface: #fff;
  --page: #f5f5f5;

  --radius-card: calc(15 * var(--cc-u));
  --radius-panel: calc(8 * var(--cc-u));
  --radius-tile: calc(7 * var(--cc-u));
  --radius-pill: calc(999 * var(--cc-u));

  --gap-section: calc(6 * var(--cc-u));
  --pad-panel: calc(14 * var(--cc-u)) calc(9 * var(--cc-u));

  --shell-max: calc(484 * var(--cc-u));
  --font: "Roboto", sans-serif;
}

/* Khi .shell nằm trong khối cha hẹp hơn viewport, đo theo chính khối cha */
@supports (container-type: inline-size) {
  .shell {
    container-type: inline-size;
  }

  .shell > * {
    --cc-u: calc(100cqw / 484);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  font-family: var(--font);
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: calc(14 * var(--cc-u));
  font-weight: 400;
  line-height: 1.4;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 0 calc(0* var(--cc-u));
  background: var(--page) url("../images/bg.png") no-repeat top center / 100% 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-section);
  padding-top: calc(10 * var(--cc-u));
}

/* Khối trắng bo góc dùng chung cho mọi section */
.panel {
  background: var(--surface);
  border: calc(1 * var(--cc-u)) solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--pad-panel);
}

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--cc-u));
  margin-bottom: calc(10 * var(--cc-u));
}

.panel__title {
  margin: 0;
  font-size: calc(20 * var(--cc-u));
  font-weight: 600;
  line-height: 1.15;
}

.panel__title--icon {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--cc-u));
}

.panel__title--icon img {
  width: calc(23 * var(--cc-u));
  height: calc(25 * var(--cc-u));
  flex: none;
}

.panel__title .accent {
  color: var(--brand);
  font-weight: 700;
}

/* Link "Xem chi tiết" / "Ẩn bớt" */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--cc-u));
  padding: calc(2 * var(--cc-u)) 0;
  border: 0;
  background: none;
  color: var(--brand);
  font-family: inherit;
  font-size: calc(14 * var(--cc-u));
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  overflow: visible;
}

.link-more::after {
  content: "→";
  font-weight: 400;
  line-height: 1;
}

.link-more--sm {
  font-size: calc(12 * var(--cc-u));
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   Topbar
   -------------------------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: calc(8 * var(--cc-u));
  padding: 0 calc(4 * var(--cc-u));
}

.status {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--cc-u));
  flex: 0 1 auto;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  height: calc(44 * var(--cc-u));
  padding: 0 calc(10 * var(--cc-u)) 0 calc(10 * var(--cc-u));
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: calc(1.5 * var(--cc-u)) solid var(--brand);
}

.status__icon {
  width: calc(28 * var(--cc-u));
  height: calc(32 * var(--cc-u));
  flex: none;
}

.status__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(2 * var(--cc-u));
}

.status__title {
  display: flex;
  align-items: center;
  gap: calc(5 * var(--cc-u));
  margin: 0;
  color: var(--brand);
  font-size: calc(13 * var(--cc-u));
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
}

.status__note {
  margin: 0;
  padding-left: calc(10 * var(--cc-u));
  color: var(--ink);
  font-size: calc(13 * var(--cc-u));
  font-weight: 400;
  line-height: 1.15;
}

.status__dot {
  width: calc(5 * var(--cc-u));
  height: calc(5 * var(--cc-u));
  flex: none;
  border-radius: 50%;
  background: #3fa565;
}

.support {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--cc-u));
  flex: 0 1 auto;
  width: max-content;
  min-width: calc(198 * var(--cc-u));
  max-width: 100%;
  height: calc(44 * var(--cc-u));
  padding: 0 calc(16 * var(--cc-u)) 0 calc(12 * var(--cc-u));
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: var(--surface);
}

.support__main {
  display: flex;
  align-items: center;
  gap: calc(15 * var(--cc-u));
  min-width: 0;
}

.support__icon {
  width: calc(28 * var(--cc-u));
  height: calc(26 * var(--cc-u));
  flex: none;
}

.support__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(2 * var(--cc-u));
}

.support__title {
  margin: 0;
  font-size: calc(13 * var(--cc-u));
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
}

.support__note {
  margin: 0;
  font-size: calc(13 * var(--cc-u));
  font-weight: 400;
  line-height: 1.15;
}

.support__arrow {
  width: calc(16 * var(--cc-u));
  height: calc(14 * var(--cc-u));
  flex: none;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  min-height: calc(203 * var(--cc-u));
  padding: 0 calc(8 * var(--cc-u));
  overflow: visible;
}

.hero__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(14 * var(--cc-u));
  width: calc(244 * var(--cc-u));
  flex: none;
  padding: calc(14 * var(--cc-u)) 0 calc(12 * var(--cc-u));
}

.hero__logo {
  width: calc(142 * var(--cc-u));
  height: calc(37 * var(--cc-u));
}

.hero__title {
  margin: 0;
  width: 100%;
  font-size: calc(15 * var(--cc-u));
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.hero__title .accent {
  color: var(--brand);
  font-weight: 800;
}

.hero__text {
  width: 100%;
  font-size: calc(13 * var(--cc-u));
  font-weight: 400;
  line-height: 1.45;
  word-break: keep-all;
  overflow-wrap: normal;
}

.hero__visual {
  position: absolute;
  right: calc(-6 * var(--cc-u));
  bottom: 0;
  z-index: 1;
  width: calc(260 * var(--cc-u));
  height: calc(210 * var(--cc-u));
  pointer-events: none;
}

.hero__glow {
  position: absolute;
  right: calc(18 * var(--cc-u));
  bottom: calc(24 * var(--cc-u));
  width: calc(170 * var(--cc-u));
  height: calc(170 * var(--cc-u));
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(54, 166, 56, 0.28) 0%,
    rgba(26, 186, 78, 0.14) 38%,
    rgba(26, 186, 78, 0) 72%
  );
  filter: blur(calc(2 * var(--cc-u)));
  transform: scale(1);
}

.hero__art {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: calc(249 * var(--cc-u));
  height: auto;
  object-fit: contain;
  object-position: right bottom;
  filter: drop-shadow(0 calc(8 * var(--cc-u)) calc(18 * var(--cc-u)) rgba(17, 120, 54, 0.12));
}

/* Chip "Bảo mật tối đa" */
.chip-row {
  display: flex;
  flex-wrap: nowrap;
  gap: calc(8 * var(--cc-u));
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--cc-u));
  flex: none;
  padding: calc(4 * var(--cc-u)) calc(8 * var(--cc-u)) calc(4 * var(--cc-u)) calc(5 * var(--cc-u));
  border: calc(0.9 * var(--cc-u)) solid var(--line);
  border-radius: calc(7 * var(--cc-u));
  background: var(--surface);
  font-size: calc(13 * var(--cc-u));
  font-weight: 600;
  white-space: nowrap;
}

.chip__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(20 * var(--cc-u));
  height: calc(20 * var(--cc-u));
  flex: none;
  border-radius: 50%;
  background: var(--brand-tint);
}

.chip__badge img {
  width: calc(12 * var(--cc-u));
  height: 70%;
}

/* --------------------------------------------------------------------------
   Danh sách link truy cập
   -------------------------------------------------------------------------- */

.links {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--cc-u));
}

.link-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--cc-u));
  min-height: calc(69 * var(--cc-u));
  padding: calc(10 * var(--cc-u)) calc(10 * var(--cc-u)) calc(10 * var(--cc-u)) calc(12 * var(--cc-u));
  border: calc(1 * var(--cc-u)) solid var(--brand);
  border-radius: var(--radius-panel);
  background: var(--surface);
  box-shadow: 0 0 0 calc(1 * var(--cc-u)) rgba(76, 255, 82, 0.36) inset;
}

/* Card đề xuất: dải gradient bên trái */
.link-card--featured {
  gap: 0;
  padding: 0;
  border: calc(1 * var(--cc-u)) solid var(--brand);
  background: linear-gradient(180deg, #1aba4e 0%, #137940 100%);
  box-shadow: none;
  overflow: hidden;
  align-items: stretch;
}

.link-card__ribbon {
  display: none;
}

.link-card--featured .link-card__ribbon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(2 * var(--cc-u));
  width: calc(60 * var(--cc-u));
  flex: none;
  padding: calc(6 * var(--cc-u)) calc(4 * var(--cc-u));
  color: var(--surface);
}

.link-card__ribbon img {
  width: calc(23 * var(--cc-u));
  height: auto;
}

.link-card__ribbon span {
  font-size: calc(9.5 * var(--cc-u));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.link-card__inner {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--cc-u));
  flex: 1 1 auto;
  min-width: 0;
}

.link-card--featured .link-card__inner {
  padding: calc(8 * var(--cc-u)) calc(10 * var(--cc-u));
  border-radius: calc(7 * var(--cc-u)) 0 0 calc(7 * var(--cc-u));
  background: var(--surface);
}

.link-card__index {
  flex: none;
  color: var(--ink-faint);
  font-size: calc(26 * var(--cc-u));
  font-weight: 600;
  line-height: 1;
}

.link-card__body {
  flex: 1 1 auto;
  min-width: 0;
}

.link-card__name {
  margin: 0;
  font-size: calc(15 * var(--cc-u));
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.link-card__state {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--cc-u));
  margin-top: calc(2 * var(--cc-u));
  color: var(--brand);
  font-size: calc(13 * var(--cc-u));
  white-space: nowrap;
}

.link-card__state::before {
  content: "";
  width: calc(7 * var(--cc-u));
  height: calc(7 * var(--cc-u));
  flex: none;
  border-radius: 50%;
  background: #3fa565;
}

.link-card__state::after {
  content: "»";
  display: block;
  color: var(--brand);
  font-size: calc(18 * var(--cc-u));
  font-weight: 600;
  line-height: 1;
  transform: translateY(calc(-1.5 * var(--cc-u)));
}

.link-card__meta {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--cc-u));
  flex: none;
  margin-left: auto;
}

.tag-region {
  display: inline-flex;
  align-items: center;
  gap: calc(3 * var(--cc-u));
  padding: calc(2 * var(--cc-u)) calc(4 * var(--cc-u)) calc(2 * var(--cc-u)) calc(3 * var(--cc-u));
  border: calc(0.5 * var(--cc-u)) solid var(--line);
  border-radius: calc(3 * var(--cc-u));
  background: var(--brand-wash);
  font-size: calc(12 * var(--cc-u));
  font-weight: 600;
  white-space: nowrap;
}

.tag-region__pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(16 * var(--cc-u));
  height: calc(16 * var(--cc-u));
  flex: none;
  border-radius: 50%;
  background: var(--brand-tint);
}

.tag-region__pin svg {
  width: calc(9 * var(--cc-u));
  height: calc(9 * var(--cc-u));
}

.link-card__ping {
  color: var(--brand);
  font-size: calc(11 * var(--cc-u));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: calc(42 * var(--cc-u));
  text-align: right;
}

.link-card__ping::before {
  content: "";
  display: inline-block;
  width: calc(1 * var(--cc-u));
  height: calc(18 * var(--cc-u));
  margin-right: calc(8 * var(--cc-u));
  vertical-align: calc(-4 * var(--cc-u));
  background: var(--line);
}

.btn-access {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--cc-u));
  flex: none;
  padding: calc(4 * var(--cc-u)) calc(10 * var(--cc-u));
  border-radius: calc(10 * var(--cc-u));
  background: linear-gradient(180deg, var(--brand-deep), var(--brand-mid));
  color: var(--surface);
  font-size: calc(12 * var(--cc-u));
  font-weight: 600;
  white-space: nowrap;
}

.btn-access::after {
  content: "→";
  font-weight: 400;
}

.links-note {
  display: flex;
  align-items: flex-start;
  gap: calc(5 * var(--cc-u));
  margin-top: calc(12 * var(--cc-u));
  color: var(--ink-muted);
  font-size: calc(12 * var(--cc-u));
}

.links-note img {
  width: calc(12 * var(--cc-u));
  height: calc(12 * var(--cc-u));
  flex: none;
  margin-top: calc(2 * var(--cc-u));
}

/* --------------------------------------------------------------------------
   Khám phá CM88
   -------------------------------------------------------------------------- */

.explore {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--cc-u));
}

.explore-card {
  display: flex;
  gap: calc(10 * var(--cc-u));
  overflow: hidden;
  border: calc(0.84 * var(--cc-u)) solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.explore-card__media {
  position: relative;
  width: calc(111 * var(--cc-u));
  flex: none;
  align-self: stretch;
  overflow: hidden;
  border-radius: var(--radius-panel);
}

.explore-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

.explore-card__tag {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: calc(1 * var(--cc-u)) calc(8 * var(--cc-u));
  border-radius: 0 calc(6 * var(--cc-u)) 0 0;
  background: var(--surface);
  box-shadow: calc(-1 * var(--cc-u)) calc(3 * var(--cc-u)) calc(6 * var(--cc-u)) rgba(0, 0, 0, 0.43);
  color: var(--brand);
  font-size: calc(12 * var(--cc-u));
  font-weight: 600;
  white-space: nowrap;
}

.explore-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(0 * var(--cc-u));
  flex: 1 1 auto;
  min-width: 0;
  padding: calc(6 * var(--cc-u)) calc(8 * var(--cc-u)) calc(0 * var(--cc-u)) 0;
}

.explore-card__html {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--cc-u));
  width: 100%;
}

.explore-card__html h3 {
  margin: 0;
  font-size: calc(14 * var(--cc-u));
  font-weight: 700;
  line-height: 1.2;
}

.explore-card__html h3 strong {
  font-weight: 700;
}

.explore-card__html p {
  margin: 0;
  font-size: calc(13.5 * var(--cc-u));
  line-height: 1.1;
  text-align: justify;
}

.explore-card.is-open .explore-card__toggle::after {
  content: "←";
}

/* --------------------------------------------------------------------------
   Không truy cập được? / Lấy link qua Gmail
   -------------------------------------------------------------------------- */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(6 * var(--cc-u));
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tile-grid > .tile,
.tile-grid > li {
  list-style: none;
  margin: 0;
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--cc-u));
  min-height: calc(95 * var(--cc-u));
  padding: calc(12 * var(--cc-u)) calc(4 * var(--cc-u));
  border: calc(1 * var(--cc-u)) solid var(--line);
  border-radius: var(--radius-tile);
  background: var(--surface);
  color: var(--brand);
  font-size: calc(15 * var(--cc-u));
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  transition:
    border-color 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.tile__icon {
  width: calc(27 * var(--cc-u));
  height: calc(24 * var(--cc-u));
  flex: none;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.tile__step {
  display: grid;
  place-items: center;
  width: calc(31 * var(--cc-u));
  height: calc(31 * var(--cc-u));
  flex: none;
  margin: 0 auto;
  padding: calc(2 * var(--cc-u)) 0 0;
  border-radius: 50%;
  background: rgba(54, 166, 56, 0.5);
  color: var(--surface);
  font-family: var(--font);
  font-size: calc(16 * var(--cc-u));
  font-weight: 600;
  line-height: 1;
  text-align: center;
  transition:
    transform 0.3s ease,
    background-color 0.25s ease;
}

.tile__label {
  display: block;
}

/* Gmail guide: mở rộng + carousel */
.gmail-guide.is-open .gmail-guide__summary {
  display: none;
}

.gmail-guide.is-open .gmail-guide__detail {
  display: block;
}

.gmail-guide.is-open .gmail-guide__toggle::after {
  content: "←";
}

.gmail-guide__detail[hidden] {
  display: none !important;
}

.gmail-guide__carousel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--cc-u));
  padding: calc(8 * var(--cc-u)) 0 calc(4 * var(--cc-u));
}

.gmail-guide__viewport {
  flex: 1 1 auto;
  min-width: 0;
  max-width: calc(280 * var(--cc-u));
  overflow: hidden;
}

.gmail-guide__track {
  display: flex;
  width: 100%;
  transition: transform 0.3s ease;
}

.gmail-guide__slide {
  flex: 0 0 100%;
  margin: 0;
  padding: 0;
}

.gmail-guide__slide img {
  display: block;
  width: 100%;
  height: auto;
}

.gmail-guide__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(36 * var(--cc-u));
  height: calc(36 * var(--cc-u));
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--brand);
  color: var(--surface);
  font-size: calc(28 * var(--cc-u));
  line-height: 1;
  cursor: pointer;
}

.gmail-guide__nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.gmail-guide__nav span {
  display: block;
  margin-top: calc(-2 * var(--cc-u));
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  display: flex;
  flex-direction: column;
  gap: calc(18 * var(--cc-u));
  padding: calc(14 * var(--cc-u)) calc(9 * var(--cc-u)) calc(18 * var(--cc-u));
  background: var(--surface);
  border: calc(1 * var(--cc-u)) solid var(--line);

}

.footer-badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(10 * var(--cc-u)) calc(12 * var(--cc-u));
}

.footer-badges .badge-group:nth-child(2n) {
  padding-left: calc(30 * var(--cc-u));
}

.badge-group__title {
  margin: 0 0 calc(10 * var(--cc-u));
  color: var(--ink-soft);
  font-size: calc(15.9 * var(--cc-u));
  font-weight: 400;
}

.badge-group__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(14 * var(--cc-u)) calc(13 * var(--cc-u));
}

.badge-group__list img {
  height: calc(25 * var(--cc-u));
  width: auto;
  object-fit: contain;
}

.badge-group__list--social img {
  height: calc(25 * var(--cc-u));
  width: calc(25 * var(--cc-u));
}

.badge-group__list--stacked {
  flex-direction: column;
  align-items: flex-start;
}

/* Chơi Có Trách Nhiệm — kéo logo lên một chút */
.footer-badges .badge-group:nth-child(4) .badge-group__list {
  margin-top: calc(-1 * var(--cc-u));
}

/* --------------------------------------------------------------------------
   Motion — tham khảo F8BET/sinhnhat (FOUC, float, shine, pulse)
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  html:not(.hero-ready) [data-hero] {
    opacity: 0;
  }
}

@keyframes float-y {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes hero-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, calc(-7 * var(--cc-u)), 0);
  }
}

@keyframes hero-glow-breathe {
  0%,
  100% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes status-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(63, 165, 101, 0.55);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 calc(4 * var(--cc-u)) rgba(63, 165, 101, 0);
    opacity: 0.85;
  }
}

@keyframes button-shine {
  from {
    left: -55%;
  }
  to {
    left: 115%;
  }
}

@keyframes featured-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(26, 186, 78, 0.35);
  }
  50% {
    box-shadow: 0 0 calc(14 * var(--cc-u)) calc(2 * var(--cc-u)) rgba(26, 186, 78, 0.28);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .status__dot {
    animation: status-pulse 1.8s ease-in-out infinite;
  }

  .hero__art.is-float {
    animation: hero-float 4.2s ease-in-out infinite;
  }

  .hero__glow.is-float {
    animation: hero-glow-breathe 4.2s ease-in-out infinite;
  }

  [data-float].is-float {
    animation: float-y 4s ease-in-out infinite;
  }
}

@media (hover: hover) and (pointer: fine) {
  .btn-access,
  .support,
  .gmail-guide__nav:not(:disabled),
  [data-shine] {
    position: relative;
    overflow: hidden;
  }

  .btn-access::before,
  .support::before,
  .gmail-guide__nav:not(:disabled)::before,
  [data-shine]::before {
    content: "";
    position: absolute;
    top: -40%;
    bottom: -40%;
    left: -55%;
    z-index: 2;
    width: 42%;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.12) 30%,
      rgba(255, 255, 255, 0.65) 50%,
      rgba(255, 255, 255, 0.12) 70%,
      transparent 100%
    );
    transform: skewX(-18deg);
  }

  .btn-access:hover::before,
  .support:hover::before,
  .gmail-guide__nav:not(:disabled):hover::before,
  [data-shine]:hover::before {
    opacity: 1;
    animation: button-shine 0.85s ease-out forwards;
  }

  .link-card,
  .explore-card,
  .tile {
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease,
      border-color 0.2s ease,
      background-color 0.2s ease;
  }

  .link-card:hover {
    transform: translateY(calc(-2 * var(--cc-u)));
    box-shadow: 0 calc(6 * var(--cc-u)) calc(16 * var(--cc-u)) rgba(17, 120, 54, 0.12);
  }

  .tile:hover {
    border-color: rgba(54, 166, 56, 0.55);
    background: #f7fcf8;
    box-shadow: 0 calc(3 * var(--cc-u)) calc(10 * var(--cc-u)) rgba(17, 120, 54, 0.08);
    transform: translateY(calc(-1 * var(--cc-u)));
  }

  .tile:hover .tile__icon,
  .tile:hover .tile__step {
    transform: scale(1.1);
  }

  .tile:hover .tile__step {
    background: var(--brand);
  }

  .btn-access,
  .support,
  .link-more,
  .gmail-guide__nav:not(:disabled) {
    transition:
      transform 0.15s ease,
      opacity 0.2s ease,
      box-shadow 0.2s ease;
  }

  .btn-access:hover,
  .support:hover,
  .link-more:hover,
  .gmail-guide__nav:not(:disabled):hover {
    opacity: 0.94;
  }

  .btn-access:active,
  .support:active,
  .link-more:active,
  .gmail-guide__nav:not(:disabled):active {
    transform: translateY(1px);
    opacity: 0.88;
  }
}

@media (prefers-reduced-motion: reduce) {
  .status__dot,
  .hero__art.is-float,
  .hero__glow.is-float,
  [data-float].is-float {
    animation: none !important;
  }
}