/* ============================================================
   KENNECT — heart pulse (travelling beam) + phone refinements
   Two stacked ECG paths: a faint full waveform + a bright glowing
   pulse that runs along it (inspired by the PulseFlow hero beam).
   Paths carry pathLength="100" so one animation fits every size.
   ============================================================ */

.watch-ecg,.hline{ position:relative; }
/* all-green pulse — bright kiwi on dark surfaces, dark parsley on light cards */
.watch-ecg{ color:var(--kiwi); }
#heroPhone .hline,.scr-detail .hline{ color:var(--kiwi); }
.hline.ecg,.hcard .hline,.insight .hline{ color:var(--parsley); }
/* every pulse uses the same 2-cycle waveform + meet (never stretched);
   only the box size differs. give each a comfortable height. */
.scr-detail .hline{ flex:none !important; height:60px !important; min-height:0 !important; align-self:center; width:100%; }
.hcard .hline,.insight .hline{ height:84px !important; }
.watch-ecg{ min-height:46px; }

/* faint baseline waveform */
.ecg-base{ fill:none !important; stroke:currentColor !important; opacity:.28 !important;
  stroke-width:2 !important; stroke-linecap:round !important; stroke-linejoin:round !important;
  stroke-dasharray:none !important; stroke-dashoffset:0 !important; animation:none !important;
  filter:none !important; }

/* bright pulse that travels along the same path — green glow */
.ecg-beam{ fill:none !important; stroke:var(--kiwi) !important; opacity:1 !important;
  stroke-width:2.6 !important; stroke-linecap:round !important; stroke-linejoin:round !important;
  stroke-dasharray:9 100 !important; stroke-dashoffset:9;
  filter:drop-shadow(0 0 4px var(--kiwi)) drop-shadow(0 0 8px rgba(164,190,92,.65)) !important;
  animation:knBeam 2.3s linear infinite !important; }
.hline.ecg .ecg-beam,.hcard .hline .ecg-beam,.insight .hline .ecg-beam{
  filter:drop-shadow(0 0 3px var(--kiwi)) drop-shadow(0 0 6px rgba(20,68,25,.4)) !important; }
@keyframes knBeam{ from{ stroke-dashoffset:9; } to{ stroke-dashoffset:-100; } }

/* gentle beating heart icon */
.wheart{ display:inline-grid; place-items:center; transform-origin:center; animation:knBeat 1.05s ease-in-out infinite; }
@keyframes knBeat{ 0%,100%{ transform:scale(1) } 12%{ transform:scale(1.18) } 26%{ transform:scale(1) } 40%{ transform:scale(1.09) } 54%{ transform:scale(1) } }

/* phone heart screen — cropped monitor box + heart-rate tag, tidy layout */
.hr-top{ display:flex; align-items:flex-end; justify-content:center; gap:7px; margin-bottom:10px; }
.hr-top .wheart{ align-self:center; }
.hr-top b{ font-size:44px; line-height:.9; letter-spacing:-.04em; color:var(--parsley); font-weight:700; }
.hr-unit{ font-size:11px; color:var(--soft); padding-bottom:6px; }
.hr-monitor{ position:relative; background:rgba(20,68,25,.05); border:1px solid var(--line);
  border-radius:12px; padding:8px; overflow:hidden; }
.hr-monitor .hline{ height:56px !important; margin:0 !important; }
.hr-tag{ position:absolute; top:7px; left:8px; z-index:2; display:inline-flex; align-items:center; gap:4px;
  font-size:8.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--parsley); background:var(--kiwi); padding:3px 8px; border-radius:999px; }
.hr-stats{ display:flex; justify-content:space-between; margin-top:11px; text-align:center; }
.hr-stats span{ flex:1; font-size:8.5px; color:var(--soft); font-weight:700; letter-spacing:.06em; }
.hr-stats b{ display:block; font-size:14px; color:var(--parsley); margin-top:3px; letter-spacing:-.02em; }

/* phone refinement — dynamic island on the hero device */
#heroPhone .phone-scr::before{ content:""; position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:58px; height:17px; border-radius:11px; background:#05100a; z-index:8; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(242,255,242,.08), 0 1px 2px rgba(0,0,0,.5); }

@media (prefers-reduced-motion: reduce){
  .ecg-beam{ animation:none !important; stroke-dasharray:none !important; opacity:.75 !important; }
  .wheart{ animation:none !important; }
}

/* auto-fit the hero phone on small (phone) screens — desktop design unchanged.
   width (and height, via aspect-ratio) derive from --pw; cap at 320 on big
   phones, shrink to 80vw on small ones, and drop the desktop margin so it centres. */
@media (max-width:640px){
  .hero2-stage .phone{ --pw:min(80vw,320px) !important; }
  #heroPhone{ margin-left:0 !important; }
}

/* ============================================================================
   HERO → DASHBOARD transition · heartbeat "pulse seam"
   Kills the hard bg cut by ramping the hero-bottom colour (#0e2a14) down to the
   page colour (#06160c), and rides a live glowing ECG sweep across the join.
   ============================================================================ */
.pulse-seam{
  position:relative; z-index:5; width:100%; overflow:hidden;
  height:clamp(200px,22vw,260px);
  margin-top:clamp(-48px,-4vw,-32px); /* overlap up into the hero (reduced so the pulse sits a bit lower into the transition) */
  background:linear-gradient(180deg,#0e2a14 0%,#0b2010 40%,#081a0d 70%,#06160c 100%);
  /* fade the top edge to transparent so the hero (glow and all) shows through and blends — no hard line */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 27%);
  mask-image:linear-gradient(180deg,transparent 0,#000 27%);
  display:flex; align-items:center;
}
/* soft lime haze centred on the pulse line */
.pulse-seam::before{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:84%; height:150px; border-radius:50%; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(164,190,92,.18), transparent 72%);
  filter:blur(6px);
}
.pulse-seam__svg{ position:relative; z-index:1; width:100%; height:66%; display:block; }
.pulse-seam__base{
  fill:none; stroke:rgba(164,190,92,.30); stroke-width:2.4;
  vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round;
}
.pulse-seam__lead{
  fill:none; stroke:#CDF546; stroke-width:3.4;
  vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(205,245,70,.95)) drop-shadow(0 0 16px rgba(205,245,70,.55));
  stroke-dasharray:230 3400; stroke-dashoffset:3630;
  animation:pulseSweep 2.6s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes pulseSweep{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion:reduce){
  .pulse-seam__lead{ animation:none; stroke-dasharray:none; stroke-dashoffset:0; }
}

/* ============================================================
   ECOSYSTEM bento — watches on the TOP row (above the phones)
   + a little more breathing room between the boxes
   ============================================================ */
