/* Product hierarchy: Duo leads; Classic remains available without competing for attention. */
.hero-copy {
  max-width: 620px;
  margin-inline: auto;
}

.purchase-reassurance {
  margin: 14px 0 0;
  color: #74685e;
  font-size: 12px;
}

.closing-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  flex-shrink: 0;
}

.closing-actions .text-link {
  color: #62554b;
  font-size: 12px;
}

.edition-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
}

.classic-edition {
  align-self: center;
  opacity: .88;
}

@property --hero-glow {
  syntax: '<color>';
  inherits: true;
  initial-value: rgba(169, 156, 143, .45);
}

@property --hero-horizon {
  syntax: '<color>';
  inherits: true;
  initial-value: #e9e2db;
}

body {
  --hero-glow: rgba(169, 156, 143, .45);
  --hero-horizon: #e9e2db;
}

body[data-device-color='night'] {
  --hero-glow: rgba(47, 75, 101, .34);
  --hero-horizon: #d8e0e7;
}

body[data-device-color='ruby'] {
  --hero-glow: rgba(173, 55, 78, .38);
  --hero-horizon: #ead1d5;
}

body[data-device-color='pearl'] {
  --hero-glow: rgba(199, 211, 218, .5);
  --hero-horizon: #edf0f1;
}

.product-stage[data-color='night'] {
  --metal: #3d566e;
  --case: #0b1c2c;
}

