/* ClockDoc. Dark is the enamel dial; light is the white enamel dial. Every selector sits under .cdp. */
.cdp {
  --cd-dial: #14122E;
  --cd-dial-2: #1C1940;
  --cd-lume: #EFECFF;
  --cd-lume-2: #B9B4D9;
  --cd-steel: #A7ACC0;
  --cd-steel-dim: #3F425A;
  --cd-violet: #9488F8;
  --cd-violet-ink: #14122E;
  --cd-seconds: #E5484D;
  --cd-ink-on-bezel: #1B1842;
  --cd-bezel: linear-gradient(145deg, #C9CDD9 0%, #6D7187 38%, #E7E9F0 55%, #5B5F73 100%);
  --cd-display: 'Bodoni Moda', "Bodoni Moda Fallback: Times New Roman", "Bodoni Moda Fallback: Georgia", 'Didot', 'Bodoni 72', Georgia, serif;
  --cd-text: 'Hanken Grotesk', "Hanken Grotesk Fallback: Segoe UI", "Hanken Grotesk Fallback: Arial", system-ui, sans-serif;

  /* The shared buttons, dressed for this world */
  --pa-primary-bg: var(--cd-violet);
  --pa-primary-fg: var(--cd-violet-ink);
  --pa-secondary-fg: var(--cd-lume);
  --pa-secondary-border: var(--cd-steel-dim);
  --pa-secondary-border-hover: var(--cd-steel);
  --pa-focus: var(--cd-violet);
  --pa-font: var(--cd-text);

  background: radial-gradient(120% 70% at 75% 0%, var(--cd-dial-2), var(--cd-dial) 55%);
  color: var(--cd-lume);
  font-family: var(--cd-text);
  font-size: 1.0625rem;
  line-height: 1.6;
}
[data-theme="light"] .cdp {
  --cd-dial: #F3F2F9;
  --cd-dial-2: #E7E5F3;
  --cd-lume: #1B1842;
  --cd-lume-2: #4D4A72;
  --cd-steel: #6E7389;
  --cd-steel-dim: #CFCEE0;
  --cd-violet: #4B3CD0;
  --cd-violet-ink: #FFFFFF;
  --cd-seconds: #D33A40;
  --cd-bezel: linear-gradient(145deg, #E9EBF1 0%, #9EA2B4 40%, #FFFFFF 56%, #8B8FA3 100%);
}
.cdp-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 56px); }
.cdp p { max-width: none; }

/* Type */
.cdp-title, .cdp-h2, .cdp-closing-line {
  color: var(--cd-lume);
  font-family: var(--cd-display);
  font-optical-sizing: auto;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.cdp-title { margin: 1rem 0 1.5rem; font-size: clamp(3rem, 7vw, 5.5rem); line-height: 0.98; text-wrap: balance; }
.cdp-h2 { font-size: clamp(2.1rem, 4vw, 3rem); line-height: 1.05; text-wrap: balance; }
.cdp-h2--small { font-size: clamp(1.8rem, 3vw, 2.25rem); }
.cdp-h3 { margin-bottom: 0.4rem; color: var(--cd-lume); font-family: var(--cd-text); font-size: 1.15rem; font-weight: 600; letter-spacing: 0; }
.cdp-status { color: var(--cd-violet); font-size: 0.95rem; }
.cdp .cdp-lede { max-width: 34em; color: var(--cd-lume-2); font-size: 1.2rem; }
.cdp .cdp-sub, .cdp .cdp-step p, .cdp .cdp-comp p { max-width: 38em; color: var(--cd-lume-2); }
.cdp-sub { margin-top: 1rem; }
.cdp-langnote { margin-top: 1rem; color: var(--cd-lume-2); font-size: 0.95rem; }
.cdp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2.25rem; }
.cdp-actions--center { justify-content: center; }

/* Hero */
.cdp-hero { padding: clamp(7rem, 14vw, 9.5rem) 0 2.5rem; }
.cdp-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 48px; }
.cdp-dial { justify-self: end; width: 100%; max-width: 470px; }
@media (max-width: 900px) {
  .cdp-hero-grid { grid-template-columns: 1fr; }
  .cdp-dial { order: -1; justify-self: center; max-width: 320px; }
}
.cdp-track {
  height: 22px;
  margin: 1.5rem 0 4rem;
  background:
    repeating-linear-gradient(90deg, var(--cd-steel) 0 1px, transparent 1px 100px) bottom / 100% 22px no-repeat,
    repeating-linear-gradient(90deg, var(--cd-steel-dim) 0 1px, transparent 1px 20px) bottom / 100% 10px no-repeat;
}

