/* ==========================================================================
   Crownwind's pages: the Night Dial.
   The app is dark only: a blue-black dial ground, lume (#A4D8FE) as its one
   brand colour, SF Pro Rounded for the figures. The page wears the same.
   ========================================================================== */

body.k-page.k-crownwind {
  --k-bg: #031826;            /* the night dial */
  --k-bg-2: #0B2638;          /* raised */
  --k-ink: #ECF3F8;
  --k-ink-2: #91A3B0;
  --k-accent: #A4D8FE;        /* lume */
  --k-accent-ink: #031826;
  --k-card: #0B2638;
  --k-line: rgba(236, 243, 248, .14);
  --k-display: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cw-ground: #031826;
  --cw-raised: #0B2638;
  --cw-pressed: #305168;
  --cw-deep: #021019;
  --cw-lume: #A4D8FE;
  --cw-lume-fill: rgba(164, 216, 254, .12);
  --cw-text: #ECF3F8;
  --cw-text-2: #91A3B0;
  --cw-warn: #FF9F0A;
  color-scheme: dark;
}
.k-crownwind main :where(h1, h2, h3) { font-weight: 600; }
.k-crownwind .k-btn-primary { background: var(--cw-lume); color: var(--cw-ground); }
.k-crownwind .k-btn-quiet { color: var(--cw-text); }
.k-crownwind .k-btn:focus-visible, .k-crownwind a:focus-visible { outline: 2px solid var(--cw-lume); outline-offset: 3px; }
.k-crownwind .k-lead { color: var(--cw-text-2); }
.k-crownwind .k-lockup img { box-shadow: 0 0 0 1px rgba(236, 243, 248, .12); }
.cw-num-figure, .cw-fig { font-family: var(--k-display); font-variant-numeric: tabular-nums; font-weight: 600; }

/* The kit's Coming soon is a status, not a button: a quiet pill with the lume dot */
.cw-soon { cursor: default; color: var(--cw-text); box-shadow: inset 0 0 0 1.5px var(--k-line); }
.cw-soon:hover { transform: none; }

/* ---------- Hero: the watch beside the iPhone, timed by eye ---------- */
.cw-hero { overflow-x: clip; }
.cw-hero .k-h1 { max-width: 9.5ch; }
.cw-hero .k-lead { max-width: 30ch; }
.cw-price { font-size: 17px; color: var(--cw-text); max-width: 34ch; }
.cw-price b { font-weight: 600; }

.cw-show { position: relative; width: 100%; aspect-ratio: 820 / 700; max-height: calc(100svh - 150px); margin: 0 auto; container-type: size; }
.cw-show-in { position: absolute; inset: 0; }
/* the watch sits in front, to the left; the phone stands behind it, to the right */
/* the watch and the phone are one group, sized and placed in the box's height (cqh) so they keep
   their spacing at every width: the crown stops just short of the phone */
