/* ==========================================================================
   AssureIT Device Health Check — page styles (/device-health-check/)
   Sits on top of style.css: tokens, header, buttons, bands, FAQ, CTA panel,
   footer and the scroll reveal all come from there. Everything below is
   scoped to this page's own blocks, so nothing leaks back into the homepage.

   The hero shows a picture of the app's results screen drawn in HTML/CSS.
   The laptop in it is a real CSS 3D model (a six-faced base and a hinged lid)
   so it can sway the way the app's own viewer does. Its figures are example
   values and both the markup and the caption say so.

   Motion policy (same as style.css): every animation is decorative. With JS
   off, or with reduced motion, the preview is complete and static.
   ========================================================================== */

:root {
  --dhc-navy:     #1d2340;
  --dhc-soft-a:   #eef2f8;
  --dhc-soft-b:   #dde5f0;
  --dhc-tile:     #ffffff;
  --dhc-app:      #ffffff;
  --dhc-app-line: rgba(29, 35, 64, 0.08);
  --dhc-dial-t:   rgba(29, 35, 64, 0.10);
  --dhc-ok:       #17805a;
  --dhc-ok-soft:  rgba(31, 157, 107, 0.12);

  /* Damage pin colours, as in the app (SPEC §8): minor amber, moderate
     orange, severe red. Graphic-only; text next to them carries the meaning. */
  --dhc-minor:    #f0b429;
  --dhc-moderate: #f08a24;
  --dhc-severe:   #e0413a;
}

:root[data-theme="dark"] {
  --dhc-soft-a:   #20283b;
  --dhc-soft-b:   #181d2c;
  --dhc-tile:     #2a3249;
  --dhc-app:      #131722;
  --dhc-app-line: rgba(255, 255, 255, 0.08);
  --dhc-dial-t:   rgba(255, 255, 255, 0.10);
  --dhc-ok:       #4fd1a0;
  --dhc-ok-soft:  rgba(79, 209, 160, 0.12);
}

/* Shared small icon treatment for this page's inline SVGs. */
.dhc-ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ==========================================================================
   Hero
   ========================================================================== */
.dhc-hero {
  position: relative; overflow: hidden;
  padding-block: clamp(36px, 6vw, 84px) clamp(56px, 7vw, 100px);
}
.dhc-hero::before {
  content: ""; position: absolute; inset: -20% -10% auto; height: 90%;
  background: radial-gradient(38% 42% at 78% 38%, rgba(28, 181, 232, 0.16), transparent 70%),
              radial-gradient(30% 36% at 92% 70%, rgba(207, 47, 108, 0.12), transparent 70%);
  pointer-events: none; z-index: 0;
}
.dhc-hero-grid {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 68px); align-items: center;
}
.dhc-hero-copy { max-width: 560px; }
.dhc-hero-sub {
  margin-top: 18px; max-width: 30ch;
  font-family: var(--display); font-weight: 700; letter-spacing: -0.015em; line-height: 1.35;
  font-size: clamp(1.15rem, 1.9vw, 1.42rem); color: var(--text);
}
.dhc-hero .lede { margin-top: 14px; }
.dhc-hero .hero-actions { margin-top: 28px; }
.dhc-hero-note { margin-top: 12px; font-size: 0.85rem; color: var(--text-mute); line-height: 1.55; max-width: 48ch; }
.dhc-hero-note:empty { display: none; }
.dhc-hero-note b { color: var(--text-soft); font-weight: 650; }

.dhc-points { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 24px; font-size: 0.88rem; color: var(--text-soft); }
.dhc-points li { display: inline-flex; align-items: center; gap: 8px; }
.dhc-points li::before {
  content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%;
  background: var(--cyan-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4 6.5 11.4 12.5 5' fill='none' stroke='%230a8fc4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* ==========================================================================
   The app preview (a picture of the product — example values)
   ========================================================================== */
.dhc-vis { position: relative; margin: 0; }
.dhc-vis::before {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -4%; height: 46%;
  background: radial-gradient(ellipse at 30% 50%, rgba(28, 181, 232, 0.24), transparent 62%),
              radial-gradient(ellipse at 74% 50%, rgba(207, 47, 108, 0.18), transparent 62%);
  filter: blur(46px); pointer-events: none;
}
.app {
  position: relative;
  border-radius: var(--radius-xl);
  background: var(--dhc-app);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.app-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--dhc-app-line);
  font-size: 0.74rem; font-weight: 650; color: var(--text-mute);
}
.app-dots { display: flex; gap: 6px; }
.app-dots i { width: 9px; height: 9px; border-radius: 50%; display: block; background: var(--line-strong); }
.app-mark { width: 18px; height: 18px; border-radius: 5px; }
.app-tag {
  margin-left: auto; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--pink-text); background: var(--pink-soft); padding: 3px 8px; border-radius: 99px;
}
.app-body { padding: 14px; display: grid; gap: 12px; }