.bento{ gap:clamp(20px,2.6vw,32px) !important; }
.bento .bc-watchcell{ order:-1; }   /* recovery + hydration watches render first */

/* ============================================================
   FINAL POLISH — subtle micro-interactions (calm/premium)
   All motion is additive and disabled under reduced-motion.
   ============================================================ */

/* dashboard sidebar links: gentle lean on hover */
.ds-nav a{ transition:background .25s,color .25s,transform .25s var(--ease); }
.ds-nav a:hover{ transform:translateX(3px); }
.ds--collapsed .ds-nav a:hover,
body.ds-body .ds-nav a.active:hover{ transform:none; }
/* collapsed sidebar: hide the brand entirely (name + logo mark) */
.ds--collapsed .brand{ display:none; }

/* list rows (timeline, notifications, recovery actions): soft nudge on hover */
.timeline li,.notif-list li,.ract{ transition:background .2s,border-color .3s,box-shadow .3s,transform .3s var(--ease); }
.timeline li:hover,.notif-list li:hover,.ract:hover{ transform:translateX(3px); }

/* donut breakdown: gentle open when its page becomes active */
.ds-page.on .donut{ animation:knDonutIn .6s var(--ease) both; }
@keyframes knDonutIn{ from{ opacity:.3; transform:scale(.9); } to{ opacity:1; transform:scale(1); } }

@media (prefers-reduced-motion: reduce){
  .ds-nav a:hover,
  .timeline li:hover,.notif-list li:hover,.ract:hover{ transform:none !important; }
  .ds-page.on .donut{ animation:none !important; }
}

/* hero floating insight cards (Water / Steps) are laid out to orbit the phone
   in the 2-column desktop hero. Once the hero collapses to one column (≤940px)
   they have no phone to anchor to and overlap the journey CTA — hide them there
   (they were already hidden ≤520px; this just extends it up through tablet). */
@media (max-width:940px){
  .hero2 .fmetric.f1,.hero2 .fmetric.f2{ display:none !important; }
}

/* ============================================================================
   DASHBOARD APP-SHELL SCROLL FIX
   The standalone dashboard used body-scroll with a sticky 100vh sidebar, so the
   whole shell (sidebar + top bar) scrolled away and the height mismatch between
   the sticky sidebar and the taller content column left dead space at the end.
   Lock the shell to the viewport and make ONLY the main panel scroll.
   Scoped to :not(.ds-embed) so the homepage iframe embed (which reports its
   content height to the parent via postMessage) is left completely untouched.
   ============================================================================ */
html:not(.ds-embed) .ds{ height:100vh; min-height:0; overflow:hidden; }
html:not(.ds-embed) .ds-side{ position:static; height:100vh; }
html:not(.ds-embed) .ds-main{ height:100vh; overflow-y:auto; overflow-x:hidden;
  scrollbar-gutter:stable; -webkit-overflow-scrolling:touch;
  padding-top:0; }   /* the sticky .ds-top owns the top spacing instead */

/* Greeting / search / notification bar: pinned at the very top of the panel.
   No negative TOP margin (that left a gap above the bar that content showed
   through). It sits flush at y=0 and owns its own top padding; content scrolls
   fully behind its opaque background. Negative side margins only, so the bar +
   its border/shadow span the panel edge-to-edge. */
html:not(.ds-embed) .ds-top{
  position:sticky; top:0; z-index:40;
  align-items:center;
  background:var(--bg);            /* OPAQUE — content scrolls behind, never through it */
  border-bottom:1px solid var(--line);
  box-shadow:0 10px 24px -18px rgba(20,68,25,.35);
  margin:0 calc(-1 * clamp(20px,3vw,44px)) clamp(16px,2vw,24px);
  padding:clamp(22px,3vw,40px) clamp(20px,3vw,44px) clamp(16px,1.8vw,22px);
}

/* below the app-shell breakpoint the sidebar becomes a horizontal top bar again,
   so hand scrolling back to the document/body (design unchanged there). */
@media (max-width:980px){
  html:not(.ds-embed) .ds{ height:auto; min-height:100vh; overflow:visible; }
  html:not(.ds-embed) .ds-side{ height:auto; }
  html:not(.ds-embed) .ds-main{ height:auto; overflow:visible;
    padding-top:clamp(22px,3vw,40px); }   /* restore top padding in stacked layout */
  html:not(.ds-embed) .ds-top{ position:static; margin:0 0 clamp(14px,1.8vw,22px);
    padding:0; background:none; border-bottom:0; box-shadow:none; }
}

@media (prefers-reduced-motion: reduce){
  html:not(.ds-embed) .ds-main{ scroll-behavior:auto; }
}

/* ============================================================================
   CONTENT-ENRICHMENT SUPPORT (data representation only — no layout change)
   Styles for the small "why" lines added to AI-Coach recommendations and the
   estimated-benefit pills added to Recovery Actions.
   ============================================================================ */
/* Recovery Actions (landing page): estimated-benefit pill on the title row */
.ract b{ position:relative; }
.ract-gain{ float:right; font-style:normal; font-size:10.5px; font-weight:700; letter-spacing:.02em;
  color:var(--parsley); background:var(--kiwi); padding:2px 8px; border-radius:999px; margin-left:8px; }
.ract:has(.ract-chk:checked) .ract-gain{ background:rgba(20,68,25,.1); color:var(--soft); }

/* ============================================================================
   SCAN-OPTIMISATION PASS — stronger hierarchy, bigger glanceable visuals,
   contextual micro-visuals, cleaner chips, calmer premium polish.
   Additive only: no layout, grid, spacing-system, colour or type-scale changes.
   ============================================================================ */

/* --- KPI stat cards: bigger metric + larger sparkline, lighter caption --- */
.stat b{ font-size:clamp(40px,4.6vw,58px); }
.stat-spark{ width:78px; height:28px; }
.stat-spark polyline{ stroke-width:2.8; }
/* KPI subtext wrapped in a glass box */
.stat-foot small{ color:var(--faint); font-size:11.5px; display:inline-flex; align-items:center;
  padding:4px 11px; border-radius:999px; background:rgba(164,190,92,.18); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
/* boxes 2–4 (non-hero KPI cards): bold dark-green subtext */
.stat:not(.stat--hero) .stat-foot small{ color:var(--parsley); font-weight:700; }
/* KPI card titles one size larger; non-hero titles dark green */
.stat-top{ font-size:15px; }
.stat:not(.stat--hero) .stat-top{ color:var(--parsley); }
/* readiness hero description styled like the "DAILY READINESS" label */
.rh-text p{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--mint-cream); font-weight:600; line-height:1.5; }
.rh-text h2{ margin:0 0 11px; }
/* hero score "92%" in light green */
.readiness-hero .ring-c b{ color:var(--kiwi); }