.cw-show { --wh: 100; --ph: 92; --off: 73.5; --gw: 117.2; }   /* --gw: --off plus the phone's width, --ph / 2.107 */
.cw-watch { position: absolute; left: calc(50cqw - var(--gw) * .5cqh); top: calc((100 - var(--wh)) * .5cqh); height: calc(var(--wh) * 1cqh); aspect-ratio: 600 / 760; z-index: 2; }
.cw-watch-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.cw-watch .cw-num { font: 600 47px/1 var(--k-display); fill: #A4D8FE; }
.cw-watch .cw-dialname { font: 600 21px/1 system-ui, -apple-system, sans-serif; letter-spacing: .32em; fill: #ECF3F8; }
.cw-watch .cw-dialsub { font: 500 12.5px/1 system-ui, -apple-system, sans-serif; letter-spacing: .3em; fill: #91A3B0; }
.cw-phone { position: absolute; left: calc(50cqw - var(--gw) * .5cqh + var(--off) * 1cqh); top: calc((100 - var(--ph)) * .5cqh); height: calc(var(--ph) * 1cqh); aspect-ratio: 1 / 2.107; z-index: 1; }
/* the kit's iPhone is 1 : 2.107 overall since 19 October 2026: a 1320 x 2868 screen plus its bezel */
.cw-phone .k-device { --k-device-w: calc(var(--ph) * 1cqh / 2.107); }

/* the moment's note: what the tap just measured */
.cw-note { position: absolute; left: calc(50cqw - var(--gw) * .5cqh + 1cqh); bottom: 1cqh; z-index: 3; background: rgba(11, 38, 56, .92); border-radius: 18px;
  padding: 14px 18px 15px; box-shadow: 0 0 0 1px var(--k-line), 0 18px 40px -18px rgba(0, 0, 0, .7);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cw-note b { display: block; font: 600 30px/1.05 var(--k-display); color: var(--cw-lume); font-variant-numeric: tabular-nums; }
.cw-note span { display: block; font-size: 15px; line-height: 1.35; color: var(--cw-text-2); margin-top: 4px; }

/* ---------- Drawn screens: the app's own screens rebuilt in HTML on a 440 pt grid ----------
   1em = 10 pt of a 440 pt-wide iPhone screen, set from the frame's width. */
.cw-screen { position: absolute; inset: 0; container-type: inline-size; background: var(--cw-ground); overflow: hidden; }
.cw-screen > .cw-g { position: absolute; inset: 0; font-size: calc(100cqw / 44); color: var(--cw-text);
  font-family: system-ui, -apple-system, "SF Pro Text", "Segoe UI", sans-serif; }
.cw-g .sb { position: absolute; inset: 0 0 auto 0; height: 5em; }
.cw-g .sb-time { position: absolute; left: 6.5em; top: 2.5em; }
.cw-g .sb-time span { font: 600 1.7em/1 system-ui, -apple-system, sans-serif; font-variant-numeric: tabular-nums; }
.cw-g .sb-icons { position: absolute; left: 30.2em; top: 2.5em; width: 9.3em; height: 1.45em; }
.cw-g .pill { position: absolute; left: 2em; top: 6.2em; width: 8.4em; height: 4.3em; border-radius: 2.15em;
  background: #15384D; box-shadow: inset 0 .06em 0 rgba(255, 255, 255, .14), 0 0 0 .06em rgba(255, 255, 255, .06);
  display: flex; align-items: center; justify-content: center; }
.cw-g .pill span { font-size: 1.7em; }
.cw-g .t-name { position: absolute; left: 1.7em; top: 12.6em; }
.cw-g .t-name span { font: 600 1.7em/1 system-ui, -apple-system, sans-serif; }
.cw-g .t-check { position: absolute; left: 1.7em; top: 15.05em; display: flex; align-items: center; gap: .4em; color: var(--cw-text-2); }
.cw-g .t-check span { font-size: 1.5em; line-height: 1; }
.cw-g .t-check svg { width: 1.75em; height: 1.75em; flex: none; }
.cw-g .ring { position: absolute; left: 50%; top: 33.8em; width: 22.4em; height: 22.4em; margin: -11.2em 0 0 -11.2em; }
.cw-g .ring svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.cw-g .ring-hm { position: absolute; left: 0; right: 0; top: 5.3em; text-align: center; color: var(--cw-text-2); }
.cw-g .ring-hm span { font: 400 2.2em/1 system-ui, -apple-system, sans-serif; font-variant-numeric: tabular-nums; }
.cw-g .ring-s { position: absolute; left: 0; right: 0; top: 8.3em; text-align: center; color: var(--cw-lume); }
.cw-g .ring-s span { font: 600 8em/1 var(--k-display); font-variant-numeric: tabular-nums; letter-spacing: -.005em; }
.cw-g .t-instr { position: absolute; left: 0; right: 0; top: 51.1em; text-align: center; }
.cw-g .t-instr span { font: 600 1.7em/1 system-ui, -apple-system, sans-serif; }
.cw-g .t-count { position: absolute; left: 0; right: 0; top: 53.6em; text-align: center; color: var(--cw-text-2); }
.cw-g .t-count span { font-size: 1.5em; line-height: 1; font-variant-numeric: tabular-nums; }
.cw-g .tap { position: absolute; left: 1.7em; right: 1.7em; top: 56.8em; height: 33.7em; border-radius: 2.4em; background: var(--cw-raised);
  display: flex; align-items: center; justify-content: center; color: var(--cw-text-2); overflow: hidden; }
.cw-g .tap-press { position: absolute; inset: 0; background: var(--cw-pressed); opacity: 0; }
.cw-g .tap-ring { position: absolute; left: 50%; top: 50%; width: 14em; height: 14em; margin: -7em 0 0 -7em; border-radius: 50%;
  border: .35em solid var(--cw-lume); opacity: 0; transform: scale(.4); }
.cw-g .tap-label { position: relative; display: flex; align-items: center; gap: .6em; }
.cw-g .tap-label span { font-size: 2.2em; line-height: 1; }
.cw-g .tap-label svg { width: 2.8em; height: 2.8em; }
.cw-g .home { position: absolute; left: 50%; top: 94.2em; width: 15.8em; height: .5em; margin-left: -7.9em; border-radius: .25em; background: rgba(236, 243, 248, .5); }

/* the kit's frame, a little bluer to sit on the dial */
.k-crownwind .k-device { background: #050A0E; box-shadow: 0 0 0 1.5px #2C3B46 inset, 0 40px 80px -30px rgba(0, 0, 0, .8), 0 18px 36px -18px rgba(0, 0, 0, .6); }

@media (min-width: 900px) and (min-height: 820px) {
  /* Pinned: the hero holds for about a screen while the tap plays */
  html.k-motion .cw-hero { height: 190svh; display: block; padding: 0; min-height: 0; }
  html.k-motion .cw-hero-pin { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; padding: 104px 0 40px; box-sizing: border-box; }
}
@media (min-width: 900px) {
  .cw-hero .k-hero-grid { grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); }
}
@media (max-width: 899px) {
  .cw-hero .k-h1 { max-width: 11ch; }
  .cw-show { aspect-ratio: 362 / 330; max-height: none; max-width: 520px; }
  .cw-show { --wh: 96; --ph: 88; --off: 70.5; --gw: 112.3; }
  .cw-note { bottom: -1cqh; padding: 10px 13px 11px; border-radius: 14px; }
  .cw-note b { font-size: 22px; }
  .cw-note span { font-size: 13px; }
}

/* ---------- Grounds: the night dial, raised, the deep dial and one lume band ---------- */
.cw-sync { background: var(--cw-ground); }
.cw-drift { background: var(--cw-deep); }
.cw-honest { background: var(--cw-raised); }
.cw-posband { background: var(--cw-lume); color: var(--cw-ground); }
.cw-service { background: var(--cw-ground); }
.cw-rest { background: var(--cw-deep); }
.cw-compare { background: var(--cw-ground); }
.cw-plans-sec { background: var(--cw-raised); }
.cw-faq-sec { background: var(--cw-ground); }
.cw-close { background: var(--cw-deep); }
.k-crownwind .k-step-n { color: var(--cw-text-2); }

/* ---------- Scenes: the device with its gutter cards ---------- */
.cw-visual { gap: clamp(20px, 2.6vw, 40px); }
.cw-side { position: relative; width: clamp(220px, 19vw, 280px); flex: none; align-self: center; display: grid; }
.cw-side > .cw-card { grid-area: 1 / 1; }
.cw-card { background: rgba(11, 38, 56, .92); border-radius: 22px; padding: 20px 22px; box-shadow: 0 0 0 1px var(--k-line), 0 24px 50px -30px rgba(0, 0, 0, .8); }
.cw-honest .cw-card { background: rgba(3, 24, 38, .9); }
.cw-card-k { font-size: 14px; line-height: 1.35; color: var(--cw-text-2); }
.cw-card-v { font: 600 26px/1.15 var(--k-display); font-variant-numeric: tabular-nums; color: var(--cw-text); margin: 4px 0 12px !important; }
.cw-card-v small { font: 400 16px/1 var(--k-display); color: var(--cw-text-2); }
.cw-card-n { font-size: 15px; color: var(--cw-text); }
.cw-lume { color: var(--cw-lume) !important; }
html.k-motion .cw-side > .cw-card[data-side] { opacity: 0; transform: translateY(14px); }
html.k-motion .cw-side > .cw-card[data-side="0"] { opacity: 1; transform: none; }
html:not(.k-motion) .cw-side { gap: 14px; }
html:not(.k-motion) .cw-side > .cw-card { grid-area: auto; }

/* the tap log */
.cw-tl { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--k-line); font-size: 16px; }
.cw-tl:first-of-type { margin-top: 10px !important; }
.cw-tl b { font-weight: 600; color: var(--cw-text); }
.cw-tl span { font: 500 16px/1.3 var(--k-display); font-variant-numeric: tabular-nums; color: var(--cw-lume); }
.cw-taplog .cw-card-n { padding-top: 10px; border-top: 1px solid var(--k-line); }

/* hours to the first rate */
.cw-hrs { position: relative; height: 210px; margin: 14px 0 4px 10px; }
.cw-hrs-bar { position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--cw-lume); transform-origin: top; border-radius: 1px; }
.cw-hr { position: absolute; left: 0; top: calc(var(--at) * (100% - 40px)); padding-left: 20px; }
.cw-hr::before { content: ""; position: absolute; left: -5px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--cw-ground); box-shadow: inset 0 0 0 2px var(--cw-lume); }
.cw-hr b { display: block; font: 600 20px/1.1 var(--k-display); font-variant-numeric: tabular-nums; }
.cw-hr span { display: block; font-size: 14px; color: var(--cw-text-2); margin-top: 2px; }

/* the rate on its scale */
.cw-scale { position: relative; height: 54px; margin: 18px 0 6px; }
.cw-band-t { position: absolute; top: 12px; bottom: 12px; background: var(--cw-lume-fill); border-radius: 6px; }
.cw-zero { position: absolute; top: 6px; bottom: 6px; width: 0; border-left: 1.5px dashed var(--cw-text-2); }
.cw-pt { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--cw-lume); }
/* the ± whiskers: a line scaled from the centre and two ticks moved by transform (± 0.2 still) */
.cw-wline { position: absolute; top: 50%; left: calc(58.75% - 6%); width: 12%; height: 2px; margin-top: -1px; background: var(--cw-lume); transform: scaleX(.504); }
.cw-wt { position: absolute; inset: 0; transform: translateX(calc(var(--h, 3.025%) * var(--s))); }
.cw-wt[data-w="-1"] { --s: -1; } .cw-wt[data-w="1"] { --s: 1; }
.cw-wt::after { content: ""; position: absolute; left: 58.75%; top: 50%; width: 2px; height: 20px; margin: -10px 0 0 -1px; background: var(--cw-lume); border-radius: 1px; }
.cw-scale-ax { position: relative; height: 18px; font-size: 13px; color: var(--cw-text-2); }
.cw-scale-ax span { position: absolute; transform: translateX(-50%); font-variant-numeric: tabular-nums; }

