/* ==========================================================================
   Hiveday's pages on the app page kit (/apps/kit/kit.css).
   Hive Side: SF Pro on system grounds, one honey tint for what's tapped or
   chosen, red only for what's overdue, the queen's year colours. Never the box
   (it lives on New inspection only), never hexagons, bees, cream or black.
   The showpiece is Hive 1's record card on the app's honey: the card the app's
   form and read view follow, its newest row filling in tap by tap, each count's
   first tap bringing down the number from the row above, as the app does.
   ========================================================================== */

body.k-hiveday {
  --k-bg: #FFFFFF;
  --k-bg-2: #F2F2F7;            /* the system grouped ground */
  --k-ink: #1C1C1E;
  --k-ink-2: #5E5E63;
  --k-accent: #9E5C00;          /* the app's accent, light */
  --k-accent-ink: #FFFFFF;
  --k-card: #FFFFFF;
  --k-line: rgba(60, 60, 67, .16);
  --k-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI", sans-serif;
  --hd-figure: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  --hd-honey: #9E5C00;
  --hd-honey-icon: #BF7514;     /* the icon's ground */
  --hd-honey-dark: #E6A84F;     /* the accent in dark mode */
  --hd-red: #D70015;            /* overdue, as text on white */
}

.hd-fig { font-family: var(--hd-figure); font-variant-numeric: tabular-nums; font-weight: 600; }
.k-hiveday .k-h1, .k-hiveday .k-h2 { text-wrap: balance; }
.k-hiveday .k-btn-primary { background: var(--hd-honey); color: #FFF; }
.k-hiveday .k-soon::before { background: #FFF; box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }
.k-hiveday .k-subnav a[aria-current="page"] { background: var(--hd-honey); color: #FFF; }

/* ---------- Hero ---------- */
.hd-hero { overflow-x: clip; }
.hd-hero .k-h1 { max-width: none; font-size: clamp(44px, min(5.3vw, 9.4svh), 82px); }
.k-page main .hd-hero .k-hero-head > * + * { margin-top: 18px; }
.k-page main .hd-hero .k-hero-more > * + * { margin-top: 22px; }
.hd-hero .k-lead { max-width: 34ch; }
.hd-price { font-size: 17px; color: var(--k-ink); text-wrap: pretty; }
.hd-price b { font-weight: 600; }

.hd-show { margin: 0; position: relative; --u: clamp(9px, min(1.04vw, calc((100svh - 150px) / 44)), 15.2px); }
.hd-stage { position: relative; border-radius: calc(var(--u) * 2.4); padding: calc(var(--u) * 2.4) calc(var(--u) * 1.7) calc(var(--u) * 2.6);
  background: linear-gradient(160deg, #C98020 0%, var(--hd-honey-icon) 42%, var(--hd-honey) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 50px 90px -46px rgba(110, 62, 0, .65), 0 18px 40px -26px rgba(110, 62, 0, .45);
  font-size: var(--u); }
.hd-pile { position: relative; }
.hd-sheet { position: absolute; inset: 0; background: #FFF; border-radius: 1.1em; box-shadow: 0 12px 30px -16px rgba(60, 30, 0, .55); }
.hd-sheet-1 { transform: rotate(-2.4deg) translate(-.3em, .4em); }
.hd-sheet-2 { transform: rotate(1.6deg) translate(.4em, .2em); }
.hd-card { position: relative; background: #FFF; border-radius: 1.1em; padding: 1.3em 1.4em 1.1em; color: #1C1C1E;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  box-shadow: 0 30px 60px -28px rgba(60, 30, 0, .6), 0 0 0 1px rgba(0, 0, 0, .04); }
.hd-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2em .9em; padding-bottom: .8em; border-bottom: .14em solid #1C1C1E; }
.hd-card-head b { font: 700 1.75em/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; letter-spacing: -.02em; margin-right: .2em; }
.hd-card-head span { font-size: .86em; color: #6E6E73; white-space: nowrap; }
.hd-queen-dot { display: inline-block; width: .72em; height: .72em; border-radius: 50%; background: #1F6FD6; box-shadow: 0 0 0 1px #AEAEB2; margin-right: .4em; vertical-align: -.02em; }
.hd-grid { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: .3em; --row: 2.75em; }
.hd-grid th { font: 500 .72em/1.2 -apple-system, system-ui, sans-serif; color: #6E6E73; text-align: center; padding: .7em 0 .5em; white-space: nowrap; }
.hd-grid th:first-child, .hd-grid td:first-child { text-align: left; }
.hd-grid th:last-child, .hd-grid td:last-child { text-align: left; padding-left: .7em; }
.hd-grid td { height: var(--row); text-align: center; border-top: 1px solid rgba(60, 60, 67, .13); font-size: .92em; color: #3A3A3C; white-space: nowrap; overflow: hidden; }
.hd-grid td.hd-c { font: 600 1.08em/1 var(--hd-figure); font-variant-numeric: tabular-nums; color: #1C1C1E; }
.hd-grid td:last-child { color: #6E6E73; text-overflow: ellipsis; font-size: .84em; }
.hd-grid col.hd-cd { width: 5.4em; } .hd-grid col.hd-cq { width: 3.15em; } .hd-grid col.hd-cn { width: 3.45em; } .hd-grid col.hd-cnote { width: auto; }
.hd-grid .hd-no { color: #6E6E73; font-size: .86em; }
.hd-new { box-shadow: inset 0 .14em 0 var(--hd-honey); }
.hd-new td { position: relative; color: var(--hd-honey); font-weight: 600; border-top: 0; overflow: visible; }
.hd-new td.hd-c { color: var(--hd-honey); }
.hd-new td:first-child { color: #1C1C1E; }
.hd-new td:last-child { color: #3A3A3C; font-weight: 400; overflow: hidden; }
.hd-cellv { display: inline-block; will-change: transform; }
.hd-card-foot { display: flex; align-items: baseline; gap: .6em; margin-top: .9em; padding-top: .8em; border-top: 1px solid rgba(60, 60, 67, .13); font-size: .92em; }
.hd-card-foot span { color: #6E6E73; }
.hd-card-foot b { font-weight: 600; color: var(--hd-honey); }
.hd-card-foot small { margin-left: auto; font-size: .9em; color: #6E6E73; }
.hd-tap { position: absolute; left: 0; top: 0; width: 3.25em; height: 3.25em; margin: -1.625em 0 0 -1.625em; border-radius: 50%;
  background: rgba(158, 92, 0, .14); box-shadow: 0 0 0 .14em rgba(158, 92, 0, .6); pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.hd-tap.is-on { opacity: 1; }
.hd-stage-note { margin-top: 1.1em !important; text-align: center; font: 500 .9em/1.3 var(--k-text); color: rgba(255, 255, 255, .92); }

@media (min-width: 900px) and (min-height: 820px) {
  html.k-motion .hd-hero { min-height: 0; height: 220svh; align-items: flex-start; padding: 0; }
  html.k-motion .hd-hero > .k-wrap { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; padding-top: 100px; padding-bottom: 28px; box-sizing: border-box; }
  html.k-motion .hd-hero .k-hero-grid { width: 100%; }
}
@media (max-width: 899px) {
  .hd-show { --u: min(3.25vw, 13px); }
  .hd-stage { padding: calc(var(--u) * 1.4) calc(var(--u) * .9) calc(var(--u) * 1.5); border-radius: 26px; }
  .hd-card { padding: 1em .9em .9em; }
  .hd-grid col.hd-cd { width: 4.6em; } .hd-grid col.hd-cq { width: 2.6em; } .hd-grid col.hd-cn { width: 3em; }
  .hd-grid tr.hd-old-early { display: none; }
  .hd-card-foot small { display: none; }
}

/* ---------- Strips (phones) ---------- */
.hd-strip-chip { display: inline-flex; padding: 5px 10px; border-radius: 999px; background: var(--k-card); box-shadow: 0 0 0 1px var(--k-line); font: 600 13px/1.2 var(--k-text); color: var(--k-ink); transition: background-color .25s ease, color .25s ease, opacity .25s ease; }
.hd-strip-chip.is-lit { background: var(--hd-honey); color: #FFF; box-shadow: none; }
html.k-motion .hd-strip-chip.is-off { opacity: 0; }

/* ---------- Patches over captures: the parts of a real screen that move ---------- */
.hd-patches { position: absolute; inset: 0; container-type: inline-size; pointer-events: none; }
.hd-patch { position: absolute; margin: 0; font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; white-space: nowrap; }
.hd-p-due { left: 4.4cqw; top: 49.4cqw; width: 50cqw; height: 6.4cqw; background: #F2F2F7; font: 600 3.86cqw/6.4cqw -apple-system, system-ui, sans-serif; color: #000; }
.hd-p-ago { right: 13.9cqw; top: 102.3cqw; width: 30cqw; height: 5.2cqw; background: #FFF; text-align: right; font: 400 3.41cqw/5.2cqw -apple-system, system-ui, sans-serif; color: #8A8A8E; }
.hd-group { position: absolute; left: 3.2cqw; right: 3.2cqw; border-radius: 4cqw; box-shadow: 0 0 0 .7cqw var(--hd-honey); opacity: 0; transition: opacity .3s ease; }
.hd-group.is-on { opacity: 1; }
.hd-g-over { top: 48.2cqw; height: 45.6cqw; }
.hd-g-new { top: 93.6cqw; height: 23.4cqw; }
.hd-g-soon { top: 117cqw; height: 54cqw; }
/* unused */ .hd-x-mites { left: 60.6cqw; top: 111.6cqw; width: 16.7cqw; height: 6.2cqw; background: #FFF; text-align: center; font: 600 5cqw/6.2cqw var(--hd-figure); font-variant-numeric: tabular-nums; color: #000; }
/* unused */ .hd-x-rate { left: 52cqw; top: 151.6cqw; width: 18.2cqw; height: 7.6cqw; background: #FFF; text-align: right; font: 600 7.73cqw/7.6cqw var(--hd-figure); font-variant-numeric: tabular-nums; color: #000; }

/* ---------- Scene: the next visit, and what's due ---------- */
.hd-due-sec { background: var(--k-bg-2); }
.hd-due-visual { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); }
.hd-side { position: relative; width: 262px; height: 270px; flex: none; }
.hd-side > div { position: absolute; inset: 0 0 auto 0; background: #FFF; border-radius: 24px; padding: 20px 22px; box-shadow: 0 0 0 1px var(--k-line), 0 30px 60px -40px rgba(0, 0, 0, .35); transition: opacity .2s ease, transform .2s ease; }
.hd-due-sec[data-step="1"] .hd-side-groups, .hd-due-sec:not([data-step="1"]) .hd-side-day { transition-delay: .22s; }
.hd-side-label { font: 600 12px/1.2 var(--k-text); letter-spacing: .08em; text-transform: uppercase; color: var(--hd-honey); }
.hd-cal-day { font: 700 34px/1.1 var(--k-display); color: var(--k-ink); margin: 8px 0 4px !important; font-variant-numeric: tabular-nums; }
.hd-cal-due { font: 600 17px/1.3 var(--k-text); color: var(--k-ink); margin-top: 10px !important; }
.hd-cal-note { font-size: 14px; line-height: 1.4; color: var(--k-ink-2); margin-top: 10px !important; }
.hd-groups p { display: flex; gap: 10px; align-items: baseline; font: 500 15px/1.3 var(--k-text); color: var(--k-ink-2); padding: 9px 0; border-top: 1px solid var(--k-line); transition: color .25s ease; }
.hd-groups p:first-of-type { border-top: 0; }
.hd-groups p i { width: 10px; height: 10px; border-radius: 50%; background: #D1D1D6; flex: none; transition: background-color .25s ease; transform: translateY(1px); }
.hd-groups p.is-on { color: var(--k-ink); }
.hd-groups p.is-on i { background: var(--hd-honey); }
.hd-due-sec[data-step="1"] .hd-side-day, .hd-due-sec:not([data-step="1"]) .hd-side-groups { opacity: 0; transform: translateY(10px); pointer-events: none; }
html:not(.k-motion) .hd-side { height: auto; display: grid; gap: 14px; }
html:not(.k-motion) .hd-side > div { position: relative; opacity: 1 !important; transform: none !important; }
.hd-due-sec[data-step="1"] .hd-patches-03 { opacity: 0; }
.hd-due-sec:not([data-step="1"]) .hd-patches-02 { opacity: 0; }
html:not(.k-motion) .hd-patches-03 { opacity: 1; }

/* ---------- Band: varroa, on the app's honey ---------- */
.hd-varroa-band { background: linear-gradient(165deg, #B26A0E 0%, var(--hd-honey) 60%, #8A5000 100%); color: #FFF; min-height: 100svh; display: flex; align-items: center; box-sizing: border-box; }
.hd-varroa-band > .k-wrap { width: 100%; }
.hd-varroa-band .k-h2 { color: #FFF !important; }
.hd-varroa-band .k-lead, .hd-varroa-band .k-body { color: rgba(255, 255, 255, .9); }
.hd-varroa-band .k-eyebrow { color: rgba(255, 255, 255, .8); }
.hd-varroa-band strong { color: #FFF !important; }
.hd-vcard { background: #FFF; border-radius: 30px; padding: clamp(18px, 2.4vw, 30px); color: #1C1C1E; box-shadow: 0 50px 90px -40px rgba(60, 30, 0, .7); max-width: 620px; justify-self: center; width: 100%; box-sizing: border-box; }
.hd-vsum { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 10px; }
.hd-vsum > div { background: #F2F2F7; border-radius: 18px; padding: 14px 16px; }
.hd-vsum small { display: block; font-size: 13px; color: #6E6E73; margin-bottom: 8px; }
.hd-vsum .hd-fig { display: block; font-size: clamp(30px, 3vw, 42px); line-height: 1; color: #1C1C1E; }
.hd-vrate .hd-fig { color: var(--hd-honey) !important; font-size: clamp(40px, 4.2vw, 60px) !important; display: inline-block !important; }
.hd-vrate em { font-style: normal; font-size: 14px; color: #6E6E73; margin-left: 6px; white-space: nowrap; }
.hd-vmethod { margin-top: 12px !important; font-size: 14px; color: #6E6E73; }
.hd-vchart { margin-top: 18px; background: #F2F2F7; border-radius: 18px; padding: 14px 14px 6px; }
.hd-vchart-title { font: 600 16px/1.2 var(--k-text); color: #1C1C1E; margin-bottom: 4px !important; }
.hd-chart { width: 100%; height: auto; display: block; }
.hd-chart .hd-grid-l { stroke: rgba(60, 60, 67, .14); stroke-width: 1; }
.hd-chart text { font: 500 12px var(--k-text); fill: #6E6E73; }
.hd-chart .hd-ref { stroke: #6E6E73; stroke-width: 1.6; stroke-dasharray: 6 6; }
.hd-chart .hd-ref-label { fill: #3A3A3C; font-weight: 600; }
.hd-chart .hd-line { fill: none; stroke: var(--hd-honey); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.hd-chart circle { fill: #FFF; stroke: var(--hd-honey); stroke-width: 3; }
@media (max-width: 899px) {
  .hd-varroa-band { min-height: 0; }
  .hd-vsum { grid-template-columns: 1fr 1fr; }
  .hd-vrate { grid-column: span 2; }
  .hd-chart text { font-size: 20px; }
}

/* ---------- Scene: the medicines record ---------- */
.hd-meds-sec { background: var(--k-bg); }
.hd-meds-visual { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); }
.hd-meds-side { position: relative; width: 360px; height: 440px; flex: none; }
.hd-keep, .hd-pdf { position: absolute; inset: 0 0 auto 0; transition: opacity .2s ease, transform .2s ease; }
.hd-meds-sec[data-step="1"] .hd-pdf, .hd-meds-sec:not([data-step="1"]) .hd-keep { transition-delay: .22s; }
.hd-keep { background: #F2F2F7 !important; box-shadow: none !important; clip-path: inset(0 0 var(--clip, 0px) 0 round 24px); transition: opacity .35s ease, transform .35s ease, clip-path .3s ease; background: #FFF; border-radius: 24px; padding: 22px 24px; box-shadow: 0 0 0 1px var(--k-line), 0 30px 60px -40px rgba(0, 0, 0, .35); }
.hd-keep h3 { font: 600 19px/1.2 var(--k-text) !important; color: var(--k-ink) !important; }
.hd-keep > small { display: block; margin-top: 4px; font-size: 14px; color: var(--k-ink-2); }
.hd-keep p { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--k-line); font-size: 15px; color: var(--k-ink-2); transition: opacity .3s ease; }
.hd-keep p:first-of-type { margin-top: 14px !important; }
.hd-keep p b { color: var(--k-ink); font-weight: 600; white-space: nowrap; }
.hd-keep .hd-keep-until { margin-top: 6px !important; padding: 14px 16px; border: 0; border-radius: 16px; background: #F2F2F7; display: block; }
.hd-keep .hd-keep-until span { display: block; font-size: 13px; color: var(--k-ink-2); }
.hd-keep .hd-keep-until b { display: block; margin-top: 4px; font: 700 24px/1.15 var(--k-display); color: var(--hd-honey); white-space: normal; }
.hd-keep .hd-keep-until b .hd-nw { display: inline; margin: 0; font: inherit; color: inherit; white-space: nowrap; }
html.k-motion .hd-keep p.is-off { opacity: 0; }
.hd-pdf { background: #FFFFFF; color: #1C1C1E; border-radius: 8px; padding: 18px 18px 14px; font-family: var(--k-text); box-shadow: 0 40px 70px -36px rgba(0, 0, 0, .45), 0 0 0 1px var(--k-line); transform: rotate(-1deg); }
.hd-pdf header { display: grid; gap: 4px; border-bottom: 2px solid #1C1C1E; padding-bottom: 8px; margin-bottom: 8px; }
.hd-pdf header b { font-size: 14px; line-height: 1.25; }
.hd-pdf header span { font-size: 12px; color: #6E6E73; white-space: nowrap; }
.hd-pdf h4 { margin: 10px 0 4px; font: 700 11px/1.2 var(--k-text); letter-spacing: .06em; text-transform: uppercase; color: #6E6E73; }
.hd-pdf table { width: 100%; border-collapse: collapse; font-size: 12px; }
.hd-pdf td { padding: 4px 4px 4px 0; border-bottom: 1px solid #E5E5EA; vertical-align: top; white-space: nowrap; }
.hd-pdf td:last-child { text-align: right; padding-right: 0; color: #3A3A3C; white-space: normal; }
.hd-pdf tr { transition: opacity .3s ease; }
html.k-motion .hd-pdf tr.is-off { opacity: 0; }
.hd-pdf footer { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 11px; color: #6E6E73; white-space: nowrap; }
.hd-pdf-count { margin-top: 10px !important; font-size: 11.5px; color: #3A3A3C; font-weight: 500; }
.hd-meds-sec[data-step="1"] .hd-keep, .hd-meds-sec:not([data-step="1"]) .hd-pdf { opacity: 0; transform: translateY(12px); pointer-events: none; }
.hd-meds-sec:not([data-step="1"]) .hd-patches-07 { opacity: 0; }
html:not(.k-motion) .hd-meds-side { height: auto; display: grid; gap: 16px; }
html:not(.k-motion) .hd-keep, html:not(.k-motion) .hd-pdf { position: relative; opacity: 1 !important; transform: none !important; }

/* ---------- Band: archive a colony ---------- */
.hd-archive-band { background: var(--k-bg-2); min-height: 100svh; display: flex; align-items: center; box-sizing: border-box; }
.hd-archive-band > .k-wrap { width: 100%; }
.hd-sheet-ui { width: 100%; max-width: 460px; justify-self: center; background: #F2F2F7; border-radius: 34px; padding: 18px 18px 22px; font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 50px 90px -46px rgba(0, 0, 0, .4); box-sizing: border-box; }
.hd-sheet-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 14px; }
.hd-sheet-top span { justify-self: start; padding: 9px 16px; border-radius: 99px; background: #FFF; font-size: 16px; color: var(--hd-honey); box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.hd-sheet-top b { text-align: center; font: 600 17px/1.2 -apple-system, system-ui, sans-serif; }
.hd-sheet-top b small { display: block; font-weight: 400; font-size: 13px; color: #8A8A8E; }
.hd-sheet-top em { justify-self: end; font-style: normal; padding: 9px 16px; border-radius: 99px; background: var(--hd-honey); color: #FFF; font-weight: 600; font-size: 16px; transition: transform .2s ease, filter .2s ease; }
.hd-sheet-top em.is-pressed { transform: scale(.94); filter: brightness(.9); }
.hd-sheet-h { font-size: 14px; color: #6E6E73; margin: 8px 6px 6px !important; }
.hd-reason { background: #FFF; border-radius: 22px; overflow: hidden; }
.hd-reason p { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; font-size: 17px; color: #000; border-top: 1px solid rgba(60, 60, 67, .12); }
.hd-reason p:first-child { border-top: 0; }
.hd-reason p i { width: 12px; height: 7px; border: solid var(--hd-honey); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) translateY(-2px); opacity: 0; transition: opacity .2s ease; }
.hd-reason p.is-on i { opacity: 1; }
.hd-sheet-foot { font-size: 13px; line-height: 1.4; color: #6E6E73; margin: 8px 6px 0 !important; }
.hd-sheet-date { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding: 12px 18px; background: #FFF; border-radius: 18px; font-size: 17px; }
.hd-sheet-date span { padding: 6px 12px; border-radius: 10px; background: #F2F2F7; font-size: 16px; }

/* ---------- Tiles ---------- */
.hd-marks { display: flex; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; }
.hd-mark { display: grid; justify-items: center; gap: 8px; font: 600 15px/1 var(--hd-figure); color: var(--k-ink-2); flex: 1; }
.hd-mark i { width: clamp(44px, 5vw, 64px); aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 1.5px #AEAEB2, 0 8px 18px -8px rgba(0,0,0,.35); }
.hd-files { display: grid; gap: 8px; margin-top: auto; }
.hd-files span { display: flex; justify-content: space-between; padding: 9px 12px; border-radius: 12px; background: var(--k-bg-2); font: 500 14px/1.2 var(--k-text); color: var(--k-ink); }
.hd-files em { font-style: normal; color: var(--k-ink-2); }
.hd-notif { margin-top: auto; background: rgba(242, 242, 247, .96); border-radius: 18px; padding: 12px 14px; box-shadow: 0 10px 24px -14px rgba(0,0,0,.35), 0 0 0 1px var(--k-line); display: grid; grid-template-columns: 34px 1fr; gap: 4px 10px; align-items: center; }
.hd-notif img { width: 34px; height: 34px; border-radius: 8px; grid-row: span 2; }
.hd-notif b { font: 600 14px/1.2 var(--k-text); color: var(--k-ink); }
.hd-notif span { font-size: 14px; line-height: 1.3; color: var(--k-ink-2); }
.hd-photos { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 14px; background: var(--k-bg-2); font: 500 15px/1.2 var(--k-text); color: var(--hd-honey); }
.hd-photos em { font-style: normal; padding: 3px 9px; border-radius: 99px; background: rgba(158, 92, 0, .1); color: var(--hd-honey); font-size: 13px; font-weight: 600; }
.hd-sync { margin-top: auto; display: flex; align-items: center; gap: 12px; font: 600 14px/1.3 var(--k-text); color: var(--k-ink); }
.hd-sync i { width: 36px; height: 36px; border-radius: 50%; background: var(--k-bg-2); display: grid; place-items: center; flex: none; }
.hd-sync svg { width: 20px; height: 20px; fill: none; stroke: var(--hd-honey); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 599px) {
  .k-hiveday .k-tiles { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .k-hiveday .k-tile.k-wide { grid-column: auto; }
  .k-hiveday .k-tile { padding: 18px; gap: 8px; border-radius: 20px; }
  .k-hiveday .k-tile .k-h3 { font-size: 18px; }
  .k-hiveday .k-tile p { font-size: 14px; }
}

/* ---------- Plans, close ---------- */
.k-hiveday .k-plan.k-plus { background: var(--hd-honey); color: #FFF; }
.k-hiveday .k-plan.k-plus li::before { border-color: #FFF; }
.hd-close { background: var(--hd-honey); color: #FFF; }
.hd-close .k-h2 { color: #FFF !important; }
.hd-close .k-lockup img { background: #FFF; padding: 5px; box-sizing: border-box; }
.hd-close .k-lockup b, .hd-close .k-lockup span { color: #FFF; }
.hd-close .k-lockup > span { text-align: left; }
.hd-close-gap { height: 56px; background: var(--k-bg-2); }
.hd-close .k-subnav { justify-content: center; margin-top: 34px; }
.hd-close .k-subnav a { color: #FFF; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); }
.hd-close .k-subnav a[aria-current="page"] { background: #FFF; color: var(--hd-honey); }
.hd-close .k-btn-primary { background: #FFF; color: var(--hd-honey); }
.hd-close .k-soon::before { background: var(--hd-honey); box-shadow: 0 0 0 3px rgba(158, 92, 0, .25); }

/* ---------- Child pages ---------- */
.k-hiveday .k-contact { background: var(--k-card); border-radius: 22px; padding: 24px; box-shadow: 0 0 0 1px var(--k-line); margin: 18px 0 8px; }
.k-hiveday .k-contact > p + p { margin-top: 10px; }
.k-hiveday .k-contact .sp-support-form { margin-top: 18px; }
.k-hiveday .k-sub-hero .k-standout { background: #FFF; box-shadow: inset 4px 0 0 var(--hd-honey), 0 0 0 1px var(--k-line); }
.k-hiveday .k-sub-hero .k-h1 { text-wrap: balance; }
@media (min-width: 900px) {
  .k-hiveday .k-sub-hero:has(.k-standout) .k-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); column-gap: 56px; align-items: start; }
  .k-hiveday .k-sub-hero:has(.k-standout) .k-wrap > * { grid-column: 1; }
  .k-hiveday .k-sub-hero:has(.k-standout) .k-standout { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin-top: 0; max-width: none; }
}

.hd-due-visual, .hd-meds-visual { justify-content: center; }
@media (max-width: 899px) {
  .hd-side, .hd-meds-side { display: none; }
}

/* ---------- Round 3: the hero's iPhone, filling the card ---------- */
.hd-stage { min-height: 37em; }
.hd-pile { position: absolute; top: 2.2em; right: 1.6em; width: 26.6em; }
.hd-grid col.hd-cd { width: 4.3em; } .hd-grid col.hd-cq { width: 2.75em; } .hd-grid col.hd-cn { width: 3em; }
.hd-grid td:last-child, .hd-grid th:last-child { text-align: center; padding-left: 0; }
.hd-grid td:last-child { color: inherit; font-size: inherit; }
.hd-grid td.hd-c:last-child { font: 600 1.08em/1 var(--hd-figure); color: #1C1C1E; }
.hd-new td.hd-c:last-child { color: var(--hd-honey); }
.hd-card-foot b { transition: color .2s ease; }
.hd-card-foot.is-due b { color: var(--hd-red); }
.hd-phone { position: absolute; left: 1.2em; top: 4.4em; width: 12.6em; aspect-ratio: 1 / 2.12; box-sizing: border-box; border-radius: 2.5em; padding: .45em;
  background: #0B0B0C; box-shadow: 0 0 0 .1em #3A3A3D inset, 0 40px 70px -26px rgba(40, 20, 0, .7), 0 14px 30px -14px rgba(40, 20, 0, .5); z-index: 2; }
.hd-phone::after { content: ""; position: absolute; top: .85em; left: 50%; width: 30%; height: 1.35em; transform: translateX(-50%); background: #000; border-radius: 99px; }
.hd-phone-screen { position: relative; height: 100%; border-radius: 2.1em; overflow: hidden; background: #FFF; container-type: inline-size; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; color: #000; }
.hd-phone-screen > * { margin: 0 5cqw; }
.hd-phone-screen > .hd-f-cancel, .k-page main .hd-phone-screen > p.hd-f-cancel { margin: 15cqw 0 0 5cqw; }
.hd-f-cancel { display: inline-block; padding: 1.6cqw 3.4cqw; border-radius: 99px; background: #F2F2F7; font-size: 3.6cqw; color: var(--hd-honey); }
.hd-f-title { margin-top: 2.6cqw !important; margin-left: 5cqw !important; font: 700 7.8cqw/1.1 -apple-system, system-ui, sans-serif; letter-spacing: -.02em; }
.hd-f-sub { font-size: 3.2cqw; color: rgba(60, 60, 67, .6); margin: .8cqw 5cqw 2.4cqw !important; white-space: nowrap; }
.hd-f-sub .hd-queen-dot { width: 2.4cqw; height: 2.4cqw; margin-right: 1cqw; }
.hd-f-row { display: flex; justify-content: space-between; align-items: center; min-height: 12.4cqw; border-top: 1px solid rgba(60, 60, 67, .12); }
.hd-f-row > b { font: 600 4cqw/1.15 -apple-system, system-ui, sans-serif; }
.hd-f-row > b small { display: block; font: 400 3cqw/1.3 -apple-system, system-ui, sans-serif; color: rgba(60, 60, 67, .6); }
.hd-f-row > b small.is-clear { color: var(--hd-honey); }
.hd-f-pair { display: grid; grid-template-columns: 22cqw 22cqw; gap: 1.8cqw; }
.hd-f-pair em, .hd-f-temper em, .hd-f-count, .hd-f-pm i { font-style: normal; display: grid; place-items: center; background: #EFEFF0; color: #000; transition: background-color .2s ease, color .2s ease; }
.hd-f-pair em { height: 9.6cqw; border-radius: 99px; font-size: 3.8cqw; }
.hd-f-pair em.is-on, .hd-f-temper em.is-on { background: var(--hd-honey); color: #FFF; font-weight: 600; }
.hd-f-ctl { position: relative; width: 46cqw; height: 9.6cqw; }
.hd-f-count { position: absolute; inset: 0; border-radius: 99px; font-size: 3.8cqw; transition: opacity .15s ease; }
.hd-f-pm { position: absolute; inset: 0; display: grid; grid-template-columns: 9.6cqw 1fr 9.6cqw; align-items: center; justify-items: center; opacity: 0; transition: opacity .15s ease; }
.hd-f-pm i { width: 9.6cqw; height: 9.6cqw; border-radius: 50%; font-size: 5cqw; line-height: 1; color: #3C3C43; }
.hd-f-pm u { text-decoration: none; font: 600 7.4cqw/1 var(--hd-figure); font-variant-numeric: tabular-nums; }
.hd-f-ctl.is-set .hd-f-count { opacity: 0; }
.hd-f-ctl.is-set .hd-f-pm { opacity: 1; }
.hd-f-temper { display: grid; grid-template-columns: repeat(5, 8.6cqw); gap: .8cqw; }
.hd-f-temper em { height: 8.6cqw; border-radius: 50%; font-size: 3.6cqw; }
.hd-f-save { position: absolute; left: 5cqw; right: 5cqw; bottom: 6cqw; height: 11cqw; border-radius: 99px; background: var(--hd-honey); color: #FFF; display: grid; place-items: center; font: 600 4cqw/1 -apple-system, system-ui, sans-serif; transition: filter .15s ease, transform .15s ease; }
.hd-f-save.is-pressed { filter: brightness(.88); transform: scale(.97); }
.hd-tap { z-index: 3; width: 2.6em; height: 2.6em; margin: -1.3em 0 0 -1.3em; }
@media (min-width: 900px) and (max-width: 1100px) { .hd-hero .k-btn { padding: 0 14px; font-size: 15px; } }
@media (max-width: 899px) {
  .hd-show { --u: min(2.95vw, 12px); }
  .hd-stage { min-height: 0; }
  .hd-pile { position: relative; top: auto; right: auto; width: auto; }
  .hd-grid col.hd-cd { width: 4.6em; }
  .hd-phone { position: relative; left: auto; top: auto; margin: 1.4em auto 0; width: 14em; }
  .hd-card-foot small { display: inline; }
}

/* ---------- Round 3: the medicines record ---------- */
.hd-nw { white-space: nowrap; }
.hd-meds-sec .k-step .k-meta { margin-top: 12px !important; }
.hd-share-ring { position: absolute; left: 50cqw; top: 187.9cqw; width: 30cqw; height: 30cqw; margin: -15cqw 0 0 -15cqw; border-radius: 50%; background: rgba(255, 255, 255, .3); box-shadow: 0 0 0 1.2cqw rgba(255, 255, 255, .85); opacity: 0; transition: opacity .2s ease; }
.hd-share-ring.is-on { opacity: 1; }
.hd-pdf-mini { display: none; }
@media (max-width: 899px) {
  .hd-pdf-mini { display: grid !important; gap: 6px; padding: 12px 14px; border-radius: 14px; background: #FFF; box-shadow: 0 0 0 1px var(--k-line); }
  .hd-pdf-mini p { font-size: 13px; line-height: 1.35; color: var(--k-ink-2); }
  .hd-pdf-mini b { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--k-ink); }
}

/* ---------- Round 3: queens, by colour ---------- */
.hd-queen-band { background: #FFF; min-height: 100svh; display: flex; align-items: center; box-sizing: border-box; }
.hd-queen-band > .k-wrap { width: 100%; }
.hd-queens { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: center; background: #F2F2F7; border-radius: 34px; padding: clamp(22px, 3vw, 40px); }
.hd-q-big { display: grid; justify-items: center; gap: 10px; }
.hd-q-big i { width: clamp(120px, 14vw, 200px); aspect-ratio: 1; border-radius: 50%; background: var(--qbig, #1F6FD6); box-shadow: 0 0 0 2px #AEAEB2, 0 30px 50px -24px rgba(0,0,0,.45), inset 0 -10px 24px rgba(0,0,0,.12), inset 0 10px 18px rgba(255,255,255,.35); }
.hd-q-big b { font: 700 clamp(34px, 3.4vw, 48px)/1 var(--hd-figure); font-variant-numeric: tabular-nums; color: var(--k-ink); }
.hd-q-big span { font: 600 16px/1 var(--k-text); color: var(--k-ink-2); }
.hd-q-rows { display: grid; gap: 8px; }
.hd-q-rows p { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 12px; align-items: center; padding: 12px 16px; border-radius: 18px; background: #FFF; transition: box-shadow .25s ease, transform .25s ease; }
.hd-q-rows p i { grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; background: var(--q); box-shadow: 0 0 0 1px #AEAEB2; }
.hd-q-rows p.is-ring i { background: transparent; box-shadow: 0 0 0 1px #AEAEB2, inset 0 0 0 5px #FFF, inset 0 0 0 6px #AEAEB2; }
.hd-q-rows p b { font: 600 16px/1.2 var(--k-text); color: var(--k-ink); }
.hd-q-rows p span { font-size: 14px; color: var(--k-ink-2); }
.hd-q-rows p.is-on { box-shadow: 0 0 0 2px var(--hd-honey); }
@media (max-width: 899px) {
  .hd-queen-band { min-height: 0; }
  .hd-queens { grid-template-columns: minmax(0, 1fr); }
}
.hd-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.hd-reasons span { padding: 6px 12px; border-radius: 999px; background: var(--k-bg-2); font: 600 14px/1.2 var(--k-text); color: var(--k-ink); }
.hd-reasons span.is-on { background: var(--hd-honey); color: #FFF; }
.hd-photos span { white-space: nowrap; }

/* ---------- Round 3b: the iPhone leads, the card's latest rows beside it ---------- */
.hd-grid tr.hd-old-early { display: none; }
.hd-stage { min-height: 40.5em; }
.hd-pile { top: 3.2em; right: 1.4em; width: 23.4em; font-size: .9em; }
.hd-grid col.hd-cd { width: 4em; } .hd-grid col.hd-cq { width: 2.5em; } .hd-grid col.hd-cn { width: 2.75em; }
.hd-phone { left: 1.2em; top: 1.6em; width: 18em; }
.hd-f-row > b { font-size: 4.4cqw; }
.hd-f-row > b small { font-size: 3.4cqw; }
.hd-f-pair em, .hd-f-count { font-size: 4.2cqw; }
.hd-f-sub { font-size: 3.5cqw; }
.hd-f-title { font-size: 8.4cqw; }
.hd-f-row { min-height: 13.6cqw; }
.hd-f-save { font-size: 4.4cqw; height: 12cqw; }
.hd-tap { width: 3.4em; height: 3.4em; margin: -1.7em 0 0 -1.7em; }
@media (max-width: 899px) {
  .hd-show { --u: min(3.05vw, 12.4px); }
  .hd-stage { min-height: 0; padding-bottom: 0; overflow: hidden; }
  .hd-pile { position: relative; top: auto; right: auto; width: auto; font-size: .92em; }
  .hd-phone { position: relative; left: auto; top: auto; margin: 1.2em auto 0; width: 17.2em; aspect-ratio: auto; height: 23em; border-radius: 2.5em 2.5em 0 0; padding-bottom: 0; }
  .hd-phone-screen { border-radius: 2.1em 2.1em 0 0; }
  .hd-f-save { display: none; }
}

/* ---------- Round 3c: the card's columns inside it; the form's buttons at 52 points (12.94% of a 402-point iPhone) ---------- */
.hd-pile .hd-card { padding: 1.2em 1.1em 1em; }
.hd-grid th { font-size: .66em; }
.hd-grid col.hd-cd { width: 3.7em; } .hd-grid col.hd-cq { width: 2.3em; } .hd-grid col.hd-cn { width: 2.45em; }
.hd-f-row { min-height: 16.6cqw; }
.hd-f-row > b { font-size: 4.9cqw; }
.hd-f-row > b small { font-size: 3.6cqw; }
.hd-f-pair { grid-template-columns: 22cqw 22cqw; gap: 1.6cqw; }
.hd-f-pair em { height: 12.9cqw; font-size: 4.4cqw; }
.hd-f-ctl { width: 45.6cqw; height: 12.9cqw; }
.hd-f-count { font-size: 4.4cqw; }
.hd-f-pm { grid-template-columns: 12.9cqw 1fr 12.9cqw; }
.hd-f-pm i { width: 12.9cqw; height: 12.9cqw; font-size: 6cqw; }
.hd-f-pm u { font-size: 8cqw; }
.hd-f-temper { grid-template-columns: repeat(5, 11cqw); gap: 1.2cqw; }
.hd-f-temper em { height: 11cqw; font-size: 4.2cqw; }
.hd-f-save { height: 12.9cqw; }
@media (max-width: 899px) {
  .hd-phone { height: 27em; }
}
.hd-f-group { margin-top: 5cqw !important; }
.hd-f-group > b { display: block; font: 600 4.9cqw/1.2 -apple-system, system-ui, sans-serif; }
.hd-f-group > span { display: flex; flex-wrap: wrap; gap: 1.6cqw; margin-top: 2.4cqw; }
.hd-f-group em { font-style: normal; display: grid; place-items: center; height: 10.4cqw; padding: 0 3.8cqw; border-radius: 99px; background: #EFEFF0; font-size: 4cqw; }
.hd-f-save { box-shadow: 0 0 0 5cqw #FFF; }
@media (max-width: 899px) {
  .hd-show { --u: min(3.05vw, 12.4px); }
  .hd-phone { width: 20em; height: 31.6em; }
}

/* ---------- Sweep fixes ---------- */
/* Scene headings balanced and sized by height too, so a step's words fit a 657px window */
.k-hiveday .k-step .k-h2 { font-size: clamp(40px, min(3.7vw, 6.6svh), 58px); text-wrap: balance; }
/* The phone is cropped on a phone: the field below the crop isn't drawn at all */
@media (max-width: 899px) { .hd-f-group { display: none; } }
/* Legal pages: long addresses break rather than push the page sideways */
.k-child a { overflow-wrap: anywhere; }
.k-child p, .k-child li { overflow-wrap: break-word; }