/* hero ring "92%" — smaller % unit */
.readiness-hero .ring-c b i{ font-size:.5em; font-weight:600; font-style:normal; }
/* hero right-side: horizontal body-battery (same style as the card battery) */
.rh-mini{ display:flex; align-items:center; justify-content:flex-end; }
.rh-hbatt{ position:relative; width:134px; height:66px; border:3px solid rgba(242,255,242,.6);
  border-radius:12px; padding:4px; }
.rh-hbatt::before{ content:""; position:absolute; right:-9px; top:50%; transform:translateY(-50%);
  width:6px; height:24px; border-radius:0 4px 4px 0; background:rgba(242,255,242,.6); }
.rh-hfill{ position:absolute; left:4px; top:4px; bottom:4px; width:calc(92% - 8px); border-radius:8px;
  background:linear-gradient(90deg, var(--kiwi), #7cbf38); }
/* % (Recovery) and k (Activity) units → dark green like the number */
.stat:not(.stat--hero) b i{ color:var(--parsley); }
/* greeting date in a glass box */
.ds-greet small{ display:inline-flex; align-items:center; margin-bottom:2px; padding:5px 13px; border-radius:999px;
  background:rgba(164,190,92,.16); border:1px solid var(--line); color:var(--parsley); font-weight:600;
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); }
/* headings + top-right badges one size larger */
.w-head h3{ font-size:17px; }
.w-trend{ font-size:13.5px; }
.stat-chg{ font-size:13px; }

/* --- Hydration card: filling-glass micro-visual --- */
.glass{ position:relative; width:68px; height:100px; flex:none; align-self:center;
  border:2.5px solid var(--line-2); border-top-color:transparent; border-radius:5px 5px 15px 15px;
  background:rgba(20,68,25,.03); overflow:hidden; }
.glass-water{ position:absolute; left:0; right:0; bottom:0; height:var(--fill,80%);
  background:linear-gradient(180deg,var(--kiwi),#7cbf38); border-radius:0 0 12px 12px; }
.glass-water::after{ content:""; position:absolute; top:0; left:0; right:0; height:5px;
  background:rgba(242,255,242,.5); }
.ds-page.on .glass-water{ animation:knGlassFill 1.1s var(--ease) both; }
@keyframes knGlassFill{ from{ height:0; } to{ height:var(--fill,80%); } }

/* --- Recovery card: rounder, airier mini bars --- */
.hcard .ds-bars.mini{ gap:7px; }
.hcard .ds-bars.mini i{ border-radius:6px; }

/* --- Activity: thicker donut + larger centre number, bigger chart points --- */
.donut{ width:140px; height:140px; }
.donut::before{ inset:23px; }
.donut b{ font-size:30px; }
.line-chart .area-pt{ r:6; stroke-width:3.4; }
.line-chart .area-pt:hover{ r:8; }

/* --- Movement heatmap: rounder cells, calmer hover, aligned labels --- */
.heatmap{ gap:5px; }
.heatmap span{ border-radius:7px; transition:transform .28s var(--ease), box-shadow .28s var(--ease); }
.heatmap span:hover{ transform:scale(1.1); box-shadow:0 4px 12px -4px rgba(20,68,25,.4); }
.heat-foot{ margin-top:2px; }
.heat-foot>span{ font-weight:600; color:var(--soft); }

/* --- Insight cards: bolder title, quieter subtitle --- */
.ins-h b{ font-size:16.5px; letter-spacing:-.02em; }
.ins-h small{ font-size:11.5px; color:var(--faint); }

/* --- Weekly Summary tiles: icon + value + label + caption --- */
.sm{ gap:0; }
.sm-ic{ width:30px; height:30px; border-radius:9px; background:var(--mint-cream); border:1px solid var(--line);
  color:var(--parsley); display:grid; place-items:center; margin-bottom:9px; }
.sm-ic svg{ width:16px; height:16px; }
.sm b{ font-size:19px; margin:0 0 2px; }
.sm small{ display:block; font-size:11px; color:var(--soft); font-weight:600; }
.sm em{ font-size:11px; color:var(--faint); }

/* ============================================================================
   INSIGHTS PAGE — content refinement, tighter hierarchy, aligned rows
   ============================================================================ */
/* AI insight cards: title · metric · label · metric-specific visual */
.insight{ display:flex; flex-direction:column; }
.ins-h{ margin-bottom:12px; }
.ins-val{ display:block; font-size:27px; font-weight:700; letter-spacing:-.03em; color:var(--parsley); line-height:1; }
.ins-sub{ margin-left:auto; display:inline-flex; align-items:center; white-space:nowrap; padding:5px 12px;
  border-radius:999px; font-size:12.5px; font-weight:700; color:var(--parsley);
  background:rgba(164,190,92,.16); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.ins-viz{ margin-top:auto; padding-top:16px; }
.iv-line{ width:100%; height:36px; display:block; }
.iv-ln{ fill:none; stroke:var(--kiwi); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.iv-area{ fill:rgba(164,190,92,.16); stroke:none; }
.iv-track{ position:relative; height:12px; border-radius:999px; background:rgba(20,68,25,.08); }
.iv-track i{ position:absolute; top:0; bottom:0; border-radius:999px; background:linear-gradient(90deg,var(--kiwi),#7cbf38); }
.iv-bars{ display:flex; align-items:flex-end; gap:9px; height:36px; }
.iv-bars i{ flex:1; border-radius:5px 5px 3px 3px; background:var(--kiwi); }
.iv-bars i:last-child{ background:rgba(164,190,92,.45); }

/* Weekly Summary: info column on the left, value in a box on the right */
.sm{ display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left; padding:15px 16px; }
.sm-info{ display:flex; flex-direction:column; align-items:flex-start; gap:9px; min-width:0; }
.sm-ic{ margin-bottom:0; }
.sm small{ margin:0; font-size:13.5px; font-weight:700; color:var(--parsley); }
.sm em{ display:inline-flex; align-items:center; padding:5px 12px; border-radius:999px;
  font-size:12.5px; font-weight:700; letter-spacing:-.01em; color:var(--kiwi);
  background:rgba(20,68,25,.6); border:1px solid rgba(164,190,92,.3);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.sm-val{ flex:none; font-size:27px; font-weight:700; letter-spacing:-.03em; color:var(--parsley);
  padding:12px 15px; border-radius:15px; background:rgba(164,190,92,.16); border:1px solid var(--line); }

/* Personal Bests: perfectly-aligned rows, faint dividers */
.pr-list li{ min-height:58px; padding:0; gap:15px; border-bottom:1px solid rgba(20,68,25,.07); }
.pr-list li>div{ display:flex; flex-direction:column; justify-content:center; }
.pr-list small{ margin-bottom:2px; }
.pr-list b{ font-size:17px; }

/* --- Premium glass polish (subtle) on the calm surfaces --- */
.hcard[data-page="hydration"], .summary-w, .ract{
  background-image:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 62%); }
.hcard[data-page="hydration"]{ box-shadow:0 2px 4px rgba(20,68,25,.03), 0 22px 48px -30px rgba(20,68,25,.22); }
.ract{ transition:border-color .3s, box-shadow .3s, transform .3s var(--ease), background .3s; }
.ract:hover{ box-shadow:0 10px 26px -16px rgba(20,68,25,.4); }

/* --- Health cards: title as a clean top-left label, visuals as the hero --- */
.m-head{ align-items:center; gap:10px; margin-bottom:16px; }
.m-head .w-ic{ width:34px; height:34px; border-radius:11px; flex:none;
  background:var(--mint-cream); border:1px solid var(--line); color:var(--parsley);
  display:grid; place-items:center; }
.m-head .w-ic svg{ width:17px; height:17px; }
.m-head h3{ font-size:16.5px; font-weight:700; letter-spacing:-.02em; }
/* consistent alignment: header + number pinned top, visual + footer pinned bottom */
.hcard{ display:flex; flex-direction:column; }
.hcard .sleep-stages, .hcard .ds-bars.mini, .hcard .hline,
.hcard .hyd-body, .hcard .mb-grid{ margin-top:auto; }
/* enlarge every card's micro-visual so it reads as the main content */
.hcard .sleep-stages{ height:60px; }
.hcard .ds-bars.mini{ height:86px; }

/* red down-trend badge (Hydration) — bigger */
.w-trend.t-red{ background:rgba(214,60,45,.14); color:#cc3a2c; font-size:14.5px; }

/* health-card units (/4L · % · /100): bold, dark green, half the number size */
.hcard .m-big b i{ font-size:.55em; font-weight:700; color:var(--parsley); }
/* status line next to the number (e.g. "Recovered"): bold dark green, +1 size */
.hcard .m-big small{ color:var(--parsley); font-weight:700; font-size:14px; }
/* Recovery "Weekly Avg" in a glass box, +1 size */
.rec-avg{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px; font-size:13px;
  font-weight:700; color:var(--parsley); background:rgba(164,190,92,.18); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.rec-avg .rd{ width:7px; height:7px; border-radius:50%; background:var(--kiwi); flex:none;
  box-shadow:0 0 0 3px rgba(164,190,92,.25); }
/* heart-rate graph tile: title + label above the line */
.hr-graph-tile{ align-items:stretch; justify-content:center; gap:12px; }
.hrg-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.hrg-head b{ font-size:13px; font-weight:700; letter-spacing:-.01em; color:var(--mint-cream); }
.hrg-head span{ font-size:12px; font-weight:600; color:var(--kiwi); }
/* hero battery nudged in from the right edge */
.rh-hbatt{ margin-right:clamp(6px,2vw,26px); }

/* ===== Activity page: Movement Trend graph ===== */
.mt-head{ display:flex; flex-direction:column; }
.mt-head small{ font-size:12px; color:var(--soft); font-weight:500; margin-top:2px; }
.mtrend{ display:flex; flex-direction:column; }
.mtrend .line-chart{ flex:1 1 auto; min-height:230px; height:auto; }
.mtrend .grid-base{ stroke:var(--parsley); opacity:.1; }
.mtrend .avg-line{ stroke:var(--parsley); stroke-width:1.5; stroke-dasharray:4 6; opacity:.4; vector-effect:non-scaling-stroke; }
.mtrend .area-pt{ r:3; }
.mtrend .area-pt.hollow{ fill:#fff; stroke:var(--kiwi); stroke-width:2.5; }
.mtrend .area-pt.today{ r:5; fill:var(--parsley); stroke:#fff; stroke-width:2.5; }
.mtrend .ln{ stroke-width:3; }

/* Activity KPI cards: plain (un-boxed) subtext */
.ds-page[data-page="activity"] .stat-foot small{ background:none; border:0; padding:0;
  -webkit-backdrop-filter:none; backdrop-filter:none; color:var(--soft); font-weight:600; }

/* Weekly Activity donut: bigger light-green centre number + glass-row legend */
.amix .donut b{ font-size:40px; color:var(--kiwi); letter-spacing:-.03em; }
.amix .donut-leg{ display:flex; flex-direction:column; gap:8px; }
.amix .donut-leg li{ display:flex; align-items:center; gap:11px; padding:10px 14px; border-radius:13px;
  background:rgba(164,190,92,.12); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-size:14.5px; font-weight:600; color:var(--parsley); }
.amix .donut-leg li i{ width:11px; height:11px; border-radius:50%; flex:none; }
.amix .donut-leg li b{ margin-left:auto; font-size:13.5px; font-weight:700; color:var(--soft); }

/* --- Hydration card: dark-green surface, 3D glass filled 80% with light-green fluid --- */
.hyd-card{ background:var(--parsley); border-color:transparent; }
.hyd-card:hover{ border-color:transparent; }
.hyd-card .m-head h3{ color:var(--mint-cream); }
.hyd-card .m-head .w-ic{ background:rgba(242,255,242,.14); border-color:transparent; color:var(--lemon); }
.hyd-card .w-trend.t-red{ background:var(--parsley); border-color:transparent; color:#ff8f84; }
/* recovery card (4th box) trend: same dark-green box, light-green text */
.hcard[data-page="recovery"] .w-trend{ background:var(--parsley); color:var(--kiwi); }
.hyd-card .m-big b i.hyd-unit{ color:var(--mint-cream); }
/* number + note (left column) sit in one row beside the glass (right) */
.hyd-body{ display:flex; align-items:center; justify-content:center; gap:clamp(24px,3.5vw,52px); margin-bottom:auto; }
.hyd-info{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; flex:none; }
.hyd-note{ display:inline-flex; flex:none; white-space:nowrap; padding:6px 13px; border-radius:999px;
  background:rgba(164,190,92,.2); border:1px solid rgba(242,255,242,.22); font-size:12.5px; font-weight:700; color:var(--mint-cream); }
.glass-wrap{ display:grid; place-items:center; flex:none; }
.hyd-card .m-big{ margin-bottom:0; }
.hyd-card .m-big b{ font-size:clamp(50px,5.8vw,66px); white-space:nowrap; color:var(--kiwi); }
.hcard[data-page="sleep"] .m-big b{ font-size:clamp(48px,5.3vw,64px); color:var(--kiwi); }
.hyd-card .glass{ position:relative; width:112px; height:158px; border:3px solid rgba(242,255,242,.22);
  border-top-color:transparent; border-radius:8px 8px 22px 22px;
  background:rgba(255,255,255,.05); overflow:hidden; }
.hyd-card .glass::after{ display:none; }
/* solid water fill — no gradient, no sheen, flat like the other boxes */
.hyd-card .glass-water{ background:var(--kiwi); }
.hyd-card .glass-water::after{ display:none; }

/* --- My Body card: heart-rate tile + body-battery tile --- */
/* My Body card: white surface like the other cards */
.mybody{ background:var(--card); border-color:var(--line); }
.mybody .m-head h3{ color:var(--text); }
.mybody .m-head .w-ic{ background:var(--mint-cream); border-color:var(--line); color:var(--parsley); }
.mybody .mb-batt-tile{ background:transparent; border-color:transparent; }
.mybody .mb-batt-txt i{ color:var(--soft); }
.mybody .battery{ border-color:var(--parsley); }
.mybody .battery::before{ background:var(--parsley); }
.mybody .mb-grid{ display:grid; grid-template-columns:1fr 1fr; gap:13px; align-items:stretch; margin-bottom:auto; }
/* numbers + graph line were light-on-dark → dark-green on white */
.mybody .mb-hr b{ color:var(--kiwi); }
.mybody .mb-hr i{ color:var(--soft); }
.mybody .mb-batt-txt b{ color:var(--parsley); }
.mybody .hrg-head b{ color:var(--parsley); }
.mybody .hrg-head span{ color:var(--soft); }
.mybody .hrg-line{ stroke:var(--parsley); }
/* moving pulse beam (light green) travelling over the dark-green trace */
.mybody .mb-pulse .mb-beam{ stroke:var(--kiwi); }
/* moving beam travelling along the heart-rate graph */
.mybody .hrg-beam{ fill:none; stroke:var(--kiwi); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke; stroke-dasharray:16 100; animation:hrgBeam 2.4s linear infinite; }
@keyframes hrgBeam{ from{ stroke-dashoffset:116; } to{ stroke-dashoffset:0; } }
@media(prefers-reduced-motion:reduce){ .mybody .hrg-beam{ animation:none; opacity:0; } }
/* heart-monitor + heart-rate-graph tiles: glassy green-tint boxes */
.mb-tile{ background:linear-gradient(135deg, rgba(164,190,92,.16), rgba(164,190,92,.04));
  border:1px solid rgba(164,190,92,.28); border-radius:18px; padding:15px 18px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:flex; flex-direction:column; gap:11px; align-items:center; justify-content:center; text-align:center;
  min-height:132px; }
/* right tile: daily heart-rate line graph */
.hr-graph-tile{ padding:16px 18px; }
.hr-graph{ width:100%; height:100%; min-height:70px; display:block; }
.hrg-line{ fill:none; stroke:var(--kiwi); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.hrg-fill{ fill:rgba(164,190,92,.16); stroke:none; }
.mb-hr{ display:flex; align-items:baseline; justify-content:center; gap:6px; }
.mb-hr b{ font-size:34px; font-weight:700; letter-spacing:-.03em; color:var(--kiwi); line-height:1; }
.mb-hr i{ font-style:normal; font-size:14px; font-weight:700; color:var(--mint-cream); }
.mb-pulse{ width:100%; height:20px; }
.mb-pulse path{ fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.mb-pulse .mb-base{ stroke:var(--parsley); }
.mb-pulse .mb-beam{ stroke:var(--kiwi); stroke-dasharray:14 100; animation:mbBeam 2.2s linear infinite; }
@keyframes mbBeam{ from{ stroke-dashoffset:114; } to{ stroke-dashoffset:0; } }
@media(prefers-reduced-motion:reduce){ .mb-pulse .mb-beam{ animation:none; stroke-dasharray:none; } }
.mb-batt-tile{ flex-direction:row; align-items:center; justify-content:center; gap:16px; }
.battery{ position:relative; width:74px; height:128px; flex:none; border:3px solid var(--parsley);
  border-radius:10px; padding:3px; }
.battery::before{ content:""; position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  width:28px; height:7px; border-radius:3px 3px 0 0; background:var(--parsley); }
.batt-fill{ position:absolute; left:3px; right:3px; bottom:3px; height:calc(92% - 6px); border-radius:5px;
  background:linear-gradient(180deg, var(--kiwi), #7cbf38); }
.mb-batt-txt b{ display:block; font-size:38px; font-weight:700; letter-spacing:-.02em; color:var(--kiwi); line-height:1; }
.mb-batt-txt i{ font-style:normal; font-size:13.5px; font-weight:700; color:var(--parsley); }

/* --- Readiness hero stat: white caption, % on the score --- */
.stat--hero .stat-foot small{ color:var(--mint-cream); font-weight:600;
  background:rgba(242,255,242,.13); border-color:rgba(242,255,242,.22); }

/* ============================================================================
   PERFORMANCE OVERVIEW — one unified analytics surface (summary + hero graph
   + insight strip). Keeps the existing card / palette / glass language.
   ============================================================================ */

/* Compact legend in the header — the metric values already live in the KPI
   cards above, so this only names/colours the four curves (and highlights on hover) */
.pf-head{ flex-wrap:wrap; gap:10px 16px; }
.pf-legend{ display:flex; flex-wrap:wrap; gap:4px 6px; }
.pf-leg{ display:inline-flex; align-items:center; gap:6px; background:transparent; border:0;
  font-family:inherit; font-size:12px; font-weight:600; color:var(--soft); cursor:pointer;
  padding:4px 7px; border-radius:9px; transition:color .2s, background .2s; }
.pf-leg:hover{ color:var(--parsley); background:rgba(20,68,25,.05); }
.pf-dot{ width:9px; height:9px; border-radius:50%; background:var(--mc); flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--mc) 22%, transparent); }

/* Hero graph — JS-drawn smooth curves; sized to sit beside Today's Journey */
.pf-chart{ position:relative; width:100%; height:clamp(230px,20vw,300px); margin-top:clamp(8px,1.4vw,16px); }
.pf-chart svg{ width:100%; height:100%; overflow:visible; display:block; }
.pf-guide{ stroke:var(--line); stroke-width:1; vector-effect:non-scaling-stroke; }
.pf-chart .ln{ fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke; filter:drop-shadow(0 4px 7px rgba(20,68,25,.16));
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:opacity .3s var(--ease), stroke-width .3s var(--ease); }
.pf-chart .ln-a{ stroke:#144419; } .pf-chart .ln-b{ stroke:#A4BE5C; }
.pf-chart .ln-c{ stroke:#9bd13f; } .pf-chart .ln-d{ stroke:#6D460D; }
.in .pf-chart .ln{ animation:pfDraw 1.7s var(--ease) forwards; }
.in .pf-chart .ln-b{ animation-delay:.1s; } .in .pf-chart .ln-c{ animation-delay:.2s; }
.in .pf-chart .ln-d{ animation-delay:.3s; }
@keyframes pfDraw{ to{ stroke-dashoffset:0; } }

/* hover tracking line, per-line dots, shared tooltip */
.pf-track{ position:absolute; top:6px; bottom:6px; width:1.5px; transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(20,68,25,.32), rgba(20,68,25,0));
  pointer-events:none; transition:left .09s linear; }
.pf-dot-m{ position:absolute; width:11px; height:11px; border-radius:50%; background:var(--dc);
  border:2.5px solid var(--card); transform:translate(-50%,-50%); pointer-events:none;
  box-shadow:0 2px 7px rgba(20,68,25,.28); transition:left .09s linear, top .09s linear; }
.pf-dot-m[data-line=a]{ --dc:#144419; } .pf-dot-m[data-line=b]{ --dc:#A4BE5C; }
.pf-dot-m[data-line=c]{ --dc:#9bd13f; } .pf-dot-m[data-line=d]{ --dc:#6D460D; }
.pf-tip{ position:absolute; z-index:6; pointer-events:none; min-width:184px;
  background:var(--card); border:1px solid var(--line); border-radius:15px; box-shadow:var(--shadow-lg);
  padding:11px 13px; transform:translate(-50%,calc(-100% - 16px));
  transition:left .09s linear, top .09s linear; }
.pf-tip .tt-day{ font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); margin-bottom:8px; }
.pf-tip .tt-row{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--soft);
  font-weight:600; margin-top:6px; }
.pf-tip .tt-row i{ width:8px; height:8px; border-radius:50%; background:var(--rc); flex:none; }
.pf-tip .tt-row b{ margin-left:auto; color:var(--parsley); font-weight:700; }
.perf .chart-x{ margin-top:10px; }

/* Bottom insight strip — one AI sentence */
.pf-insight{ display:flex; gap:13px; align-items:center; margin-top:clamp(14px,1.8vw,22px);
  padding:clamp(13px,1.5vw,17px) clamp(15px,1.7vw,19px); border-radius:18px; border:1px solid var(--line);
  background:linear-gradient(120deg, rgba(164,190,92,.16), rgba(242,255,242,.35));
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.pf-spark{ width:36px; height:36px; border-radius:12px; flex:none; display:grid; place-items:center;
  background:var(--parsley); color:var(--lemon); box-shadow:0 6px 16px -8px rgba(20,68,25,.5); }
.pf-spark svg{ width:19px; height:19px; }
.pf-insight b{ display:block; font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--soft); margin-bottom:4px; }
.pf-insight p{ margin:0; font-size:14.5px; line-height:1.5; letter-spacing:-.01em; color:var(--parsley); }

/* ============================================================================
   TODAY'S JOURNEY — premium vertical timeline, thin connector, airy spacing
   ============================================================================ */
.journey{ list-style:none; position:relative; margin:0; padding:0; }
.journey::before{ content:""; position:absolute; left:20px; top:22px; bottom:24px; width:2px;
  background:linear-gradient(180deg, var(--line), rgba(20,68,25,.05)); }
.journey li{ position:relative; display:flex; align-items:flex-start; gap:15px; border:0;
  padding:0 0 clamp(18px,2.1vw,28px); }
.journey li:last-child{ padding-bottom:0; }
.journey .tl-ic{ position:relative; z-index:1; overflow:hidden; width:40px; height:40px; border-radius:50%;
  background:var(--card); border:1px solid var(--line); color:var(--parsley);
  display:grid; place-items:center; flex:none; transition:transform .28s var(--ease), box-shadow .28s var(--ease); }
/* kiwi progress fill from the bottom up to each item's completion (--fill) */
.journey .tl-ic::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:0;
  background:linear-gradient(180deg, var(--kiwi), #7cbf38); z-index:0; }
.in .journey .tl-ic::before{ height:var(--fill,0%); transition:height 1s var(--ease); }
.journey .tl-ic svg{ position:relative; z-index:1; width:18px; height:18px; }
.journey li:hover .tl-ic{ transform:scale(1.1); box-shadow:0 6px 16px -8px rgba(20,68,25,.45); }
.journey li>div{ flex:1; min-width:0; padding-top:2px; }
.journey li b{ display:block; font-size:15px; font-weight:600; letter-spacing:-.01em; }
.journey li small{ font-size:13.5px; color:var(--soft); }
/* right-side metric box (score / % / hours / count) replaces the timestamp */
.journey .j-metric{ flex:none; align-self:center; display:inline-flex; align-items:center;
  justify-content:center; min-width:78px; min-height:44px; font-size:15.5px; font-weight:700;
  color:var(--parsley); background:var(--mint-cream); border:1px solid var(--line); border-radius:14px;
  padding:10px 16px; white-space:nowrap; letter-spacing:-.02em; }
.journey li.up-next .tl-ic{ background:var(--lemon); border-color:transparent; color:var(--parsley); }
.journey li.up-next .j-metric{ background:var(--lemon); border-color:transparent; color:var(--parsley); }

/* ============================================================================
   NEXT BEST ACTIONS — AI recommendation cards (icon · title · reason · benefit)
   ============================================================================ */
/* Wide action bar of 4 evenly-aligned cards:
   [ icon + tag ] row · title · benefit chip pinned to the bottom */
.nba-list{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.4vw,18px); }
@media(max-width:1180px){ .nba-list{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:620px){ .nba-list{ grid-template-columns:1fr; } }
.nba{ position:relative; display:flex; flex-direction:column; gap:13px; padding:17px 18px;
  min-height:132px; border:1px solid var(--line); border-radius:18px; background:var(--card-2);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.nba:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--kiwi); }
.nba-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:40px; }
.nba-ic{ width:40px; height:40px; border-radius:12px; background:var(--mint-cream);
  border:1px solid var(--line); color:var(--parsley); display:grid; place-items:center; flex:none; }
.nba-ic svg{ width:20px; height:20px; }
.nba-tag{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px; background:var(--lemon); color:var(--parsley); }
.nba-title{ font-size:16px; font-weight:600; letter-spacing:-.01em; line-height:1.3; }
.nba-benefit{ margin-top:auto; align-self:flex-start; width:fit-content; white-space:nowrap;
  display:inline-flex; align-items:center; font-size:12.5px; font-weight:700; color:var(--parsley);
  background:rgba(164,190,92,.22); border:1px solid rgba(164,190,92,.5);
  padding:5px 11px; border-radius:999px; }
/* completed → plain text, no box, a touch larger */
.nba-benefit.plain{ background:none; border:0; padding:0; margin-bottom:6px; font-size:13.5px; color:var(--soft); }
/* 1 — featured recommendation: dark green with white content */
.nba.top{ background:var(--parsley); border-color:transparent; }
.nba.top .nba-title{ color:var(--mint-cream); }
.nba.top .nba-ic{ background:rgba(242,255,242,.14); border-color:transparent; color:var(--lemon); }
.nba.top .nba-tag{ background:var(--lemon); color:var(--parsley); }
.nba.top .nba-benefit{ background:rgba(242,255,242,.14); border-color:rgba(242,255,242,.22); color:var(--mint-cream); }
.nba.top:hover{ border-color:transparent; }

/* 4 — completed */
.nba.done{ opacity:.72; }
.nba.done .nba-ic{ background:var(--parsley); color:var(--lemon); border-color:transparent; }
.nba.done .nba-title{ text-decoration:line-through; color:var(--soft); }
.nba-check{ width:24px; height:24px; border-radius:50%; background:var(--parsley);
  color:var(--lemon); display:grid; place-items:center; flex:none; }
.nba-check svg{ width:14px; height:14px; }

@media(prefers-reduced-motion:reduce){
  .pf-chart .ln{ stroke-dashoffset:0 !important; animation:none !important; }
}

/* NOTE: the app-shell viewport-lock + sticky top bar live in ONE place only —
   the "APP-SHELL SCROLL MODEL" block above (~line 160). Do not re-add them here. */

/* --- A little more air between the cards --- */
.ds-grid{ gap:clamp(18px,2vw,28px); }
.ds-stats, .ds-stats.four{ gap:clamp(16px,1.8vw,24px); }
.metric-grid{ gap:clamp(18px,2vw,28px); }
.ds-row2{ margin-top:clamp(18px,2.2vw,28px); }

/* --- Custom cursor: kennect.js builds .kcursor-dot/.kcursor-ring and drives them
   with transform:translate3d(clientX,clientY,…) — viewport coords that ONLY work
   with position:fixed. The dashboard never loaded these styles (they live in
   home.css), so the divs fell back to static flow and the transform inflated the
   page height (the phantom scroll into empty space). Porting the styles here. --- */
.kcursor-dot,.kcursor-ring{ position:fixed; left:0; top:0; border-radius:50%;
  pointer-events:none; z-index:9999; opacity:0; will-change:transform;
  transition:opacity .35s var(--ease); }
.kcursor-dot{ width:7px; height:7px; background:var(--kiwi); box-shadow:0 0 10px rgba(164,190,92,.9); }
.kcursor-ring{ width:34px; height:34px; border:1.5px solid rgba(164,190,92,.45);
  background:radial-gradient(circle,rgba(164,190,92,.1),transparent 68%);
  transition:width .35s var(--ease),height .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease),opacity .35s var(--ease); }
.kcursor-ring.k-hover{ width:58px; height:58px; border-color:rgba(205,245,70,.7);
  background:radial-gradient(circle,rgba(164,190,92,.18),transparent 70%); }
.kcursor-ring.k-down{ width:26px; height:26px; border-color:rgba(205,245,70,.85); }
html.has-kcursor,html.has-kcursor *{ cursor:none !important; }
@media (hover:none),(pointer:coarse){ .kcursor-dot,.kcursor-ring{ display:none !important; } }

/* ============================================================================
   MOTION & INTERACTION — hover feedback, ambient motion, live visuals
   ============================================================================ */
/* cursor affordance + unified card hover lift */
.insight, .sm, .stat{ cursor:pointer; }
.insight, .sm{ transition:transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease); }
.insight:hover, .sm:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--kiwi); }

/* icons scale gently when their card is hovered */
.ins-ic, .sm-ic, .w-ic, .nba-ic, .stat-top svg, .tl-ic{ transition:transform .3s var(--ease); }
.insight:hover .ins-ic, .sm:hover .sm-ic, .nba:hover .nba-ic{ transform:scale(1.1) rotate(-3deg); }

/* KPI number lifts on hover */
.stat b{ display:inline-block; transition:transform .3s var(--ease); transform-origin:left bottom; }
.stat:hover b{ transform:scale(1.05); }

/* value chips / boxes react to hover */
.sm-val, .ins-sub, .rec-avg, .j-metric, .nba-benefit, .stat-chg, .w-trend{ transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); }
.sm:hover .sm-val{ transform:translateY(-2px); box-shadow:0 8px 16px -10px rgba(20,68,25,.4); }
.insight:hover .ins-sub{ background:rgba(164,190,92,.3); }

/* ambient float on the activity donut ring */
@media (prefers-reduced-motion:no-preference){
  .amix .donut{ animation:knFloat 6s ease-in-out infinite; }
}
@keyframes knFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }

/* shimmer sweep across progress fills */
@media (prefers-reduced-motion:no-preference){
  .iv-bars i{ position:relative; }
  .iv-bars i, .iv-track i, .rh-hfill{ overflow:hidden; }
  .iv-track i::after, .iv-bars i::after, .rh-hfill::after{ content:""; position:absolute; inset:0;
    background:linear-gradient(100deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);
    transform:translateX(-120%); animation:knShimmer 3.4s var(--ease) infinite; }
  .iv-bars i:nth-child(2)::after{ animation-delay:.4s; }
  .iv-bars i:nth-child(3)::after{ animation-delay:.8s; }
  .iv-bars i:nth-child(4)::after{ animation-delay:1.2s; }
}
@keyframes knShimmer{ 0%{ transform:translateX(-120%); } 55%,100%{ transform:translateX(120%); } }

/* interactive cards that open a detail popover show a soft affordance ring on hover */
[data-pop]{ position:relative; }
[data-pop]:focus-visible{ outline:2px solid var(--kiwi); outline-offset:2px; }

/* detail popover */
.ins-pop{ position:fixed; z-index:120; max-width:280px; padding:14px 16px; border-radius:16px;
  background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow-lg);
  opacity:0; transform:translateY(6px) scale(.98); pointer-events:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease); }
.ins-pop.on{ opacity:1; transform:none; pointer-events:auto; }
.ins-pop .ip-h{ display:flex; align-items:center; gap:9px; margin-bottom:8px; }
.ins-pop .ip-h span{ width:30px; height:30px; border-radius:9px; background:var(--kiwi); color:var(--parsley);
  display:grid; place-items:center; flex:none; }
.ins-pop .ip-h span svg{ width:16px; height:16px; }
.ins-pop .ip-h b{ font-size:14px; font-weight:700; }
.ins-pop p{ margin:0; font-size:13px; line-height:1.5; color:var(--soft); }

/* ============================================================
   ECOSYSTEM — roomier bento: wider rail, bigger cells, more air
   around every device; the watch meta box sits further from the
   watch. Same content, same design language — just breathing room.
   (tech boxes widen with the bento so the sections stay on one rail)
   ============================================================ */
.bento,.tech-box{ max-width:1060px !important; }
.bento{ gap:clamp(28px,3.6vw,46px) !important; }
.bento-cell{ padding:clamp(34px,4.2vw,58px) clamp(24px,3vw,42px) !important; border-radius:30px !important; }
/* watch cells: clear distance between the watch and its meta box below */
.bc-watchcell .eco-watch{ margin:36px 0 38px !important; }
.eco-extra{ padding:11px 18px 11px 13px !important; gap:14px !important; }
@media (max-width:600px){
  .bento-cell{ padding:30px 20px !important; }
  .bc-watchcell .eco-watch{ margin:28px 0 30px !important; }
}

/* ============================================================
   FOOTER FINALE — the ending moves: brand row ripples in,
   divider draws across, giant wordmark blur-rises.
   Reuses the site's .rv / .rv-title / data-stagger system.
   ============================================================ */
/* divider: draw from the left instead of fading up */
.foot-line.rv{ opacity:1; transform:scaleX(0); transform-origin:left;
  transition:transform 1.2s var(--ease) .12s; }
.foot-line.rv.in{ transform:scaleX(1); }
/* giant wordmark: deeper rise + slower settle than a standard title */
.foot-mark.rv-title{ transform:translateY(40px);
  transition:opacity 1.25s var(--ease) .08s, transform 1.25s var(--ease) .08s, filter 1.25s var(--ease) .08s; }
.foot-mark.rv-title.in{ transform:none; }
@media (prefers-reduced-motion:reduce){
  .foot-line.rv{ transform:none !important; }
}

/* ============================================================================
   HEALTH PAGE — realignment pass (same content, same language, cleaner)
   ============================================================================ */
/* FIX: bar charts inside SPA pages never received the .in reveal (the observer
   only watches .rv/.st/.panels), so .ds-bars stayed at scaleY(.12) — collapsed
   slivers. Key the reveal to the page's own .on state instead, staggered like
   the original, instant under reduced motion. */
.ds-page.on .ds-bars i{ transform:scaleY(1); }
.ds-page.on .ds-bars i:nth-child(2){ transition-delay:.08s; }
.ds-page.on .ds-bars i:nth-child(3){ transition-delay:.16s; }
.ds-page.on .ds-bars i:nth-child(4){ transition-delay:.24s; }
.ds-page.on .ds-bars i:nth-child(5){ transition-delay:.32s; }
.ds-page.on .ds-bars i:nth-child(6){ transition-delay:.4s; }
.ds-page.on .ds-bars i:nth-child(7){ transition-delay:.48s; }
@media (prefers-reduced-motion:reduce){ .ds-bars i{ transform:scaleY(1) !important; transition:none !important; } }

/* sleep stages: slimmer segmented band — less block, same data */
.hcard .sleep-stages{ height:40px; gap:5px; }
.hcard .sleep-stages i{ border-radius:9px; }

/* recovery number matches its sibling cards (sleep/hydration): big, kiwi */
.hcard[data-page="recovery"] .m-big b{ font-size:clamp(48px,5.3vw,64px); color:var(--kiwi); }
.hcard[data-page="recovery"] .m-big{ align-items:baseline; }

/* hydration: content block truly centred in the card so all four cards share
   one vertical rhythm (number top-left cards / centred visual cards) */
.hyd-card .hyd-body{ margin:auto 0; }

/* ============================================================================
   TOP BAR RECROP — tighter bar on every page: date pill above the greeting is
   gone; a dark-green date chip sits left of a smaller search box.
   ============================================================================ */
html:not(.ds-embed) .ds-top{ padding-top:clamp(16px,2vw,26px); padding-bottom:clamp(12px,1.4vw,18px); }
.ds-top{ align-items:center; }
.ds-greet h1{ margin-top:0; }
.ds-search{ min-width:172px; padding-block:10px; }
/* date chip: same height as the search box, dark green, light green text */
.ds-date{ display:inline-flex; align-items:center; align-self:stretch; padding:0 18px;
  border-radius:14px; background:var(--parsley); color:var(--kiwi);
  font-size:13.5px; font-weight:700; letter-spacing:.04em; font-variant-numeric:tabular-nums; }
/* the old greeting-date glass pill styles are dead (element removed) */
.ds-greet small{ display:none; }

/* footer wordmark: same ghost opening as the portfolio — tracking settles as it rises */
.foot-mark.rv-title{ letter-spacing:.1em; }
.foot-mark.rv-title.in{ letter-spacing:-.05em; }
.foot-mark.rv-title{ transition:opacity 1.25s var(--ease) .08s, transform 1.25s var(--ease) .08s,
  filter 1.25s var(--ease) .08s, letter-spacing 1.6s var(--ease) .08s; }
@media (prefers-reduced-motion:reduce){ .foot-mark.rv-title{ letter-spacing:-.05em !important; } }

/* ============================================================================
   PHONE HARDENING + SIMPLIFY  ·  consolidated, loads last (≤600px)
   Fixes real horizontal overflow at phone widths (360 / 390 / 430) without
   touching the desktop layout. Everything here is gated to ≤600px.
   ============================================================================ */
@media (max-width:600px){
  /* belt-and-suspenders: no stray element may force a horizontal scrollbar */
  html,body{ max-width:100%; overflow-x:hidden; }

  /* DASHBOARD quick-stats: the 2-col grid floored at each card's ~231px
     min-content (58px number + nowrap "Ready to train" chip) → the right
     card spilled to 477px and was clipped by body{overflow-x:hidden}.
     One column per card = full width, fully visible, no overflow. */
  .ds-stats, .ds-stats.four{ grid-template-columns:1fr !important; }
  .stat{ min-width:0; }
  .stat-num{ flex-wrap:wrap; }

  /* INSIGHTS weekly summary: 2-col overflowed ~7px on the 27px value chip. */
  .summary{ grid-template-columns:1fr !important; }
  .sm, .sm-info{ min-width:0; }
}