/* Homepage promo for the iPhone 18 landing (/iphone-18).
   A full-width "launch stage" right under the trust strip: the colour runs
   edge to edge, the content keeps the shop's container. One bold element -
   a huge "18" drawn in a champagne hairline behind the two real phones.
   Graphite + burgundy are the phones' own colours; petrol and champagne tie
   it to the shop. Self-contained: no approved component is touched. */

#storefront-home-view .ckp18 {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background:
    radial-gradient(38% 90% at 62% 58%, rgba(169, 179, 188, .26), transparent 70%),
    radial-gradient(40% 95% at 84% 52%, rgba(194, 86, 111, .50), transparent 70%),
    radial-gradient(55% 120% at 0% 100%, rgba(18, 62, 68, .9), transparent 70%),
    linear-gradient(115deg, #0B2B30 0%, #141B1F 42%, #2A0F19 78%, #3A1220 100%);
}
/* Champagne hairlines that fade at both ends, as on the trust strip above. */
#storefront-home-view .ckp18::before,
#storefront-home-view .ckp18::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 168, 110, .45) 30%, rgba(200, 168, 110, .45) 70%, transparent);
}
#storefront-home-view .ckp18::before { top: 0; }
#storefront-home-view .ckp18::after { bottom: 0; }
.ckp18 * { font-feature-settings: "locl" 0 !important; }

.ckp18-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 24px;
  min-height: clamp(420px, 34vw, 520px);
}
.ckp18-copy { padding: clamp(40px, 5vw, 64px) 0; position: relative; z-index: 2; }
.ckp18-kicker {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 18px;
  color: rgba(255, 255, 255, .86);
  font: 600 .98rem/1.2 'Manrope', sans-serif;
}
.ckp18-kicker span {
  padding: 5px 12px;
  border-radius: 999px;
  color: #0B2B30;
  background: linear-gradient(110deg, #B8955A, #E7D3A8, #B8955A);
  font-weight: 800;
  font-size: .82rem;
}
#storefront-home-view .ckp18 h2 {
  margin: 0;
  color: #fff !important;
  font: 800 clamp(2rem, 3.9vw, 3.4rem)/1.03 'Manrope', sans-serif;
  letter-spacing: -.028em;
  max-width: 14ch;
  text-wrap: balance;
}
.ckp18 h2 em { font-style: normal; color: #E1C792; }
.ckp18-lead { margin: 18px 0 0; max-width: 42ch; color: rgba(255, 255, 255, .8); font-size: 1.06rem; line-height: 1.55; }
.ckp18-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ckp18-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 24px;
  border-radius: 14px;
  font: 800 1rem/1 'Manrope', sans-serif;
  text-decoration: none;
  color: #0B2B30 !important;
  background: linear-gradient(110deg, #B8955A 0%, #DCC28C 50%, #B8955A 100%) 0 0 / 200% 100%;
  box-shadow: 0 12px 30px rgba(184, 149, 90, .25);
  transition: background-position .5s, transform .25s;
}
.ckp18-btn:hover { background-position: 100% 0; transform: translateY(-1px); }
.ckp18-btn--max {
  background: rgba(255, 255, 255, .06);
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(226, 112, 138, .7);
}
.ckp18-btn--max:hover { background: rgba(194, 86, 111, .28); }
.ckp18-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* The stage: numeral, floor, two phones. */
.ckp18-stage {
  position: relative;
  align-self: stretch;
  display: block;
  min-height: 380px;
}
.ckp18-numeral {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -54%);
  font: 800 clamp(300px, 36vw, 560px)/.8 'Manrope', sans-serif;
  letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(231, 211, 168, .34);
  background: linear-gradient(180deg, rgba(231, 211, 168, .10), transparent 70%);
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
  pointer-events: none;
}
.ckp18-floor {
  position: absolute;
  left: 8%; right: 0;
  bottom: 8%;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent);
  filter: blur(6px);
}
.ckp18-stage img {
  position: absolute;
  bottom: 10%;
  height: auto;
  filter: drop-shadow(0 30px 34px rgba(0, 0, 0, .5));
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
.ckp18-pro { width: clamp(140px, 16vw, 240px); left: 10%; transform: rotate(-8deg); }
.ckp18-max { width: clamp(155px, 18vw, 265px); right: 8%; transform: rotate(6deg); bottom: 9% !important; }
.ckp18:hover .ckp18-pro { transform: rotate(-9deg) translate(-6px, -10px); }
.ckp18:hover .ckp18-max { transform: rotate(7deg) translate(6px, -14px); }

/* always (was no-preference) */
  .ckp18-numeral { animation: ckp18-glint 6s ease-in-out infinite; }

@keyframes ckp18-glint {
  0%, 100% { -webkit-text-stroke-color: rgba(231, 211, 168, .22); }
  50% { -webkit-text-stroke-color: rgba(231, 211, 168, .42); }
}
/* reduce-motion opt-out (html.ck-calm) */ html.ck-calm .ckp18-stage img { transition: none; } 

@media (max-width: 900px) {
  .ckp18-inner { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .ckp18-copy { padding: 40px 0 8px; }
  .ckp18-stage { min-height: 300px; }
  .ckp18-numeral { font-size: 280px; }
  .ckp18-pro { width: 150px; left: calc(50% - 165px); }
  .ckp18-max { width: 168px; right: calc(50% - 175px); }
  .ckp18-floor { left: 10%; right: 10%; }
}
@media (max-width: 480px) {
  .ckp18-actions .ckp18-btn { flex: 1 1 100%; }
  .ckp18-stage { min-height: 320px; }
  .ckp18-numeral { font-size: 260px; top: 44%; }
  .ckp18-pro { width: 128px; left: calc(50% - 140px); }
  .ckp18-max { width: 145px; right: calc(50% - 150px); }
}
.ckp18-nw { white-space: nowrap; }