/* the service years */
.cw-yrs { margin-top: 14px; }
.cw-yr { position: relative; padding: 0 0 16px 24px; }
.cw-yr::before { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--cw-ground); box-shadow: inset 0 0 0 2px var(--cw-lume); }
.cw-yr-done::before { background: var(--cw-lume); }
.cw-yr b { display: block; font: 600 19px/1.15 var(--k-display); font-variant-numeric: tabular-nums; }
.cw-yr span { display: block; font-size: 14px; line-height: 1.35; color: var(--cw-text-2); margin-top: 2px; }
.cw-yr-gap { padding: 2px 0 18px 24px; min-height: 64px; }
.cw-yr-gap::before { display: none; }
.cw-yrs-bar { position: absolute; left: 5px; top: -14px; bottom: -4px; width: 2px; background: var(--cw-lume); transform-origin: top; border-radius: 1px; }
.cw-yr-gap span { padding-top: 22px; }

/* drawn Sync screen: the minute stage and the two clock-check lines */
.cw-scr-sync .t-checking { opacity: 0; }
.cw-g .cw-stage-minute { position: absolute; inset: 0; opacity: 0; }
.cw-g .cw-stage-timing { position: absolute; inset: 0; }
.cw-g .t-q { position: absolute; left: 1.7em; right: 1.7em; top: 22.4em; }
.cw-g .t-q span { font: 600 2.2em/1.25 system-ui, -apple-system, sans-serif; }
.cw-g .wheel { position: absolute; left: 2.7em; right: 2.7em; top: 53.9em; height: 0; }
.cw-g .wh-band { position: absolute; left: 0; right: 0; top: -1.75em; height: 3.5em; border-radius: 1.75em; background: rgba(236, 243, 248, .1); }
.cw-g .wh-row { position: absolute; left: 0; right: 0; top: calc(var(--d) * 2.9em - 1.3em); text-align: center; font: 400 2.2em/1.2 ui-monospace, "SF Mono", system-ui; font-size: 2.2em; letter-spacing: .02em;
  opacity: calc(1 - min(.86, max(var(--d), calc(var(--d) * -1)) * .24)); transform: scale(calc(1 - min(.4, max(var(--d), calc(var(--d) * -1)) * .07))); }
