/* Homepage only: the existing radio gallery in the premium map's visual language. */
.home-feature-browser.feature-clock-browser {
  display: grid;
  grid-template-columns: minmax(300px, .76fr) minmax(0, 1.45fr);
  grid-template-rows: minmax(clamp(360px, 36vw, 552px), auto) auto auto;
  align-items: start;
  gap: 28px 56px;
  max-width: none;
  overflow-anchor: none;
}
.feature-clock-browser > .feature-radio, .feature-clock-browser > .feature-radio-label { top: 0; left: 0; }
.feature-clock-browser > .feature-intro {
  grid-column: 1; grid-row: 2; padding: 0; text-align: center;
  width: 100%; max-width: 400px; justify-self: center;
}
.feature-clock-browser .feature-intro-copy > p { margin-top: 8px; font-size: 16px; }
.feature-clock-browser .feature-intro .express-kicker { display: block; margin-bottom: 8px; }
.feature-clock-browser > .feature-panels { display: contents; }
.feature-clock-browser .feature-stage {
  display: grid; grid-template-rows: subgrid; grid-column: 2; grid-row: 1 / 3;
  min-width: 0; margin: 0;
}
.feature-clock-browser .feature-stage > .feature-platforms { grid-row: 1; align-self: center; }
.feature-clock-browser .feature-stage > figcaption { grid-row: 2; margin: 0; }
.feature-clock-browser .feature-stage > figcaption p + p { margin-top: 14px; }
.feature-clock-browser .feature-notes { margin-top: 24px; }
.feature-clock-browser .feature-notes > h3 { margin-bottom: 16px; }
.feature-clock-browser .feature-notes .feature-screen { margin: 0; }
.feature-clock-browser .feature-details { grid-column: 2; grid-row: 3; min-width: 0; }
.feature-clock-browser .feature-details > :first-child { margin-top: 0; }
.feature-clock-browser .feature-details > :last-child { margin-bottom: 0; }
.feature-clock-browser .feature-details:empty { display: none; }
.feature-clock-browser .feature-details .feature-screen:last-child { margin-bottom: 0; }
.home-feature-browser.feature-clock-browser > .feature-clock {
  display: block;
  position: relative;
  top: auto;
  grid-column: 1; grid-row: 1; align-self: center;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1;
  margin: 0 auto;
  padding: 0 !important;
  border: 0;
  overflow: visible;
  background: transparent;
  z-index: 1;
  isolation: isolate;
}
.feature-clock-lines {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: none; stroke: #dce8f3; stroke-width: 1.2; pointer-events: none;
}
.feature-clock-orbit { stroke-dasharray: 3 8; }
.feature-clock-inner { stroke: #e7eff7; }
.feature-clock-ray { stroke: #d4e2f0; transition: stroke 180ms ease, stroke-width 180ms ease; }
.feature-clock-browser .feature-clock label {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 24%;
  min-height: 0;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -29px);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #5a7088;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 650;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}
.feature-clock-icon {
  display: grid; place-items: center; flex: 0 0 58px;
  width: 58px; height: 58px;
  border: 1px solid #dce7f1; border-radius: 50%;
  background: #fff; color: #4879aa;
  box-shadow: 0 4px 14px #50759406;
  transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.feature-clock-icon svg {
  display: block; width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.feature-clock-browser .feature-clock label:hover { background: none; color: var(--px-blue); }
.feature-clock label:hover .feature-clock-icon {
  border-color: #7cabe0; box-shadow: 0 8px 18px #5090ca17;
}
.feature-clock-center {
  position: absolute; top: 48%; left: 50%; transform: translate(-50%, -50%);
  display: block; width: 86px; height: 86px;
  white-space: normal;
}
.feature-clock-center > img {
  display: block; width: 86px; height: 86px; object-fit: contain;
  filter: drop-shadow(0 10px 12px #4c7faa1a);
}
.feature-clock-center > span {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  width: max-content; font-size: 14px; font-weight: 750; color: var(--px-ink);
}
.feature-clock-browser > .feature-panels > .feature-panel > .feature-group:first-child { margin-top: 0; }
.feature-clock-browser :is(.feature-group, .feature-screen) { scroll-margin-top: calc(var(--site-header-height, 100px) + 16px); }

@media (prefers-reduced-motion: reduce) {
}

.feature-clock label[for="home-feature-write"] { left: 50.00000%; top: 10.00000%; }
#home-feature-write:checked ~ .feature-clock label[for="home-feature-write"] { background: none; border: 0; color: var(--px-blue); }
#home-feature-write:checked ~ .feature-clock label[for="home-feature-write"] .feature-clock-icon { background: var(--px-blue); color: #fff; border-color: var(--px-blue); box-shadow: 0 0 0 var(--clock-active-ring, 6px) #e5f0fc, 0 8px 18px #2270c428; }
#home-feature-write:checked ~ .feature-clock [data-clock-ray="write"] { stroke: #4b92e1; stroke-width: 2; }
#home-feature-write:focus-visible ~ .feature-clock label[for="home-feature-write"] { outline: none; }
#home-feature-write:focus-visible ~ .feature-clock label[for="home-feature-write"] .feature-clock-icon { outline: 3px solid var(--px-blue); outline-offset: var(--clock-focus-offset, 8px); }

.feature-clock label[for="home-feature-call"] { left: 76.87006%; top: 21.12994%; }
#home-feature-call:checked ~ .feature-clock label[for="home-feature-call"] { background: none; border: 0; color: var(--px-blue); }
#home-feature-call:checked ~ .feature-clock label[for="home-feature-call"] .feature-clock-icon { background: var(--px-blue); color: #fff; border-color: var(--px-blue); box-shadow: 0 0 0 var(--clock-active-ring, 6px) #e5f0fc, 0 8px 18px #2270c428; }
#home-feature-call:checked ~ .feature-clock [data-clock-ray="call"] { stroke: #4b92e1; stroke-width: 2; }
#home-feature-call:focus-visible ~ .feature-clock label[for="home-feature-call"] { outline: none; }
#home-feature-call:focus-visible ~ .feature-clock label[for="home-feature-call"] .feature-clock-icon { outline: 3px solid var(--px-blue); outline-offset: var(--clock-focus-offset, 8px); }

.feature-clock label[for="home-feature-broadcast"] { left: 88.00000%; top: 48.00000%; }
#home-feature-broadcast:checked ~ .feature-clock label[for="home-feature-broadcast"] { background: none; border: 0; color: var(--px-blue); }
#home-feature-broadcast:checked ~ .feature-clock label[for="home-feature-broadcast"] .feature-clock-icon { background: var(--px-blue); color: #fff; border-color: var(--px-blue); box-shadow: 0 0 0 var(--clock-active-ring, 6px) #e5f0fc, 0 8px 18px #2270c428; }
#home-feature-broadcast:checked ~ .feature-clock [data-clock-ray="broadcast"] { stroke: #4b92e1; stroke-width: 2; }
#home-feature-broadcast:focus-visible ~ .feature-clock label[for="home-feature-broadcast"] { outline: none; }
#home-feature-broadcast:focus-visible ~ .feature-clock label[for="home-feature-broadcast"] .feature-clock-icon { outline: 3px solid var(--px-blue); outline-offset: var(--clock-focus-offset, 8px); }

.feature-clock label[for="home-feature-grow"] { left: 76.87006%; top: 74.87006%; }
#home-feature-grow:checked ~ .feature-clock label[for="home-feature-grow"] { background: none; border: 0; color: var(--px-blue); }
#home-feature-grow:checked ~ .feature-clock label[for="home-feature-grow"] .feature-clock-icon { background: var(--px-blue); color: #fff; border-color: var(--px-blue); box-shadow: 0 0 0 var(--clock-active-ring, 6px) #e5f0fc, 0 8px 18px #2270c428; }
#home-feature-grow:checked ~ .feature-clock [data-clock-ray="grow"] { stroke: #4b92e1; stroke-width: 2; }
#home-feature-grow:focus-visible ~ .feature-clock label[for="home-feature-grow"] { outline: none; }
#home-feature-grow:focus-visible ~ .feature-clock label[for="home-feature-grow"] .feature-clock-icon { outline: 3px solid var(--px-blue); outline-offset: var(--clock-focus-offset, 8px); }

.feature-clock label[for="home-feature-meet"] { left: 50.00000%; top: 86.00000%; }
#home-feature-meet:checked ~ .feature-clock label[for="home-feature-meet"] { background: none; border: 0; color: var(--px-blue); }
#home-feature-meet:checked ~ .feature-clock label[for="home-feature-meet"] .feature-clock-icon { background: var(--px-blue); color: #fff; border-color: var(--px-blue); box-shadow: 0 0 0 var(--clock-active-ring, 6px) #e5f0fc, 0 8px 18px #2270c428; }
#home-feature-meet:checked ~ .feature-clock [data-clock-ray="meet"] { stroke: #4b92e1; stroke-width: 2; }
#home-feature-meet:focus-visible ~ .feature-clock label[for="home-feature-meet"] { outline: none; }
#home-feature-meet:focus-visible ~ .feature-clock label[for="home-feature-meet"] .feature-clock-icon { outline: 3px solid var(--px-blue); outline-offset: var(--clock-focus-offset, 8px); }

.feature-clock label[for="home-feature-sell"] { left: 23.12994%; top: 74.87006%; }
#home-feature-sell:checked ~ .feature-clock label[for="home-feature-sell"] { background: none; border: 0; color: var(--px-blue); }
#home-feature-sell:checked ~ .feature-clock label[for="home-feature-sell"] .feature-clock-icon { background: var(--px-blue); color: #fff; border-color: var(--px-blue); box-shadow: 0 0 0 var(--clock-active-ring, 6px) #e5f0fc, 0 8px 18px #2270c428; }
#home-feature-sell:checked ~ .feature-clock [data-clock-ray="sell"] { stroke: #4b92e1; stroke-width: 2; }
#home-feature-sell:focus-visible ~ .feature-clock label[for="home-feature-sell"] { outline: none; }
#home-feature-sell:focus-visible ~ .feature-clock label[for="home-feature-sell"] .feature-clock-icon { outline: 3px solid var(--px-blue); outline-offset: var(--clock-focus-offset, 8px); }

.feature-clock label[for="home-feature-buy"] { left: 12.00000%; top: 48.00000%; }
#home-feature-buy:checked ~ .feature-clock label[for="home-feature-buy"] { background: none; border: 0; color: var(--px-blue); }
#home-feature-buy:checked ~ .feature-clock label[for="home-feature-buy"] .feature-clock-icon { background: var(--px-blue); color: #fff; border-color: var(--px-blue); box-shadow: 0 0 0 var(--clock-active-ring, 6px) #e5f0fc, 0 8px 18px #2270c428; }
#home-feature-buy:checked ~ .feature-clock [data-clock-ray="buy"] { stroke: #4b92e1; stroke-width: 2; }
#home-feature-buy:focus-visible ~ .feature-clock label[for="home-feature-buy"] { outline: none; }
#home-feature-buy:focus-visible ~ .feature-clock label[for="home-feature-buy"] .feature-clock-icon { outline: 3px solid var(--px-blue); outline-offset: var(--clock-focus-offset, 8px); }

.feature-clock label[for="home-feature-share"] { left: 23.12994%; top: 21.12994%; }
#home-feature-share:checked ~ .feature-clock label[for="home-feature-share"] { background: none; border: 0; color: var(--px-blue); }
#home-feature-share:checked ~ .feature-clock label[for="home-feature-share"] .feature-clock-icon { background: var(--px-blue); color: #fff; border-color: var(--px-blue); box-shadow: 0 0 0 var(--clock-active-ring, 6px) #e5f0fc, 0 8px 18px #2270c428; }
#home-feature-share:checked ~ .feature-clock [data-clock-ray="share"] { stroke: #4b92e1; stroke-width: 2; }
#home-feature-share:focus-visible ~ .feature-clock label[for="home-feature-share"] { outline: none; }
#home-feature-share:focus-visible ~ .feature-clock label[for="home-feature-share"] .feature-clock-icon { outline: 3px solid var(--px-blue); outline-offset: var(--clock-focus-offset, 8px); }

.feature-clock-browser #home-feature-write:checked ~ .feature-panels #home-panel-write { display: contents; }

.feature-clock-browser #home-feature-call:checked ~ .feature-panels #home-panel-call { display: contents; }

.feature-clock-browser #home-feature-broadcast:checked ~ .feature-panels #home-panel-broadcast { display: contents; }

.feature-clock-browser #home-feature-grow:checked ~ .feature-panels #home-panel-grow { display: contents; }

.feature-clock-browser #home-feature-meet:checked ~ .feature-panels #home-panel-meet { display: contents; }

.feature-clock-browser #home-feature-sell:checked ~ .feature-panels #home-panel-sell { display: contents; }

.feature-clock-browser #home-feature-buy:checked ~ .feature-panels #home-panel-buy { display: contents; }

.feature-clock-browser #home-feature-share:checked ~ .feature-panels #home-panel-share { display: contents; }

/* Vertical page scrolling remains available between the clock's drag targets. */
.home-feature-browser.feature-clock-browser > .feature-clock { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.feature-clock-browser .feature-clock label, .feature-clock-center { touch-action: none; }
.feature-clock-browser .feature-clock img, .feature-clock-browser .feature-clock svg { pointer-events: none; -webkit-user-drag: none; }
.feature-clock-browser .feature-clock.is-dragging, .feature-clock-browser .feature-clock.is-dragging label { cursor: grabbing; }

/* The same native radio gallery becomes a compact overlay on small screens. */
.feature-clock-title { display: none; }
.feature-clock-title > span { display: none; }
#home-feature-write:checked ~ .feature-clock-title > [data-feature="write"] { display: block; }
#home-feature-call:checked ~ .feature-clock-title > [data-feature="call"] { display: block; }
#home-feature-broadcast:checked ~ .feature-clock-title > [data-feature="broadcast"] { display: block; }
#home-feature-grow:checked ~ .feature-clock-title > [data-feature="grow"] { display: block; }
#home-feature-meet:checked ~ .feature-clock-title > [data-feature="meet"] { display: block; }
#home-feature-sell:checked ~ .feature-clock-title > [data-feature="sell"] { display: block; }
#home-feature-buy:checked ~ .feature-clock-title > [data-feature="buy"] { display: block; }
#home-feature-share:checked ~ .feature-clock-title > [data-feature="share"] { display: block; }

@media (max-width: 1100px) {
  .home-feature-browser.feature-clock-browser {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto;
    gap: 18px;
  }
  .feature-clock-browser > .feature-clock-title {
    display: block; grid-column: 1; grid-row: 1; align-self: center;
    width: calc(100% - 178px); margin: 0;
    font-size: 18px; line-height: 1.3; font-weight: 700;
    color: var(--px-ink); overflow-wrap: anywhere;
  }
  .feature-clock-browser .feature-stage { display: contents; }
  .feature-clock-browser .feature-stage > .feature-platform-picker {
    grid-column: 1; grid-row: 1; justify-self: end; align-self: center;
    margin: 0; gap: 2px;
  }
  .feature-clock-browser .feature-stage > .feature-platform-picker button {
    font-size: 13px; padding: 8px 12px; min-height: 44px;
  }
  .feature-clock-browser .feature-stage > .feature-platforms {
    grid-column: 1; grid-row: 2; align-self: start;
  }
  .feature-clock-browser > .feature-intro {
    grid-column: 1; grid-row: 3; max-width: 620px;
  }
  .feature-clock-browser > .feature-intro > .express-kicker { display: none; }
  .feature-clock-browser .feature-stage > figcaption {
    grid-column: 1; grid-row: 4; margin: 0;
  }
  .feature-clock-browser .feature-details { grid-column: 1; grid-row: 5; }
  .home-feature-browser.feature-clock-browser > .feature-clock {
    --clock-active-ring: 3px;
    --clock-focus-offset: 3px;
    grid-column: 1; grid-row: 2; align-self: start; justify-self: right;
    width: clamp(128px, 36vw, 152px); max-width: none; aspect-ratio: 1;
    margin: 10px max(10px, calc((100% - 360px) / 2 + 10px)) 0 0;
    border-radius: 50%; background: #ffffffed;
    box-shadow: 0 0 0 1px #dce8f3, 0 6px 24px #254e7529;
  }
  .feature-clock-browser .feature-clock label {
    width: 32px; height: 32px; min-width: 0; min-height: 0;
    justify-content: center; gap: 0; transform: translate(-50%, -16px);
  }
  .feature-clock-browser .feature-clock label > span:last-child {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .feature-clock-browser .feature-clock-icon {
    width: 28px; height: 28px; flex: 0 0 28px;
  }
  .feature-clock-browser .feature-clock-icon svg { width: 16px; height: 16px; }
  .feature-clock-browser .feature-clock-center,
  .feature-clock-browser .feature-clock-center > img { width: 30px; height: 30px; }
  .feature-clock-browser .feature-clock-center > span { display: none; }
  .feature-clock-browser .feature-clock-lines > * { vector-effect: non-scaling-stroke; stroke-width: .7; }
  /* Android previews are centred at 360px; Windows previews fill the row. */
  .feature-clock-browser:has(> #home-feature-write:checked):has(#home-panel-write > .feature-stage > .feature-platforms[data-preview="windows"]) > .feature-clock,
  .feature-clock-browser:has(> #home-feature-call:checked):has(#home-panel-call > .feature-stage > .feature-platforms[data-preview="windows"]) > .feature-clock,
  .feature-clock-browser:has(> #home-feature-broadcast:checked):has(#home-panel-broadcast > .feature-stage > .feature-platforms[data-preview="windows"]) > .feature-clock,
  .feature-clock-browser:has(> #home-feature-grow:checked):has(#home-panel-grow > .feature-stage > .feature-platforms[data-preview="windows"]) > .feature-clock,
  .feature-clock-browser:has(> #home-feature-meet:checked):has(#home-panel-meet > .feature-stage > .feature-platforms[data-preview="windows"]) > .feature-clock,
  .feature-clock-browser:has(> #home-feature-sell:checked):has(#home-panel-sell > .feature-stage > .feature-platforms[data-preview="windows"]) > .feature-clock,
  .feature-clock-browser:has(> #home-feature-buy:checked):has(#home-panel-buy > .feature-stage > .feature-platforms[data-preview="windows"]) > .feature-clock,
  .feature-clock-browser:has(> #home-feature-share:checked):has(#home-panel-share > .feature-stage > .feature-platforms[data-preview="windows"]) > .feature-clock { margin-right: 10px; }
}