/* the big soft hero card: stats left and right, the device in the middle */
.app-hero {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.5fr) minmax(0, 0.78fr);
  grid-template-areas: "l dev r";
  gap: 6px; align-items: center;
  padding: 16px 16px 12px; border-radius: 18px;
  background: linear-gradient(145deg, var(--dhc-soft-a), var(--dhc-soft-b));
}
.app-left  { grid-area: l; }
.app-right { grid-area: r; text-align: right; }
.app-device { grid-area: dev; }
.app-col { display: grid; gap: 18px; min-width: 0; }
.app-stat { min-width: 0; }
.app-stat .k { display: block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); }
.app-stat .v {
  display: block; margin-top: 3px;
  font-family: var(--display); font-size: 1.28rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.app-stat .v.sm { font-size: 1.02rem; }
.app-stat .d { display: block; margin-top: 2px; font-size: 0.64rem; color: var(--text-mute); line-height: 1.35; }
.app-meter { display: block; height: 5px; margin-top: 7px; border-radius: 3px; background: var(--track); overflow: hidden; }
.app-meter i { display: block; height: 100%; width: var(--w, 50%); border-radius: inherit; background: linear-gradient(90deg, var(--cyan-g), #5b7cfa); transition: width 1.4s var(--ease) 0.5s; }
.app-right .app-meter i { margin-left: auto; }
html.js-anim .dhc-vis:not(.in) .app-meter i { width: 0; }

/* score dial */
.dial { position: relative; width: 88px; height: 88px; margin-top: 6px; }
.dial svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.dial-t { fill: none; stroke: var(--dhc-dial-t); stroke-width: 9; }
.dial-v {
  fill: none; stroke: url(#dhcDialG); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: var(--v) 100;
  transition: stroke-dasharray 1.6s var(--ease) 0.35s;
}
html.js-anim .dhc-vis:not(.in) .dial-v { stroke-dasharray: 0 100; }
.dial-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.dial-c b { font-family: var(--display); font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.dial-c span { margin-top: 3px; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); }

/* ---------- the 3D laptop ----------
   Built from flat faces in one preserve-3d scene. Sizes are fixed pixels and
   the whole model is scaled by --dv-s, so the key grid never distorts.
   Base: centred on the origin, W x H x D. Lid: hinged on the base's back top
   edge; --lid is its opening angle (0 = shut). */
.app-device { display: grid; justify-items: center; min-width: 0; }
.dv-stage {
  --dv-s: 0.74;
  position: relative; width: 100%; height: 184px;
  display: grid; place-items: center;
  perspective: 1100px; perspective-origin: 50% 35%;
}
.dv-scale { width: 0; height: 0; transform-style: preserve-3d; transform: scale(var(--dv-s)); }
.dv-rig {
  --w: 230px; --d: 150px; --h: 9px; --t: 6px; --lid: 108deg;
  position: relative; width: 0; height: 0;
  transform-style: preserve-3d;
  transform: translateY(72px) rotateX(-20deg) rotateY(-28deg);
  animation: dvSway 16s ease-in-out infinite;
}
@keyframes dvSway {
  0%, 100% { transform: translateY(72px) rotateX(-20deg) rotateY(-28deg); }
  50%      { transform: translateY(72px) rotateX(-20deg) rotateY(24deg); }
}
.dv-box, .dv-lid { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.dv-f {
  position: absolute; display: block;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.dv-f svg { width: 100%; height: 100%; display: block; }

/* base faces (each centred on the origin, then turned and pushed out) */
.dv-box .top, .dv-box .bottom { width: var(--w); height: var(--d); left: calc(var(--w) / -2); top: calc(var(--d) / -2); }
.dv-box .front, .dv-box .back { width: var(--w); height: var(--h); left: calc(var(--w) / -2); top: calc(var(--h) / -2); }
.dv-box .left, .dv-box .right { width: var(--d); height: var(--h); left: calc(var(--d) / -2); top: calc(var(--h) / -2); }
.dv-box .top    { transform: rotateX(90deg)  translateZ(calc(var(--h) / 2)); background: linear-gradient(180deg, #cdd4de, #e2e7ee 55%, #d8dee7); }
.dv-box .bottom { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); background: #8f98a6; }
.dv-box .front  { transform: translateZ(calc(var(--d) / 2)); background: linear-gradient(180deg, #b9c1cc, #98a1af); border-radius: 0 0 3px 3px; }
.dv-box .back   { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); background: #98a1af; }
.dv-box .right  { transform: rotateY(90deg)  translateZ(calc(var(--w) / 2)); background: linear-gradient(180deg, #aeb6c2, #929baa); }
.dv-box .left   { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); background: linear-gradient(180deg, #aeb6c2, #929baa); }
.dv-shadow {
  width: calc(var(--w) * 1.35); height: calc(var(--d) * 1.35);
  left: calc(var(--w) * -0.675); top: calc(var(--d) * -0.675);
  transform: rotateX(90deg) translateZ(calc(var(--h) / -2 - 3px));
  background: radial-gradient(closest-side, rgba(20, 28, 48, 0.34), rgba(20, 28, 48, 0.12) 60%, transparent);
  -webkit-backface-visibility: visible; backface-visibility: visible;
}
:root[data-theme="dark"] .dv-shadow { background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.22) 60%, transparent); }

/* port cut-outs on the sides */
.port { position: absolute; top: 50%; transform: translateY(-50%); background: #3a404c; border-radius: 1px; }
.port.a { width: 11px; height: 4px; }
.port.c { width: 8px; height: 3px; border-radius: 2px; }
.port.jack { width: 4px; height: 4px; border-radius: 50%; }

/* lid: its own frame, origin on the hinge, extends along +z when shut */
.dv-lid {
  transform: translate3d(0, calc(var(--h) / -2), calc(var(--d) / -2)) rotateX(var(--lid));
  transition: transform 1.5s var(--ease) 0.35s;
}
html.js-anim .dhc-vis:not(.in) .dv-rig { --lid: 6deg; }
.dv-lid .inner, .dv-lid .outer { width: var(--w); height: var(--d); left: calc(var(--w) / -2); top: calc(var(--d) / -2); }
.dv-lid .inner { transform: translate3d(0, 0, calc(var(--d) / 2)) rotateX(-90deg); background: #10131b; padding: 7px 7px 11px; border-radius: 4px 4px 0 0; }
.dv-lid .outer {
  transform: translate3d(0, calc(var(--t) * -1), calc(var(--d) / 2)) rotateX(90deg) rotateZ(180deg);
  background: linear-gradient(160deg, #e4e8ef, #c3cad5 60%, #b3bbc7); border-radius: 4px 4px 0 0;
}
.dv-lid .edge { width: var(--w); height: var(--t); left: calc(var(--w) / -2); top: calc(var(--t) / -2); transform: translate3d(0, calc(var(--t) / -2), var(--d)); background: #b3bbc7; border-radius: 3px 3px 0 0; }
.dv-lid .side-r, .dv-lid .side-l { width: var(--d); height: var(--t); left: calc(var(--d) / -2); top: calc(var(--t) / -2); background: #a9b1be; }
.dv-lid .side-r { transform: translate3d(calc(var(--w) / 2), calc(var(--t) / -2), calc(var(--d) / 2)) rotateY(90deg); }
.dv-lid .side-l { transform: translate3d(calc(var(--w) / -2), calc(var(--t) / -2), calc(var(--d) / 2)) rotateY(-90deg); }
.dv-logo { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffffff, #cfd6e0 60%, #b9c1cd); box-shadow: inset 0 0 0 1px rgba(40, 50, 70, 0.12); }

/* the screen: the app's emissive gradient panel */
.dv-panel {
  position: relative; display: block; height: 100%; border-radius: 2px; overflow: hidden;
  background:
    radial-gradient(60% 70% at 28% 30%, rgba(255, 255, 255, 0.22), transparent 60%),
    linear-gradient(135deg, #1cb5e8 0%, #3f7ff0 45%, #7a5cf0 72%, #cf2f6c 100%);
}
.dv-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, 0.18) 0 18%, transparent 18% 100%); }
.dv-cam { position: absolute; left: 50%; top: 2px; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: #2c3342; }
.dv-ring { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; }
.dv-ring circle { fill: none; stroke-width: 7; }

/* damage pins: a dot plus a ring that pings (SPEC §8: pins pulse) */
.dv-pin { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }
.dv-pin::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; animation: dvPing 2.4s var(--ease-out) infinite; }
.dv-pin.minor { color: var(--dhc-minor); }
.dv-pin.moderate { color: var(--dhc-moderate); }
.dv-pin.severe { color: var(--dhc-severe); }
.dv-pin.moderate::after { animation-delay: 1.2s; }
@keyframes dvPing { 0% { opacity: 0.9; transform: scale(0.5); } 80%, 100% { opacity: 0; transform: scale(1.6); } }

.dv-label {
  position: relative; z-index: 1;
  margin-top: 2px; padding: 4px 11px; border-radius: 99px;
  font-size: 0.64rem; font-weight: 700; color: var(--text-soft);
  background: var(--dhc-tile); box-shadow: 0 6px 16px -10px rgba(29, 35, 64, 0.45);
  white-space: nowrap;
}

/* four soft stat cards with white icon tiles */
.app-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.app-card {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 10px 11px; border-radius: 14px;
  background: linear-gradient(145deg, var(--dhc-soft-a), var(--dhc-soft-b));
}
.tile {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  display: grid; place-items: center; color: var(--cyan);
  background: var(--dhc-tile); box-shadow: 0 6px 14px -8px rgba(29, 35, 64, 0.4);
}
.tile .dhc-ico { width: 17px; height: 17px; stroke-width: 1.8; }
.app-card > div { min-width: 0; }
.app-card .k { display: block; font-size: 0.62rem; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-card b { display: block; font-family: var(--display); font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

/* the dark navy chart card */
.app-chart { border-radius: 16px; background: var(--dhc-navy); color: #e8ecf6; padding: 13px 16px 10px; }
:root[data-theme="dark"] .app-chart { background: #1b2140; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.app-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 0.74rem; }
.app-chart-head b { font-weight: 700; }
.app-chart-head span { font-size: 0.64rem; color: #a3abc6; }
.app-chart svg { display: block; width: 100%; height: auto; margin-top: 6px; overflow: visible; }
.ch-grid { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }
.ch-area { fill: url(#dhcAreaG); }
.ch-line { fill: none; stroke: #1cb5e8; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ch-dot { fill: #1d2340; stroke: #1cb5e8; stroke-width: 2; }
.ch-dot.last { fill: #1cb5e8; }
.ch-draw { clip-path: inset(-8px 0 -8px 0); transition: clip-path 1.8s var(--ease) 0.6s; }
html.js-anim .dhc-vis:not(.in) .ch-draw { clip-path: inset(-8px 100% -8px 0); }
.ch-axis { display: flex; justify-content: space-between; margin-top: 4px; font-family: var(--mono); font-size: 0.58rem; color: #8f98b6; }

.dhc-vis-cap { margin-top: 14px; text-align: center; font-size: 0.8rem; color: var(--text-mute); }

/* ==========================================================================
   Download cards
   ========================================================================== */
.dl-notice {
  max-width: 760px; margin: 0 auto 22px; padding: 12px 16px; border-radius: 12px;
  background: var(--yellow-soft); border: 1px solid rgba(232, 155, 12, 0.35);
  color: var(--text-soft); font-size: 0.9rem; text-align: center;
}
.dl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.dl-card {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 24px 22px 22px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease), box-shadow 0.35s, border-color 0.3s;
}
.dl-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
/* A ring rather than a thicker border, so the highlighted card's contents sit
   on exactly the same lines as its neighbours'. */
.dl-card.is-rec { border-color: var(--pink); box-shadow: 0 0 0 1px var(--pink), 0 30px 60px -34px rgba(207, 47, 108, 0.45); }
.dl-top { display: flex; align-items: flex-start; gap: 13px; }
.dl-ico { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--cyan-soft); color: var(--cyan); }
.dl-ico .dhc-ico { width: 22px; height: 22px; }
.dl-card h3 { font-family: var(--display); font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; }
.dl-req { font-size: 0.8rem; color: var(--text-mute); margin-top: 3px; line-height: 1.45; }
.dl-rec {
  position: absolute; top: -11px; left: 20px;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 99px; background: var(--pink); color: #fff; white-space: nowrap;
}
.dl-rec[hidden] { display: none; }
.dl-meta { display: flex; align-items: center; gap: 8px; min-height: 1.5em; font-family: var(--mono); font-size: 0.76rem; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.dl-meta::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--line-strong); }
.dl-card.is-ready .dl-meta::before { background: var(--dhc-ok); box-shadow: 0 0 0 3px var(--dhc-ok-soft); }
.dl-card.is-soon .dl-meta::before { background: var(--amber-g); }
.dl-card .btn { margin-top: auto; padding-inline: 12px; white-space: normal; text-align: center; }
.dl-help { font-size: 0.8rem; color: var(--text-mute); line-height: 1.55; }
.dl-help b { color: var(--text-soft); font-weight: 650; }
.dl-card.is-soon .dl-help.when-ready { display: none; }
.dl-help.when-soon { display: none; }
.dl-card.is-soon .dl-help.when-soon { display: block; }
.dl-verify { font-size: 0.78rem; color: var(--text-mute); }
.dl-verify[hidden] { display: none; }
.dl-verify summary { cursor: pointer; font-weight: 600; color: var(--text-soft); }
.dl-verify summary:hover { color: var(--pink-text); }
.dl-hash { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; }
.dl-hash code {
  flex: 1; min-width: 0; padding: 7px 9px; border-radius: 8px;
  font-family: var(--mono); font-size: 0.68rem; line-height: 1.5; word-break: break-all;
  background: var(--cell); border: 1px solid var(--line); color: var(--text-soft);
}
.dl-copy {
  flex: none; padding: 6px 10px; border-radius: 8px; cursor: pointer;
  font-size: 0.72rem; font-weight: 650; color: var(--text-soft);
  background: var(--surface); border: 1px solid var(--line-strong);
}
.dl-copy:hover { color: var(--text); border-color: var(--text); }
.dl-foot { margin-top: 26px; text-align: center; font-size: 0.88rem; color: var(--text-mute); }

/* Line the four cards up row by row. Each card spans five shared rows
   (heading, meta, button, help, checksum), so a heading that wraps or a
   longer help note in one card no longer pushes its button below its
   neighbours'. Hidden notes take no row. Without subgrid the flex column
   above still works, just with buttons at slightly different heights. */
@supports (grid-template-rows: subgrid) {
  .dl-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 14px; align-items: start; }
  .dl-card .btn { margin-top: 0; }
}

/* ==========================================================================
   What it checks
   ========================================================================== */
.chk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.chk-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px 20px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease), box-shadow 0.35s;
}
.chk-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.chk-card .icon { width: 40px; height: 40px; }
.chk-card h3 { font-family: var(--display); font-size: 1.02rem; font-weight: 750; letter-spacing: -0.015em; }
.chk-card p { font-size: 0.88rem; color: var(--text-soft); line-height: 1.6; }
.chk-card.is-optional { border-style: dashed; border-color: var(--line-strong); background: var(--surface-2); }
.chk-card .opt-tag {
  align-self: flex-start; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 99px; color: var(--pink-text); background: var(--pink-soft);
}
.chk-more { margin-top: 26px; max-width: 760px; margin-inline: auto; text-align: center; font-size: 0.92rem; color: var(--text-soft); line-height: 1.65; }

/* ==========================================================================
   How it works — four steps
   ========================================================================== */
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; position: relative; }
.steps::before {
  content: ""; position: absolute; top: 25px; left: 12%; right: 12%; height: 2px;
  background: linear-gradient(90deg, var(--cyan-g), var(--pink)); opacity: 0.35;
}
.step { position: relative; text-align: center; padding: 0 6px; }
.step-n {
  position: relative; z-index: 1;
  width: 52px; height: 52px; margin: 0 auto 18px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700; font-size: 0.86rem; color: var(--pink-text);
  background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-sm);
}
.step h3 { font-family: var(--display); font-size: 1.08rem; font-weight: 750; letter-spacing: -0.015em; margin-bottom: 8px; }
.step p { font-size: 0.9rem; color: var(--text-soft); line-height: 1.6; max-width: 30ch; margin-inline: auto; }

/* ==========================================================================
   Your report — how the score is built (example values)
   ========================================================================== */
.rep-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.rep-list { list-style: none; padding: 0; margin-top: 28px; display: grid; gap: 16px; }
.rep-list li { display: flex; gap: 14px; align-items: flex-start; }
.rep-list .icon { width: 38px; height: 38px; }
.rep-list b { display: block; font-family: var(--display); font-weight: 750; font-size: 0.98rem; letter-spacing: -0.01em; }
.rep-list span { display: block; font-size: 0.89rem; color: var(--text-soft); line-height: 1.6; margin-top: 2px; }

.rep-cards { display: grid; gap: 14px; }
.rep-card { padding: 20px 22px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.rep-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.rep-head h3 { font-family: var(--display); font-size: 1.02rem; font-weight: 750; letter-spacing: -0.015em; }
.rep-head .rep-ex { margin-left: auto; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); border: 1px solid var(--line-strong); padding: 2px 8px; border-radius: 99px; }
.rep-score { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--display); }
.rep-score b { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; }
.rep-score span { font-size: 0.8rem; font-weight: 700; color: var(--cyan); }

.bk { display: grid; gap: 8px; }
.bk-row { display: grid; grid-template-columns: minmax(0, 8.5rem) 2.6rem minmax(0, 1fr) 2rem; align-items: center; gap: 10px; font-size: 0.82rem; color: var(--text-soft); }
.bk-w { font-family: var(--mono); font-size: 0.72rem; color: var(--text-mute); text-align: right; }
.bk-bar { height: 7px; border-radius: 4px; background: var(--track); overflow: hidden; }
.bk-bar i { display: block; height: 100%; width: var(--v); border-radius: inherit; background: linear-gradient(90deg, var(--cyan-g), #5b7cfa); transition: width 1.3s var(--ease) 0.3s; }
.bk-row.low .bk-bar i { background: linear-gradient(90deg, var(--amber-g), #f08a24); }
html.js-anim .rep-card:not(.in) .bk-bar i { width: 0; }
.bk-s { font-family: var(--mono); font-size: 0.74rem; font-weight: 600; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.bk-key { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.76rem; color: var(--text-mute); }
.bk-key b { color: var(--text-soft); font-weight: 700; }

.rep-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.life-mini { list-style: none; padding: 0 0 0 18px; margin: 0; display: grid; gap: 12px; position: relative; }
.life-mini::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 2px; background: var(--line-strong); border-radius: 1px; }
.life-mini li { position: relative; font-size: 0.8rem; color: var(--text-soft); line-height: 1.5; }
.life-mini li::before { content: ""; position: absolute; left: -18px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--cyan-g); }
.life-mini li.warn::before { border-color: var(--amber-g); }
.life-mini time { display: block; font-family: var(--mono); font-size: 0.68rem; color: var(--text-mute); }
.life-mini b { color: var(--text); font-weight: 650; }
.pins { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pins li { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: var(--text-soft); }
.pins i { width: 11px; height: 11px; flex: none; border-radius: 50%; box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--line-strong); }
.pins .minor { background: var(--dhc-minor); }
.pins .moderate { background: var(--dhc-moderate); }
.pins .severe { background: var(--dhc-severe); }
.rep-note { margin-top: 12px; font-size: 0.76rem; color: var(--text-mute); line-height: 1.55; }

/* ==========================================================================
   Privacy
   ========================================================================== */
.prv-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(30px, 5vw, 70px); align-items: start; }
@media (min-width: 981px) {
  /* two columns: keep the heading beside the (long) cards as they scroll */
  .prv-grid > .section-head { position: sticky; top: calc(var(--header-h) + 24px); }
}
.prv-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.prv-card { padding: 20px 20px 18px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.prv-card.wide { grid-column: 1 / -1; }
.prv-card h3 { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 1rem; font-weight: 750; letter-spacing: -0.015em; margin-bottom: 10px; }
.prv-card h3 .dhc-ico { width: 18px; height: 18px; color: var(--cyan); }
.prv-card ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.prv-card li { position: relative; padding-left: 16px; font-size: 0.87rem; color: var(--text-soft); line-height: 1.58; }
.prv-card li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan-g); }
.prv-card.never li::before { background: var(--red); border-radius: 1px; transform: rotate(45deg); }
.prv-card p { font-size: 0.87rem; color: var(--text-soft); line-height: 1.6; }
.prv-card p + p { margin-top: 8px; }
.prv-card a { color: var(--pink-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.prv-card a[href^="tel:"] { white-space: nowrap; }

/* optional consents: drawn as switches in their default OFF position */
.opt-list { display: grid; gap: 12px; }
.opt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 12px 14px; border-radius: 12px; background: var(--cell); border: 1px solid var(--line); }
.sw { grid-row: span 2; position: relative; width: 36px; height: 21px; margin-top: 2px; border-radius: 99px; background: var(--track); border: 1px solid var(--line-strong); }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.opt b { font-size: 0.9rem; font-weight: 700; color: var(--text); }
.opt span { font-size: 0.84rem; color: var(--text-soft); line-height: 1.55; }
.opt-off { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); margin-left: 6px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .dl-grid, .chk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1040px) {
  .dhc-hero-grid { grid-template-columns: 1fr; }
  .dhc-hero-copy { max-width: 680px; }
  .dhc-vis { max-width: 680px; width: 100%; margin-inline: auto; }
}

@media (max-width: 980px) {
  /* Once the nav links drop into the overlay, nothing pushes the buttons to
     the right edge any more; keep them there. */
  .nav-cta { margin-left: auto; }
  .rep-grid, .prv-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 18px; }
  .steps::before { display: none; }
}

@media (max-width: 720px) {
  .prv-cards, .rep-two { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .dl-grid, .chk-grid { grid-template-columns: 1fr; }
  /* Stacked cards have no neighbours to line up with; drop the shared rows
     so a card without a checksum doesn't end in an empty one. */
  .dl-card { display: flex; grid-row: auto; }
  /* Twelve stacked cards get long on a phone: icon beside the text instead. */
  .chk-grid { gap: 10px; }
  .chk-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 3px 14px; align-items: start; padding: 16px; }
  .chk-card .icon { grid-row: span 2; }
  .chk-card .opt-tag { grid-column: 1 / -1; margin-bottom: 6px; }
  .steps { grid-template-columns: 1fr; gap: 22px; }
  .step { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 16px; text-align: left; padding: 0; }
  .step-n { grid-row: span 2; align-self: start; margin: 0; }
  .step p { margin-inline: 0; max-width: none; }

  /* The preview reflows: the device on top, the four headline stats below it. */
  .app-body { padding: 10px; gap: 10px; }
  .app-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "dev dev" "l r"; gap: 12px 14px; padding: 12px 14px 14px; }
  .app-right { text-align: left; }
  .app-right .app-meter i { margin-left: 0; }
  .app-col { gap: 14px; align-content: start; }
  .dial { width: 74px; height: 74px; }
  .dial-c b { font-size: 1.35rem; }
  .dv-stage { --dv-s: 0.7; height: 164px; }
  .app-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .app-card { padding: 9px 10px; gap: 9px; }
  .tile { width: 30px; height: 30px; border-radius: 9px; }
  .bk-row { grid-template-columns: minmax(0, 1fr) 2.4rem minmax(0, 0.9fr) 1.8rem; gap: 8px; font-size: 0.78rem; }
  .prv-card { padding: 18px 16px 16px; }
  .opt { gap: 8px 12px; padding: 12px; align-items: center; }
  .opt .sw { grid-row: auto; margin-top: 0; }
  .opt > span:last-child { grid-column: 1 / -1; }
  .opt-off { display: block; margin: 2px 0 0; }
  .rep-card { padding: 18px 16px; }
}

@media (max-width: 380px) {
  .app-stat .v { font-size: 1.12rem; }
  .app-stat .v.sm { font-size: 0.9rem; white-space: nowrap; }
  .app-bar .app-title { display: none; }
}

/* Reduced motion: style.css already stops every animation and transition
   globally; this just parks the model at a readable three-quarter view. */
@media (prefers-reduced-motion: reduce) {
  .dv-rig { animation: none; transform: translateY(72px) rotateX(-20deg) rotateY(-24deg); }
  .dv-pin::after { display: none; }
}

@media print {
  .dhc-vis, .dl-verify { display: none; }
}