.cw-g .wh-row { top: calc(var(--d) * 1.32em - .6em); }
.cw-g .confirm { position: absolute; left: 50%; top: 80.9em; width: 16.2em; height: 5em; margin-left: -8.1em; border-radius: 2.5em; background: var(--cw-lume); color: var(--cw-ground); display: flex; align-items: center; justify-content: center; }
.cw-g .confirm span { font: 600 1.7em/1 system-ui, -apple-system, sans-serif; }
.cw-g .other { position: absolute; left: 0; right: 0; top: 88.6em; text-align: center; color: var(--cw-lume); }
.cw-g .other span { font-size: 1.7em; }
html:not(.k-motion) .cw-scr-sync .cw-stage-timing { opacity: 0; }
html:not(.k-motion) .cw-scr-sync .cw-stage-minute { opacity: 1; }

/* ---------- Bands ---------- */
.cw-band-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(36px, 5vw, 96px); align-items: center; }
.cw-band-grid.cw-flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.cw-band { min-height: 100svh; display: flex; align-items: center; }
.cw-band > .k-section { width: 100%; }
.cw-band-copy > * + * { margin-top: 22px !important; }
.cw-band-fig { display: flex; align-items: flex-end; gap: 12px; margin-top: 34px !important; }
.cw-band-fig b { font: 600 clamp(64px, 7vw, 112px)/.9 var(--k-display); color: var(--cw-lume); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cw-band-fig span { font: 400 20px/1.2 var(--k-display); color: var(--cw-text-2); padding-bottom: 6px; }

/* the drift cone, at poster size */
.cw-cone { width: 100%; }
.cw-cone-plot { position: relative; height: clamp(260px, 46svh, 460px); margin-right: 132px; }
.cw-cone-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cw-cone-mover { position: absolute; inset: 0; pointer-events: none; }
.cw-cone-dot { position: absolute; left: 0; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--cw-lume); box-shadow: 0 0 0 6px rgba(164, 216, 254, .16); }
.cw-cone-tip { position: absolute; left: 0; top: 0; margin: -22px 0 0 18px; white-space: nowrap; }
.cw-cone-tip b { display: block; font: 600 22px/1.1 var(--k-display); font-variant-numeric: tabular-nums; color: var(--cw-text); }
.cw-cone-tip span { display: block; font-size: 15px; color: var(--cw-text-2); margin-top: 3px; }
.cw-cone-true, .cw-cone-edge { position: absolute; left: calc(100% + 18px); transform: translateY(-50%); font-size: 15px; color: var(--cw-text-2); white-space: nowrap; }
.cw-cone-edge { font-size: 13px; }
.cw-cone-cap { display: flex; justify-content: space-between; margin: 16px 132px 0 0; font-size: 15px; color: var(--cw-text-2); }

