.bento {
  --blue: #4f7dff;
  --violet: #7a5cff;
  --hot: #ff3b57;
  --edge: #dfe3ee;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}

.tile {
  position: relative;
  grid-column: span 2;
  min-height: 470px;
  padding: 26px 28px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(80, 90, 140, 0.16);
  border-radius: 10px;
}
.tile-payments { grid-column: span 4; min-height: 500px; }
.tile-billing { min-height: 500px; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.tile h3 {
  position: relative;
  z-index: 3;
  max-width: 14em;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: #0b0b0c;
}
.tile-payments h3 { max-width: 20em; }

.tile-expand {
  position: absolute;
  z-index: 4;
  top: 22px;
  right: 22px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 6px;
  background: rgba(79, 125, 255, 0.13);
  color: #3b4fd8;
  cursor: pointer;
  transition: background 0.2s;
}
.tile-expand:hover { background: rgba(79, 125, 255, 0.24); }

.tile-payments {
  background:
    radial-gradient(55% 75% at 0% 100%, rgba(122, 92, 255, 0.9), rgba(79, 125, 255, 0.5) 38%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(38% 36% at 100% 0%, rgba(255, 59, 87, 0.5), transparent 72%),
    radial-gradient(30% 40% at 100% 60%, rgba(255, 130, 160, 0.3), transparent 72%),
    #fff;
}

.rw-phone {
  position: absolute;
  left: 46px;
  top: 108px;
  width: 204px;
  padding: 7px;
  background: #11130f;
  border-radius: 38px;
  box-shadow: 0 32px 50px -26px rgba(20, 20, 70, 0.75);
  transform: rotate(-3deg);
}
.rw-phone img { display: block; width: 100%; height: auto; border-radius: 31px; }

.rw-still {
  position: absolute;
  margin: 0;
  overflow: hidden;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 44px -26px rgba(40, 30, 120, 0.6), 0 0 0 1px rgba(80, 90, 140, 0.14);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.5s;
  will-change: transform;
}
.rw-still img { display: block; width: 100%; height: auto; }
.rw-stats { left: 288px; top: 100px; z-index: 1; width: 300px; transform: rotate(-1.5deg); }
.rw-trend { left: 478px; top: 258px; z-index: 2; width: 296px; transform: rotate(1.5deg); }
.rw-split { left: 292px; top: 338px; z-index: 3; width: 236px; transform: rotate(-1deg); }
.rw-still:hover {
  z-index: 6;
  transform: translateY(-14px) scale(1.18) rotate(0deg);
  box-shadow: 0 40px 64px -26px rgba(40, 30, 120, 0.75), 0 0 0 1px rgba(80, 90, 140, 0.18);
}

.tile-logo { position: absolute; z-index: 4; top: 20px; right: 22px; display: block; height: 34px; width: auto; }
.tile-logo img { display: block; width: auto; height: 100%; }
.tile-logo-chip { height: 40px; border-radius: 8px; box-shadow: 0 12px 22px -14px rgba(20, 23, 22, 0.7); transition: transform 0.25s; }
.tile-logo-chip:hover { transform: translateY(-2px); }
.tile-logo-chip img { display: block; height: 100%; width: auto; border-radius: 8px; }

.tile-daylog { background: radial-gradient(90% 48% at 50% 100%, rgba(212, 247, 138, 0.5), transparent 72%), #fff; }
.tile-daylog .daygrid-graph { position: absolute; left: 28px; right: 28px; top: 112px; width: auto; min-height: 330px; }
.tile-daylog:hover .daygrid-graph { --days: 35; }

.tile-hinge { padding: 0; background: #fff9ed; }
.tile-hinge .hinge-preview { max-width: none; min-height: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; }

.tile-portfolio { background: linear-gradient(180deg, #f1efff 0%, #fff 62%); }
.tile-portfolio .ribbon-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }

.credit-card {
  --rx: 0deg;
  --ry: 0deg;
  --lift: 0px;
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 100px;
  width: 236px;
  height: 338px;
  overflow: hidden;
  border-radius: 20px;
  color: #fff;
  text-decoration: none;
  transform: translateX(-50%) perspective(900px) translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  background: linear-gradient(130deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.04) 45%, rgba(255, 255, 255, 0.12));
  border: 1px solid rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: saturate(1.45) brightness(1.1);
  backdrop-filter: saturate(1.45) brightness(1.1);
  box-shadow:
    0 calc(30px + var(--lift) * -1) calc(46px + var(--lift) * -1.2) -26px rgba(40, 30, 140, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  will-change: transform;
}
.credit-card .chip { position: absolute; top: 22px; left: 22px; width: 40px; height: 30px; border-radius: 6px; background: linear-gradient(135deg, #fbf9ff, #cfc9ff); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset; }
.credit-card .tap { position: absolute; top: 25px; left: 70px; opacity: 0.92; }
.avatar {
  position: absolute;
  top: 66px;
  left: 50%;
  width: 116px;
  height: 116px;
  object-fit: cover;
  border: 3px solid #fff;
  border-radius: 50%;
  transform: translateX(-50%) translateZ(24px);
  box-shadow: 0 16px 26px -14px rgba(20, 10, 80, 0.7);
}
.card-base {
  position: absolute;
  left: -24%;
  right: -24%;
  bottom: -46px;
  height: 190px;
  background: #fff;
  border-radius: 60% 40% 0 0 / 46px 34px 0 0;
  transform: rotate(-7deg);
}
.card-name { position: absolute; left: 24px; bottom: 44px; font-family: var(--display); font-size: 50px; line-height: 1; letter-spacing: 0.02em; color: #0b0b0c; }
.card-title { position: absolute; left: 24px; bottom: 22px; font-size: 15px; font-weight: 500; letter-spacing: -0.005em; color: #4a4447; }
.card-arrow { position: absolute; right: 22px; bottom: 50px; color: #3b4fd8; }

@font-face { font-family: Fraunces; src: url("afterglow/assets/fraunces.woff2") format("woff2"); font-display: swap; }

.tile-afterglow {
  display: block;
  padding: 0;
  color: #eee7d8;
  text-decoration: none;
  background: linear-gradient(180deg, #090e17 0%, #141b2c 38%, #3a3042 66%, #8a5a4a 88%, #c98a5a 100%);
  border-color: rgba(230, 188, 146, 0.28);
}
.ag-stars {
  position: absolute;
  inset: 0 0 45%;
  opacity: 0.85;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 22%, #eee7d8 50%, transparent 55%),
    radial-gradient(1px 1px at 28% 48%, #eee7d8 50%, transparent 55%),
    radial-gradient(1.4px 1.4px at 44% 14%, #eee7d8 50%, transparent 55%),
    radial-gradient(1px 1px at 63% 36%, #eee7d8 50%, transparent 55%),
    radial-gradient(1.2px 1.2px at 78% 18%, #eee7d8 50%, transparent 55%),
    radial-gradient(1px 1px at 90% 52%, #eee7d8 50%, transparent 55%),
    radial-gradient(1px 1px at 8% 66%, #eee7d8 50%, transparent 55%),
    radial-gradient(1.3px 1.3px at 54% 62%, #eee7d8 50%, transparent 55%);
}
.ag-moon {
  position: absolute;
  top: 176px;
  right: 58px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f8efdc, #e2c9a2);
  box-shadow: 0 0 44px 10px rgba(230, 188, 146, 0.35);
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.9s;
}
.tile-afterglow:hover .ag-moon { transform: translate(-12px, -10px); box-shadow: 0 0 64px 16px rgba(230, 188, 146, 0.5); }
.ag-mountains { position: absolute; left: 0; bottom: 0; width: 100%; height: 52%; }
.ag-logo { position: absolute; z-index: 3; top: 26px; left: 28px; width: auto; height: 32px; }
.ag-kicker { position: absolute; z-index: 3; top: 82px; left: 28px; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #e6bc92; }
.tile-afterglow h3 { top: 104px; left: 28px; right: 28px; max-width: 11em; position: absolute; color: #f3ead8; font-family: Fraunces, Georgia, serif; font-size: 27px; font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; }

@media (max-width: 960px) {
  .bento { grid-template-columns: 1fr; }
  .tile, .tile-payments { grid-column: auto; }
}

@media (max-width: 640px) {
  .tile-logo { top: 22px; right: auto; left: 28px; height: 26px; }
  .tile-logo-chip { height: 32px; }
  .tile-payments h3, .tile-daylog h3 { padding-top: 40px; }
  .tile-payments .rw-phone { top: 150px; }
  .tile-payments .rw-stats { top: 142px; }
  .tile-payments .rw-trend { top: 272px; }
  .tile-payments { min-height: 560px; }
  .tile-daylog { min-height: 540px; }
  .tile-daylog .daygrid-graph { top: 152px; min-height: 330px; }
  .rw-phone { left: 20px; width: 150px; }
  .rw-stats { left: 150px; width: 240px; }
  .rw-trend { left: 190px; top: 230px; width: 240px; }
  .rw-split { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rw-still { transition: none; }
}

@property --days {
  syntax: "<integer>";
  initial-value: 7;
  inherits: true;
}

.daygrid-graph {
  --days: 7;
  --tile: 26px;
  --gap: 5px;

  position: relative;
  width: 100%;
  min-height: 240px;
  overflow: hidden;
  border: 1px solid #d4f78a26;
  border-radius: 6px;
  background: #141716;
  color: #eff2e9;
  font-family: "Hanken Grotesk", "Segoe UI", sans-serif;
  transition: --days 1.4s cubic-bezier(.2, .7, .2, 1);
}

.daygrid-graph::before {
  content: "";
  position: absolute;
  inset: 68px 24px 28px;
  background: linear-gradient(90deg, #d4f78a calc(var(--days) / 35 * 100%), #293127 0);
  -webkit-mask-image:
    repeating-linear-gradient(90deg, #000 0 calc(100% / 7 - var(--gap)), transparent 0 calc(100% / 7)),
    repeating-linear-gradient(0deg, #000 0 calc(100% / 5 - var(--gap)), transparent 0 calc(100% / 5));
  -webkit-mask-composite: source-in;
  mask-image:
    repeating-linear-gradient(90deg, #000 0 calc(100% / 7 - var(--gap)), transparent 0 calc(100% / 7)),
    repeating-linear-gradient(0deg, #000 0 calc(100% / 5 - var(--gap)), transparent 0 calc(100% / 5));
  mask-composite: intersect;
  transition: filter .4s ease;
}

.daygrid-graph::after {
  counter-reset: days var(--days);
  content: counter(days) " days noticed";
  position: absolute;
  top: 24px;
  left: 24px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.04em;
}

.daygrid-graph:hover,
.daygrid-graph:focus-visible {
  --days: 35;
}

.daygrid-graph:hover::before {
  filter: drop-shadow(0 0 10px #d4f78a20);
}

.daygrid-graph:focus-visible {
  outline: 2px solid #d4f78a;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .daygrid-graph,
  .daygrid-graph::before {
    transition: none;
  }
}