.product-stage[data-color='night'] .device-back {
  background:
    linear-gradient(150deg, #334b61 0%, #1c3348 38%, #10263a 68%, #071725 100%);
}

.product-stage[data-color='night'] .camera-bar {
  background: linear-gradient(160deg, #6d82943d, #071a2b8a);
  border-color: #718aa05c;
}

.product-stage[data-color='night'] .back-brand {
  color: #020a12a8;
}

.swatches button[data-color='night'] {
  background: linear-gradient(135deg, #506981, #233b52 52%, #081827);
}

.screen-status {
  align-items: flex-start;
  padding-top: 9px;
}

.screen-status > span:last-child {
  display: flex;
  justify-content: flex-end;
}

.screen-status img {
  width: 25px;
  height: 25px;
  margin-top: -4px;
  filter: drop-shadow(0 1px 2px #1116);
  opacity: .94;
}

.hero {
  background:
    radial-gradient(ellipse at 50% 69%, var(--hero-glow), transparent 54%),
    linear-gradient(180deg, #faf9f7 12%, var(--hero-horizon) 83%, #faf9f7 100%);
  transition: --hero-glow .75s cubic-bezier(.22, 1, .36, 1), --hero-horizon .75s cubic-bezier(.22, 1, .36, 1);
}

.product-stage.is-view-exiting .screen-clock,
.product-stage.is-view-exiting .screen-memory,
.product-stage.is-view-exiting .screen-main,
.product-stage.is-view-exiting .screen-apps,
.product-stage.is-view-exiting .screen-dock {
  opacity: 0;
  transform: translateY(7px) scale(.96);
  transition: opacity .14s ease-out, transform .14s ease-out;
}

.product-stage.is-view-entering .fold-device {
  animation: device-settle .72s cubic-bezier(.22, 1, .36, 1) both;
}

.product-stage.is-view-entering .screen-clock {
  animation: screen-content-arrive .58s .12s cubic-bezier(.22, 1, .36, 1) both;
}

.product-stage.is-view-entering .screen-apps img {
  animation: app-icon-arrive .5s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(120ms + var(--icon-order) * 38ms);
}

.screen-memory,
.screen-main {
  display: none;
}

.product-stage[data-view='open'] .screen-memory {
  position: absolute;
  top: 48px;
  bottom: 23px;
  left: 15px;
  display: block;
  width: 121px;
  overflow: hidden;
  border: 1px solid #ffffff61;
  border-radius: 18px;
  background: #77708d;
  box-shadow: inset 0 1px 1px #ffffff66, 0 5px 13px #241b322c;
}

.screen-memory img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.screen-memory::after {
  content: '';
  position: absolute;
  inset: 44% 0 0;
  background: linear-gradient(transparent, #16121ab8);
}

.screen-memory > span {
  position: absolute;
  z-index: 2;
  left: 10px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  color: #fff;
  text-align: left;
  text-shadow: 0 1px 4px #111a;
}

.screen-memory > span strong { font-size: 9px; line-height: 1.15; }
.screen-memory > span small { margin-top: 2px; font-size: 5px; font-weight: 700; }
.screen-memory > b {
  position: absolute;
  z-index: 2;
  right: 8px;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding-left: 1px;
  border: 1px solid #ffffff65;
  border-radius: 50%;
  background: #f5f3f34d;
  color: #fff;
  font-size: 7px;
  backdrop-filter: blur(10px);
}

.product-stage[data-view='open'] .screen-main {
  position: absolute;
  top: 48px;
  right: 52px;
  bottom: 26px;
  left: 148px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.screen-widgets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  height: 73px;
}

.screen-widgets > div {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #ffffff55;
  border-radius: 15px;
  box-shadow: inset 0 1px #ffffff66, 0 4px 10px #2e24342b;
  text-align: left;
}

.screen-weather {
  display: flex;
  flex-direction: column;
  padding: 7px 9px;
  background: linear-gradient(155deg, #238fc3, #78bed4);
  color: #fff;
}

.screen-weather span { font-size: 6px; font-weight: 600; }
.screen-weather strong { font-size: 23px; line-height: 1; font-weight: 400; letter-spacing: -1px; }
.screen-weather small { margin-top: auto; font-size: 5px; font-weight: 600; }

.screen-map {
  background: linear-gradient(145deg, #d4e2bd, #ecdfba 52%, #bcd3ad);
  color: #445145;
}

.screen-map::before,
.screen-map::after {
  content: '';
  position: absolute;
  left: -20%;
  width: 145%;
  height: 8px;
  border: 3px solid #f8f3e9;
  border-right: 0;
  border-left: 0;
  background: #e9c664;
  transform: rotate(-26deg);
}

.screen-map::before { top: 17px; }
.screen-map::after { top: 47px; transform: rotate(23deg); }
.screen-map i {
  position: absolute;
  top: -7px;
  right: -4px;
  width: 30px;
  height: 75px;
  border-radius: 55% 0 0 55%;
  background: #8ed0dc;
  transform: rotate(10deg);
}
.screen-map b {
  position: absolute;
  z-index: 2;
  top: 6px;
  right: 7px;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #a77868;
  color: #fff;
  font-size: 6px;
}
.screen-map strong {
  position: absolute;
  z-index: 2;
  bottom: 6px;
  left: 7px;
  padding: 2px 4px;
  border-radius: 4px;
  background: #fbf7eadb;
  font-size: 5px;
}

.product-stage[data-view='open'] .screen-main .screen-apps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px 14px;
  padding: 0 4px;
}

.product-stage[data-view='open'] .screen-main .screen-apps img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  box-shadow: 0 3px 7px #2d23343d;
}

.product-stage[data-view='open'] .screen-dock {
  top: 53%;
  right: 10px;
  bottom: auto;
  left: auto;
  display: flex;
  width: auto;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border: 1px solid #ffffff42;
  border-radius: 15px;
  background: #eee6ec50;
  transform: translateY(-50%);
  backdrop-filter: blur(12px);
}

.product-stage[data-view='open'] .screen-dock img {
  width: 27px;
  height: 27px;
  border-radius: 7px;
}

.product-stage.is-view-entering[data-view='open'] .screen-memory,
.product-stage.is-view-entering[data-view='open'] .screen-widgets {
  animation: wide-panel-arrive .58s .12s cubic-bezier(.22, 1, .36, 1) both;
}

.product-stage.is-view-entering[data-view='open'] .screen-widgets {
  animation-delay: .19s;
}

.product-stage.is-view-entering[data-view='open'] .screen-dock {
  animation: side-dock-arrive .58s .3s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes wide-panel-arrive {
  from { opacity: 0; transform: translateY(9px) scale(.95); filter: blur(2px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes side-dock-arrive {
  from { opacity: 0; transform: translate(9px, -50%) scale(.93); }
  to { opacity: 1; transform: translate(0, -50%) scale(1); }
}

.product-stage.is-view-entering .screen-dock {
  animation: dock-arrive .58s .32s cubic-bezier(.22, 1, .36, 1) both;
}

.product-stage.is-view-entering .screen-dock img {
  animation: app-icon-arrive .45s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(390ms + var(--icon-order) * 45ms);
}

.product-stage.is-color-changing .fold-device {
  animation: color-settle .68s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes app-icon-arrive {
  0% { opacity: 0; transform: translateY(13px) scale(.74); filter: blur(3px); }
  68% { opacity: 1; transform: translateY(-1px) scale(1.025); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes dock-arrive {
  from { opacity: 0; transform: translateY(14px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes screen-content-arrive {
  from { opacity: 0; transform: translateY(10px); filter: blur(2px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes device-settle {
  0% { filter: drop-shadow(0 18px 13px rgba(55, 36, 27, .16)); }
  55% { filter: drop-shadow(0 32px 23px rgba(55, 36, 27, .24)); }
  100% { filter: drop-shadow(0 25px 18px rgba(55, 36, 27, .21)); }
}

@keyframes color-settle {
  0% { filter: saturate(.8) brightness(1.08); }
  100% { filter: saturate(1) brightness(1); }
}

/* Duo visual language: Night Sky, polished silver, and clear system typography. */
:root {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  color: #10141a;
  background: #f7f9fb;
}

body {
  --accent: #265f8f;
  --accent-deep: #102d48;
  --accent-soft: #dce8f2;
  --surface: #f7f9fb;
  --surface-raised: #ffffff;
  --line: rgba(20, 43, 63, .12);
  --muted: #64717d;
  color: #10141a;
  background: var(--surface);
  letter-spacing: -.012em;
  transition: background-color .75s cubic-bezier(.22, 1, .36, 1);
}

body[data-device-color='night'] {
  --accent: #2a6799;
  --accent-deep: #0c2943;
  --accent-soft: #d9e7f2;
  --hero-glow: rgba(40, 104, 155, .31);
  --hero-horizon: #dce8f1;
}

body[data-device-color='ruby'] {
  --accent: #a52747;
  --accent-deep: #5f1027;
  --accent-soft: #f2dce2;
  --hero-glow: rgba(177, 38, 74, .28);
  --hero-horizon: #f0dfe4;
}

body[data-device-color='pearl'] {
  --accent: #5c7181;
  --accent-deep: #283b49;
  --accent-soft: #e6edf1;
  --hero-glow: rgba(151, 176, 192, .34);
  --hero-horizon: #e8eef2;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline-color: #0a84ff;
}

.navigation {
  background: rgba(248, 250, 252, .82);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 18px rgba(15, 36, 54, .035);
}

.wordmark {
  color: #0c1117;
  font-weight: 750;
  letter-spacing: -.055em;
}

.wordmark span,
.intro,
.eyebrow,
.edition-label,
.feature-lines article > span {
  color: var(--accent);
}

.navigation nav {
  color: #3f4c57;
  font-weight: 520;
}

.navigation nav a,
.text-link,
.closing-actions .text-link {
  transition: color .2s ease;
}

.navigation nav a:hover,
.text-link:hover,
.closing-actions .text-link:hover {
  color: var(--accent);
}

.nav-buy,
.primary {
  color: #fff;
  background: linear-gradient(145deg, var(--accent), var(--accent-deep));
  box-shadow: 0 9px 24px color-mix(in srgb, var(--accent) 25%, transparent);
}

.nav-buy,
.button {
  font-weight: 650;
  letter-spacing: -.012em;
}

.hero {
  background:
    radial-gradient(ellipse at 50% 66%, var(--hero-glow), transparent 55%),
    linear-gradient(180deg, #fbfcfd 10%, var(--hero-horizon) 82%, #f7f9fb 100%);
}

.hero h1,
h2,
.edition-grid h3 {
  color: #0c1117;
  text-wrap: balance;
}

.hero h1 {
  font-weight: 660;
  letter-spacing: -.068em;
}

.hero h1 em {
  color: var(--accent);
}

.hero-copy,
.lead,
.feature-lines p,
.app-strip p,
.edition-grid p,
.questions details p,
.press > p:not(.eyebrow),
.contact p:not(.eyebrow) {
  color: var(--muted);
}

.purchase-reassurance,
.interaction-hint,
.edition-bottom small,
.press small,
footer p,
footer > div {
  color: #778591;
}

.segmented {
  border: 1px solid rgba(255, 255, 255, .75);
  background: rgba(213, 224, 233, .74);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78), 0 8px 22px rgba(24, 54, 78, .08);
  backdrop-filter: blur(18px);
}

.segmented button {
  color: #53616d;
}

.segmented button[aria-pressed='true'] {
  color: #0e1821;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 3px 12px rgba(23, 53, 76, .12);
}

.swatches button[aria-pressed='true'] {
  outline-color: var(--accent);
}

.experience,
.editions,
.press,
.questions,
footer {
  background: #f7f9fb;
}

.feature-lines article,
.questions,
.questions details,
.edition-grid article {
  border-color: var(--line);
}

.app-story {
  background:
    radial-gradient(circle at 14% 12%, rgba(255, 255, 255, .82), transparent 38%),
    linear-gradient(145deg, #e5edf3, #dce6ee 52%, #edf2f5);
}

.app-strip article {
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 24px;
  background: rgba(255, 255, 255, .48);
  box-shadow: inset 0 1px 0 #fff, 0 15px 35px rgba(25, 55, 78, .07);
  backdrop-filter: blur(18px);
}

.app-strip img {
  box-shadow: 0 12px 24px rgba(22, 48, 68, .16);
}

.ultra-edition {
  color: #f5f9fc;
  border-color: rgba(151, 193, 225, .25) !important;
  background:
    radial-gradient(circle at 82% 10%, rgba(79, 137, 181, .42), transparent 42%),
    linear-gradient(150deg, #173d5d, #0b263e 62%, #071b2d);
  box-shadow: 0 28px 60px rgba(13, 42, 65, .18);
}

.ultra-edition h3,
.ultra-edition .price {
  color: #fff;
}

.ultra-edition p,
.ultra-edition small {
  color: #c1d2df;
}

.ultra-edition .edition-label,
.ultra-edition li::before {
  color: #8fc9f3;
}

.ultra-edition .primary {
  color: #10283d;
  background: #f5f9fc;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
}

.classic-edition {
  background: #eef2f5;
}

.edition-bottom .price {
  color: #101820;
}

.contact {
  color: #eef6fc;
  background:
    radial-gradient(circle at 78% 30%, rgba(66, 126, 173, .42), transparent 35%),
    linear-gradient(140deg, #102f4a, #081e31 65%, #061725);
}

.contact h2 {
  color: #fff;
}

.contact .eyebrow {
  color: #8fc9f3;
}

.contact p:not(.eyebrow) {
  color: #bdcedb;
}

.contact .primary {
  color: #10283d;
  background: #f5f9fc;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}

#payment-status {
  color: #b22c4b;
}

@media (max-width: 700px) {
  .edition-grid {
    grid-template-columns: 1fr;
  }

  .classic-edition {
    opacity: 1;
  }
}

@media (max-width: 480px) {
  .navigation nav { display: none; }
  .nav-buy, .button { white-space: nowrap; }
  .hero h1 {
    font-size: clamp(34px, 9.5vw, 46px);
    letter-spacing: -.055em;
    line-height: 1.1;
  }
  .actions {
    flex-direction: column;
    gap: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero { transition: none; }
  .product-stage.is-view-entering .fold-device,
  .product-stage.is-view-entering .screen-clock,
  .product-stage.is-view-entering .screen-memory,
  .product-stage.is-view-entering .screen-widgets,
  .product-stage.is-view-entering .screen-apps img,
  .product-stage.is-view-entering .screen-dock,
  .product-stage.is-view-entering .screen-dock img,
  .product-stage.is-color-changing .fold-device { animation: none; }
}