/* positions: the dot plot on lume */
.cw-posband .k-h2, .cw-posband .k-body, .cw-posband .k-eyebrow { color: var(--cw-ground); }
.cw-posband .k-body { color: #173447; }
.cw-pos { width: 100%; }
.cw-pos-lanes { position: relative; }
.pl { display: grid; grid-template-columns: 116px minmax(0, 1fr) 170px; align-items: center; gap: 18px; height: clamp(84px, 13svh, 120px); border-top: 1.5px solid rgba(3, 24, 38, .18); }
.pl:last-of-type { border-bottom: 1.5px solid rgba(3, 24, 38, .18); }
.pl-name { font: 600 19px/1.2 system-ui, -apple-system, sans-serif; }
.pl-track { position: relative; height: 100%; }
.pl-avg { position: absolute; top: 72%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 3px solid var(--cw-ground); background: var(--cw-lume); box-sizing: border-box; z-index: 2; }
.pl-val { font: 600 20px/1.2 var(--k-display); font-variant-numeric: tabular-nums; text-align: right; }
.pl-dots { position: absolute; left: calc(116px + 18px); right: calc(170px + 18px); top: 0; bottom: 0; pointer-events: none; }
.pd { position: absolute; width: 3px; height: 30px; margin: -15px 0 0 -1.5px; border-radius: 2px; background: rgba(3, 24, 38, .55); }
.pd[data-row="0"] { top: calc(100% / 3 * .36); }
.pd[data-row="1"] { top: calc(100% / 3 * 1.36); }
.pd[data-row="2"] { top: calc(100% / 3 * 2.36); }
.cw-pos-axis { position: relative; height: 26px; margin: 10px calc(170px + 18px) 0 calc(116px + 18px); font-size: 14px; color: #173447; }
.cw-pos-axis span { position: absolute; top: 0; transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.cw-pos-axis .pa-unit { left: auto; right: -18px; transform: translateX(100%); }
.cw-pos-cap { margin-top: 14px !important; font-size: 15px; color: #173447; }
.cw-whisker { position: absolute; top: 50%; height: 3px; margin-top: -1.5px; background: var(--cw-ground); border-radius: 2px; }

/* ---------- Tiles ---------- */
.k-crownwind .k-tile { background: var(--cw-raised); box-shadow: 0 0 0 1px var(--k-line); }
.cw-csv { background: var(--cw-deep); border-radius: 16px; padding: 14px 16px 16px; overflow: hidden; }
.cw-csv-name { font-size: 13px; color: var(--cw-text-2); margin-bottom: 8px !important; }
.cw-csv-grid { display: grid; grid-template-columns: 2.6fr 1fr 1.25fr 1.2fr 1fr; gap: 6px 14px; font: 13px/1.35 ui-monospace, "SF Mono", Menlo, monospace; color: var(--cw-text); font-variant-numeric: tabular-nums; }
.cw-csv-grid span:nth-child(-n+5) { color: var(--cw-lume); }
.cw-say { background: var(--cw-ground); border-radius: 14px; padding: 14px 16px; font-size: 16px; line-height: 1.35; color: var(--cw-text); display: flex; gap: 10px; align-items: center; }
.cw-say svg { width: 22px; height: 22px; flex: none; }
.cw-say-btn { color: var(--cw-lume); }
.cw-say-warn { color: var(--cw-warn); }
.cw-row { background: var(--cw-ground); border-radius: 14px; padding: 12px 16px; display: flex; justify-content: space-between; gap: 12px; }
.cw-row b { display: block; font: 600 17px/1.3 system-ui, -apple-system, sans-serif; }
.cw-row span span, .cw-row-r span { display: block; font-size: 14px; color: var(--cw-text-2); }
.cw-row-r { text-align: right; }
.cw-row-r b { font-family: var(--k-display); font-variant-numeric: tabular-nums; }

/* ---------- Compare, plans, questions, close ---------- */
.k-crownwind .k-teaser li { background: var(--cw-raised); }
.k-crownwind .k-plan { background: var(--cw-ground); }
.k-crownwind .k-plan.k-plus { background: var(--cw-lume); color: var(--cw-ground); }
.k-crownwind .k-plan.k-plus h3 { color: var(--cw-ground); }
.k-crownwind .k-plan.k-plus li::before { border-color: var(--cw-ground); }
.k-plan-price small { font: 400 20px/1 var(--k-display); }
.cw-plan-alt { font: 500 20px/1.2 var(--k-display); }
.cw-plans-note { margin-top: 26px !important; max-width: 70ch; }
.k-crownwind .k-faq summary::after { color: var(--cw-lume); }
.cw-close { text-align: center; }
.cw-close .k-cta .k-h2 { max-width: 16ch; }
.cw-close-lead { margin: 24px auto 0 !important; max-width: 40ch; }
.cw-close-nav { justify-content: center; margin-top: 40px; }
.k-crownwind .k-subnav a[aria-current="page"] { background: var(--cw-lume); color: var(--cw-ground); }

/* ---------- Phones ---------- */
.cw-strip .cw-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(164, 216, 254, .14); color: var(--cw-text); font: 600 14px/1 var(--k-display); font-variant-numeric: tabular-nums; }
.cw-strip .cw-warn { color: var(--cw-warn); background: rgba(255, 159, 10, .14); }
.cw-tapchip i { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--cw-lume); }
.cw-tapchip i.is-on { background: var(--cw-lume); }
html.k-motion .cw-strip .cw-chip { opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; }
html.k-motion .cw-strip .cw-chip.is-on { opacity: 1; transform: none; }
@media (max-width: 899px) {
  .cw-side { display: none; }
  .cw-band { min-height: 0; }
  .cw-band-grid, .cw-band-grid.cw-flip { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .cw-drift .cw-band-visual { order: 2; }
  .cw-cone-plot { height: 230px; margin-right: 96px; }
  .cw-cone-cap { margin-right: 96px; font-size: 13px; }
  .cw-cone-tip b { font-size: 17px; }
  .cw-cone-tip span { font-size: 13px; }
  .cw-cone-tip { margin: -18px 0 0 12px; }
  .cw-cone-edge { left: calc(100% + 12px); font-size: 12px; }
  .pl { grid-template-columns: 84px minmax(0, 1fr) 104px; gap: 10px; height: 76px; }
  .pl-name { font-size: 15px; }
  .pl-val { font-size: 14px; }
  .pl-dots { left: calc(84px + 10px); right: calc(104px + 10px); }
  .cw-pos-axis { margin: 8px calc(104px + 10px) 0 calc(84px + 10px); font-size: 12px; }
  .cw-pos-axis .pa-unit { right: -10px; }
  .cw-csv-grid { grid-template-columns: 2.4fr 1fr 1.2fr; }
  .cw-csv-grid span:nth-child(5n+4), .cw-csv-grid span:nth-child(5n) { display: none; }
  .cw-csv-grid { font-size: 11.5px; gap: 5px 10px; }
}
.pl-at { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.pl-at .pl-avg { left: 0; }
.pl-at .cw-whisker { top: 72%; left: calc(-1 * var(--umax-w)); width: calc(2 * var(--umax-w)); transform-origin: center; }
.cw-pos { --umax-w: calc(0.9 / 5.5 * 100%); }

/* step titles: display size, sized to sit in the caption column without crowding the screen */
@media (min-width: 900px) { .cw-scene .k-step .k-h2 { font-size: clamp(36px, min(3.7vw, 7svh), 60px); } }
.cw-scale { height: 64px; }
.cw-band-t { top: 14px; bottom: 14px; }
.cw-wt::after { height: 26px; margin-top: -13px; }
.cw-pt { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
.cw-range.is-wide .cw-card-n { color: var(--cw-warn); }

/* ---------- Child pages ---------- */
.k-crownwind.k-child-page .k-sub-hero { background: var(--cw-raised); }
.k-crownwind.k-child-page .k-doc { background: var(--cw-ground); }
.k-crownwind .k-doc a { color: var(--cw-lume); }
.k-crownwind .k-doc strong { color: var(--cw-text); font-weight: 600; }
.k-crownwind .k-doc .k-note { background: var(--cw-raised); }
.k-crownwind .k-table thead th { background: var(--cw-ground); border-bottom-color: var(--cw-lume); color: var(--cw-text); }
.k-crownwind .k-table td.is-us { background: rgba(164, 216, 254, .10); color: var(--cw-text); }
.cw-form { margin: 24px 0 8px; background: #F6FAFE; border-radius: 24px; padding: clamp(20px, 3vw, 32px); color: #171C1F; }
.cw-form .sp-support-form label { color: #171C1F; }
.cw-form a { color: #0B4F7A !important; }
.cw-band-phone { display: flex; align-items: flex-end; gap: 22px; margin-top: 34px !important; }
.cw-band-phone .k-device { --k-device-w: clamp(170px, min(15vw, 30svh), 230px); }
.cw-band-phone .k-meta { max-width: 22ch; padding-bottom: 8px; }
@media (max-width: 899px) {
  .cw-band-phone { align-items: center; }
  .cw-band-phone .k-device { --k-device-w: 150px; }
}
@media (max-width: 899px) {
  .cw-pos-axis span:nth-child(3), .cw-pos-axis span:nth-child(5) { display: none; }
  .cw-csv-grid { grid-template-columns: 1fr 1.3fr 1.3fr 1fr; }
  .cw-csv-grid span:nth-child(5n+1) { display: none; }
  .cw-csv-grid span:nth-child(5n+4) { display: block; }
}
@media (max-width: 899px) { .cw-csv-grid span:nth-child(5n) { display: block; } }
.k-crownwind .k-doc :is(p, li, summary) { overflow-wrap: break-word; }
.k-crownwind .k-doc a { overflow-wrap: anywhere; }
.cw-yr-gap0 { min-height: 34px; padding: 0 0 6px 24px; }
.cw-yr-gap0 .cw-yrs-bar { top: -10px; bottom: 0; }
html.k-motion .cw-service .cw-yr-rem, html.k-motion .cw-service .cw-yr-due, html.k-motion .cw-service .cw-yr-done { opacity: 0; }
.cw-hero .k-h1 { font-size: clamp(44px, min(5.4vw, 9.4svh), 90px); }

/* ==================== Review round 1 ==================== */
/* the kit's `main img { height: auto }` beat the frame's 100%: a black strip under every capture */
.k-crownwind .k-device-screen img { height: 100%; }

/* hero: the copy's rhythm (the kit's p reset removed it), a two-line headline, the pair centred */
.cw-hero .k-hero-more > * + * { margin-top: 22px !important; }
.cw-hero .k-hero-more > .k-actions { margin-top: 28px !important; }
.cw-hero .k-hero-more > .k-meta { margin-top: 14px !important; }
.cw-hero .k-h1 { font-size: clamp(44px, min(4.4vw, 7.6svh), 66px); max-width: none; text-wrap: balance; }
.cw-show { --gl: 14.6; }                       /* the watch's drawing starts 14.6cqh into its box */
.cw-watch { left: calc(50cqw - (var(--gl) + var(--gw)) * .5cqh); }
.cw-phone { left: calc(50cqw - (var(--gl) + var(--gw)) * .5cqh + var(--off) * 1cqh); }
.cw-note { left: calc(50cqw - (var(--gl) + var(--gw)) * .5cqh + var(--gl) * 1cqh); }
@media (max-width: 899px) { .cw-show { --gl: 11.9; } }

/* grounds: the night dial, a lighter band navy, the deep dial, a pale lume scene and two lume bands */
body.k-page.k-crownwind { --cw-band: #143650; --cw-pale: #E6F3FE; }
.cw-sync { background: var(--cw-band); }
.cw-sync .cw-card { background: rgba(3, 24, 38, .7); }
.cw-drift { background: var(--cw-deep); }
.cw-honest { background: var(--cw-ground); }
.cw-honest .cw-card { background: var(--cw-raised); }
.cw-rest { background: var(--cw-deep); }
.cw-compare { background: var(--cw-band); }
.cw-compare .k-teaser li { background: rgba(3, 24, 38, .55); }
.cw-plans-sec { background: var(--cw-ground); }
.k-crownwind .cw-plans-sec .k-plan { background: var(--cw-raised); }
.cw-faq-sec { background: var(--cw-deep); }
.cw-teaser-body { margin-top: 20px !important; }

/* the close as a lume band */
.cw-close { background: var(--cw-lume); color: var(--cw-ground); }
.cw-close .k-h2, .cw-close .k-lockup b { color: var(--cw-ground); }
.cw-close .k-lockup span, .cw-close .cw-close-lead { color: #234257; }
.cw-close .cw-soon { color: var(--cw-ground); box-shadow: inset 0 0 0 1.5px rgba(3, 24, 38, .28); }
.cw-close .k-soon::before { background: var(--cw-ground); box-shadow: 0 0 0 3px rgba(3, 24, 38, .18); }
.cw-close .k-subnav a { color: var(--cw-ground); box-shadow: inset 0 0 0 1.5px rgba(3, 24, 38, .25); }
.k-crownwind .cw-close .k-subnav a[aria-current="page"] { background: var(--cw-ground); color: var(--cw-lume); }

/* bands: the drift cone takes the width; positions with the visual on the left */
.cw-drift .cw-band-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.cw-drift > .k-section { padding: clamp(56px, 8svh, 96px) 0; }
.cw-drift .cw-cone-plot { height: clamp(260px, 52svh, 500px); }
.cw-band-phone .k-device { --k-device-w: clamp(130px, min(11vw, 24svh), 170px); }
.cw-posband .cw-band-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.cw-pos-cap { max-width: 56ch; }

/* honest numbers: a zoomed scale (+2 to +6 s/day), the rate's centre and range, and what the range is made of */
.cw-range .cw-scale { height: 58px; margin: 16px 6px 4px; }
.cw-range .cw-scale::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(236, 243, 248, .18); }
.cw-range .cw-scale-ax { margin: 0 6px; }
.cw-range .cw-pt { position: absolute; inset: 0; width: auto; height: auto; margin: 0; background: none; border-radius: 0; }
.cw-range .cw-pt::after { content: ""; position: absolute; left: 43%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--cw-lume); }
.cw-range .cw-wline { left: calc(43% - 12%); width: 24%; transform: scaleX(.504); }
.cw-range .cw-wt::after { left: 43%; }
.cw-sum { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: rgba(236, 243, 248, .08); margin: 16px 0 8px; }
.cw-sum i { height: 100%; transform-origin: left; }
.cw-sum-a { width: 25%; background: #A4D8FE; }
.cw-sum-b { width: 20%; background: #6FA9D6; }
.cw-sum-c { width: 5.5%; background: #FF9F0A; }
.cw-sum-key { display: flex; gap: 12px; font-size: 12.5px; color: var(--cw-text-2); flex-wrap: wrap; }
.cw-sum-key span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: 0; }
.cw-sum-key .ka::before { background: #A4D8FE; } .cw-sum-key .kb::before { background: #6FA9D6; } .cw-sum-key .kc::before { background: #FF9F0A; }
.cw-range .cw-card-n { margin-top: 10px !important; font-size: 14px; line-height: 1.4; color: var(--cw-text-2); }
.cw-range.is-wide .cw-card-n { color: var(--cw-warn); }

/* rows that haven't happened yet aren't shown, rather than parked dim */
html.k-motion .cw-sync .cw-tl { opacity: 0; }
html.k-motion .cw-hours .cw-hr { opacity: 0; }

/* phones: each scene's strip is a small version of its desktop visual, one group per step */
@media (max-width: 899px) {
  .cw-strip { position: relative; display: block; height: 46px; margin-top: 14px; }
  .cw-sg { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
  html.k-motion .cw-sg { opacity: 0; transition: opacity .25s ease; }
  html.k-motion .cw-sg.is-on { opacity: 1; }
  html:not(.k-motion) .cw-strip { display: none; }
  .cw-sg b { font: 600 17px/1 var(--k-display); font-variant-numeric: tabular-nums; color: var(--cw-text); }
  .cw-mini-k { font-size: 13px; color: var(--cw-text-2); }
  .cw-tp { font: 600 14px/1 var(--k-display); font-variant-numeric: tabular-nums; padding: 7px 9px; border-radius: 999px; background: rgba(164, 216, 254, .12); color: var(--cw-text-2); }
  .cw-tp.is-on { background: var(--cw-lume); color: var(--cw-ground); }
  .cw-late { opacity: 0; }
  .cw-mtrack { position: relative; flex: 1; height: 14px; margin: 0 8px; }
  .cw-mtrack::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: rgba(164, 216, 254, .18); }
  .cw-mbar { position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--cw-lume); transform-origin: left; }
  .cw-mpin { position: absolute; top: 1px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--cw-ground); box-shadow: inset 0 0 0 2px var(--cw-lume); }
  .cw-mpin.cw-on { background: var(--cw-lume); }
  .cw-sg-hours, .cw-sg-svc { flex-direction: column; align-items: stretch; gap: 4px; }
  .cw-mlabels { position: relative; height: 16px; margin: 0 8px; font-size: 12px; color: var(--cw-text-2); }
  .cw-mlabels span { position: absolute; top: 0; white-space: nowrap; transform: translateX(-50%); }
  .cw-mlabels span:first-child { transform: none; margin-left: -8px; }
  .cw-mlabels span:last-child { transform: translateX(-100%); margin-left: 8px; }
  .cw-mscale { position: relative; flex: 1; height: 30px; }
  .cw-mscale::before { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 1px; background: rgba(236, 243, 248, .2); }
  .cw-wl { position: absolute; top: 14px; left: calc(43% - 12%); width: 24%; height: 2px; background: var(--cw-lume); transform: scaleX(.504); }
  .cw-wt2 { position: absolute; inset: 0; transform: translateX(calc(var(--h, 6.05%) * var(--s))); }
  .cw-wt2[data-w="-1"] { --s: -1; } .cw-wt2[data-w="1"] { --s: 1; }
  .cw-wt2::after { content: ""; position: absolute; left: 43%; top: 6px; width: 2px; height: 18px; margin-left: -1px; background: var(--cw-lume); }
  .cw-pt2 { position: absolute; inset: 0; }
  .cw-pt2::after { content: ""; position: absolute; left: 43%; top: 9px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--cw-lume); }
  /* positions: the name over its value, so the track has the width */
  .pl { grid-template-columns: 96px minmax(0, 1fr); height: 84px; }
  .pl-val { grid-column: 1; grid-row: 1; align-self: end; text-align: left; font-size: 13px; margin-bottom: 14px; }
  .pl-name { grid-column: 1; grid-row: 1; align-self: start; margin-top: 16px; }
  .pl-track { grid-column: 2; grid-row: 1; }
  .pl-dots { left: calc(96px + 10px); right: 0; }
  .cw-pos-axis { margin: 8px 0 0 calc(96px + 10px); }
  .cw-pos-axis .pa-unit { right: 0; transform: none; top: 18px; }
  .cw-drift .cw-band-grid { grid-template-columns: minmax(0, 1fr); }
  .cw-posband .cw-band-grid { grid-template-columns: minmax(0, 1fr); }
  .cw-posband .cw-band-visual { order: 2; }
}

/* the support form on the dark set */
.cw-form { background: var(--cw-raised); color: var(--cw-text); box-shadow: 0 0 0 1px var(--k-line); }
.cw-form .sp-support-form label { color: var(--cw-text); }
.cw-form .sp-support-form :is(input, textarea) { background: var(--cw-ground); color: var(--cw-text); border-color: rgba(236, 243, 248, .22); }
.cw-form .sp-support-form :is(input, textarea)::placeholder { color: #6F8594; }
.cw-form .sp-support-opt, .cw-form .sp-support-note, .cw-form .sp-support-status { color: var(--cw-text-2); }
.cw-form a { color: var(--cw-lume) !important; }
.cw-form .sp-support-form { --sf-field: #031826; --sf-border: rgba(236, 243, 248, .24); --sf-muted: #91A3B0; }
.cw-range .cw-wt { --h: 6.05%; }
/* the drift band: the heading across the top, then the cone beside the real Watches screen */
.cw-drift-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 80px); align-items: end; }
.cw-drift-head .k-eyebrow { grid-column: 1 / -1; }
.cw-drift-head .k-body { max-width: 46ch; }
.cw-drift-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: clamp(28px, 5svh, 48px); }
.cw-drift .cw-cone-plot { height: clamp(220px, 40svh, 420px); }
.cw-drift .cw-band-phone { flex-direction: column; align-items: flex-start; margin-top: 0 !important; }
.cw-drift .cw-band-phone .k-meta { max-width: 19ch; }
@media (max-width: 899px) {
  .cw-drift-head { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .cw-drift-body { grid-template-columns: minmax(0, 1fr); }
  .cw-drift .cw-band-phone { flex-direction: row; align-items: center; }
}
@media (max-width: 899px) { .cw-drift .cw-band-visual { order: 0; } }
.cw-side > .cw-card { align-self: center; }
.cw-cmp-sum { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.55; color: var(--cw-text) !important; max-width: 62ch; }

/* ==================== Review round 2 ==================== */
.k-crownwind .cw-plans-sec .k-plan.k-plus { background: var(--cw-lume); color: var(--cw-ground); }
.cw-service { background: var(--cw-band); }
.cw-service .cw-card { background: rgba(3, 24, 38, .7); }
.cw-yr-done2::before { background: var(--cw-lume); }

/* the tiles on pale lume: the app's own snippets sit dark inside white tiles */
.cw-rest { background: var(--cw-pale); }
.cw-rest :is(.k-h2, .k-eyebrow) { color: var(--cw-ground); }
.k-crownwind .cw-rest .k-tile { background: #FFFFFF; box-shadow: 0 0 0 1px rgba(3, 24, 38, .08), 0 20px 40px -28px rgba(3, 24, 38, .35); }
.cw-rest .k-tile .k-h3 { color: var(--cw-ground); }
.cw-rest .k-tile p { color: #3A5466; }
.cw-rest .k-tile .cw-say, .cw-rest .k-tile .cw-row { background: var(--cw-ground); }
.cw-rest .k-tile .cw-say { color: var(--cw-text); }
.cw-rest .k-tile .cw-say-btn { color: var(--cw-lume); }
.cw-rest .k-tile .cw-say-warn { color: var(--cw-warn); }
.cw-rest .k-tile .cw-row b { color: var(--cw-text); }
.cw-rest .k-tile .cw-row span span, .cw-rest .k-tile .cw-row-r span { color: var(--cw-text-2); }
.cw-rest .cw-csv-name { color: var(--cw-text-2); }
.cw-compare { background: var(--cw-deep); }
.cw-faq-sec { background: var(--cw-band); }

/* how it compares: the heading runs the full width above the lines */
.cw-cmp-h { max-width: 22ch; margin-bottom: clamp(28px, 4svh, 48px) !important; }
.cw-teaser-body { margin-top: 0 !important; }

/* the drift band fits one window */
.cw-drift > .k-section { padding: clamp(40px, 6svh, 72px) 0; }
.cw-drift .cw-cone-plot { height: clamp(200px, 34svh, 400px); }
.cw-drift-body { margin-top: clamp(20px, 3.5svh, 40px); }
/* the tip's words sit above the dot, clear of the dotted true-time line */
.cw-cone-tip { margin: -54px 0 0 14px; }

/* the range card: the bar's scale */
.cw-sum-key .kd { margin-left: auto; }
.cw-sum-key .kd::before { display: none; }
.cw-posband .cw-band-grid.cw-flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
@media (max-width: 899px) { .cw-posband .cw-band-grid.cw-flip { grid-template-columns: minmax(0, 1fr); } }

/* ==================== Review round 3 ==================== */
.cw-cone-edge.cw-top { opacity: 0; }   /* shown while the line draws (crownwind.js), never under the end label */
.cw-hrs { height: 280px; }
.cw-hr span { white-space: nowrap; }
/* grounds: no two near-black darks meet */
.cw-honest { background: var(--cw-band); }
.cw-honest .cw-card { background: rgba(3, 24, 38, .7); }
.cw-plans-sec { background: var(--cw-band); }
.k-crownwind .cw-plans-sec .k-plan:not(.k-plus) { background: rgba(3, 24, 38, .7); }
.cw-faq-sec { background: var(--cw-ground); }
/* the hero's note carries the rate too */
.cw-note em { display: block; font: 600 15px/1.35 var(--k-display); font-style: normal; color: var(--cw-text); margin-top: 6px; font-variant-numeric: tabular-nums; }
@media (max-width: 899px) { .cw-note em { font-size: 13px; margin-top: 3px; } }
/* positions: on every width the value sits under its name, so the chart has the column; heavier marks */
.cw-pos .pl { grid-template-columns: 132px minmax(0, 1fr); height: clamp(92px, 14svh, 128px); }
.cw-pos .pl-val { grid-column: 1; grid-row: 1; align-self: end; text-align: left; font-size: 16px; margin-bottom: 18px; }
.cw-pos .pl-name { grid-column: 1; grid-row: 1; align-self: start; margin-top: 20px; }
.cw-pos .pl-track { grid-column: 2; grid-row: 1; }
.cw-pos .pl-dots { left: calc(132px + 18px); right: 0; }
.cw-pos .cw-pos-axis { margin: 10px 0 0 calc(132px + 18px); }
.cw-pos .cw-pos-axis .pa-unit { right: 0; transform: none; top: 20px; }
.cw-pos .pd { width: 4px; height: 38px; margin: -19px 0 0 -2px; }
.cw-pos .pl-avg { width: 26px; height: 26px; margin: -13px 0 0 -13px; border-width: 3.5px; }
.cw-pos .cw-whisker { height: 4px; margin-top: -2px; }
@media (max-width: 899px) {
  .cw-pos .pl { grid-template-columns: 96px minmax(0, 1fr); height: 84px; }
  .cw-pos .pl-val { font-size: 13px; margin-bottom: 14px; }
  .cw-pos .pl-name { margin-top: 16px; }
  .cw-pos .pl-dots { left: calc(96px + 10px); }
  .cw-pos .cw-pos-axis { margin: 8px 0 0 calc(96px + 10px); }
  .cw-pos .pd { width: 3px; height: 30px; margin: -15px 0 0 -1.5px; }
}
/* child pages: no orphaned last word in the intro */
.k-crownwind .k-sub-hero .k-lead { text-wrap: balance; }
@media (max-width: 899px) { .cw-note span { display: none; } }   /* on a phone the note keeps the offset and the rate, clear of the tap area */