/* The dial */
.dial { display: block; width: 100%; height: auto; overflow: visible; }
.dial .enamel-hi { stop-color: var(--cd-dial-2); }
.dial .enamel-lo { stop-color: var(--cd-dial); }
.dial .bezel { fill: none; stroke: var(--cd-steel); stroke-width: 3; }
.dial .face { stroke: var(--cd-steel-dim); stroke-width: 1; }
.dial .tick { stroke: var(--cd-steel); stroke-width: 1.5; }
.dial .tick--hour { stroke: var(--cd-lume); stroke-width: 4; }
.dial .numerals text { fill: var(--cd-lume); font-family: var(--cd-display); font-size: 44px; text-anchor: middle; dominant-baseline: central; }
.dial .maker { fill: var(--cd-lume-2); font-family: var(--cd-text); font-size: 15px; letter-spacing: 3px; text-anchor: middle; }
.dial .hand { fill: var(--cd-lume); }
.dial .seconds line { stroke: var(--cd-seconds); stroke-width: 3; }
.dial .seconds circle { fill: var(--cd-seconds); }
.dial .pin { fill: var(--cd-steel); }

/* Movement */
.cdp-movement-head { max-width: 40em; }
.cdp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin: 3rem 0 4rem; padding: 0; list-style: none; }
.cdp-subdial {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 1rem;
  border: 1.5px solid var(--cd-steel);
  border-radius: 50%;
  box-shadow: inset 0 0 0 6px var(--cd-dial), inset 0 0 0 7px var(--cd-steel-dim);
  color: var(--cd-lume);
  font-family: var(--cd-display);
  font-size: 1.3rem;
}
@media (max-width: 860px) { .cdp-steps { grid-template-columns: 1fr; gap: 28px; } }

/* Plates: screenshots set in a brushed-steel bezel. The UI inside is untouched. */
.cdp-plate { margin: 0; }
.cdp-plate figcaption { margin-top: 0.85rem; color: var(--cd-lume-2); font-size: 0.9rem; }
.cdp-bezel { padding: 7px; border-radius: 22px; background: var(--cd-bezel); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .4); }
.cdp-bezel .pshot { overflow: hidden; border-radius: 16px; }
.cdp-bezel--phone { padding: 9px; border-radius: 44px; }
.cdp-bezel--phone .pshot { border-radius: 36px; }

/* The film in the same steel bezel */
.cdp-film { padding-top: clamp(4rem, 9vw, 7rem); }
.cdp-film-player {
  --pf-frame: var(--cd-bezel);
  --pf-frame-pad: 7px;
  --pf-border: 0;
  --pf-radius: 22px;
  --pf-screen-radius: 16px;
  --pf-stage-bg: #14122E;
  --pf-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .4);
  --pf-accent: var(--cd-violet);
  --pf-accent-ink: var(--cd-violet-ink);
  --pf-ink: var(--cd-lume);
  --pf-ink-2: var(--cd-lume-2);
  --pf-chapter-bg: color-mix(in srgb, var(--cd-violet) 14%, transparent);
  --pf-pill-bg: rgba(20, 18, 46, .88);
  --pf-pill-ink: #EFECFF;
  margin-top: 2.25rem;
}

/* Complications */
.cdp-complications { padding-top: 6rem; }
.cdp-comp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; margin: 2.5rem 0 4rem; }
.cdp-comp { padding: 1.5rem 0; border-top: 1px solid var(--cd-steel-dim); }
/* The quote is a near-square page, the report a wide screen: widths set so the plates come out about as tall. */
.cdp-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: start; gap: 40px; }
@media (max-width: 960px) { .cdp-comp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .cdp-pair { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .cdp-comp-grid { grid-template-columns: 1fr; } }

/* Price, on the counter */
.cdp-price { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; margin-top: 6rem; padding: 3.5rem 0; border-block: 1px solid var(--cd-steel-dim); }
.counter {
  --h: clamp(64px, 9vw, 96px);
  display: inline-flex;
  gap: 6px;
  padding: 10px;
  border-radius: 16px;
  background: var(--cd-bezel);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.counter .cell {
  position: relative;
  width: calc(var(--h) * .7);
  height: var(--h);
  overflow: hidden;
  border-radius: 9px;
  background: linear-gradient(#0D0B22, #1D1A42 50%, #0D0B22);
  box-shadow: inset 0 9px 10px -6px rgba(0, 0, 0, .85), inset 0 -9px 10px -6px rgba(0, 0, 0, .85);
}
.counter .cell--sep { width: calc(var(--h) * .34); background: none; box-shadow: none; }
.counter .strip { display: flex; flex-direction: column; transform: translateY(0); }
.counter.is-rolled .strip { transform: translateY(calc(var(--h) * -10)); transition: transform var(--dur, 1.4s) cubic-bezier(.2, .7, .1, 1); }
.counter .glyph {
  display: grid;
  place-items: center;
  height: var(--h);
  color: #F4F2FF;
  font-family: var(--cd-display);
  font-size: calc(var(--h) * .68);
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
}
.counter .cell--sep .glyph { color: var(--cd-ink-on-bezel); }

/* Anywhere */
.cdp-anywhere { display: grid; grid-template-columns: 1fr 320px; align-items: center; gap: 56px; padding-top: 6rem; }
.cdp-plate--phone { justify-self: center; width: 100%; max-width: 300px; }
@media (max-width: 760px) { .cdp-anywhere { grid-template-columns: 1fr; } }

/* Closing */
.cdp-closing { padding: 7rem 0 6rem; text-align: center; }
.cdp-closing-line { font-size: clamp(2.6rem, 6vw, 4.5rem); line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  .counter.is-rolled .strip { transition: none; }
}