/* DeskKit homepage v2 — index.html only (body.home-v2). Every rule is
   scoped to .home-v2 (or to the html.hv-* and .hvi-* state classes only the
   homepage sets), so no other page changes. Behaviour: js/home-v2.js.

   html.hv-ws     signed-in workspace on this page (#dk-home-out is
                  hidden); its dark look lives in css/workspace-v2.css.
   html.hvi-run   boot-up intro playing; .hvi-placed once the computer is
                  on its intro spot, .hvi-hold once the hero copy (painted
                  once under the intro) is held back for its entrance,
                  .hvi-land while it flies home, .hvi-fast when skipped,
                  .hvi-done afterwards.
   html.hv-anim   reveal-on-scroll is active (JS + motion allowed). */

/* ================================================================ tokens
   Colours, the per-tool neon map, radii and motion (--v2-*) live in
   css/theme-v2.css — the one source of truth for every v2 page — as do
   the dark header, mobile bottom nav and footer (body.theme-v2, which
   index.html also carries). Only homepage-only layout values stay here. */

.home-v2 {
  --hv-max: 1280px;
  --hv-pad: clamp(16px, 4vw, 40px);
  --dir: -1; /* reading direction for arrow nudges: RTL moves left */
}
html[dir="ltr"] .home-v2 { --dir: 1; }
@media (min-width: 1680px) { .home-v2 { --hv-max: 1440px; } .hv-device { max-width: 760px; } }

.home-v2 #dk-home-out { font-family: 'Heebo', system-ui, -apple-system, Arial, sans-serif; color: var(--v2-text); }
.hv-wrap { width: 100%; max-width: var(--hv-max); margin-inline: auto; padding-inline: var(--hv-pad); box-sizing: border-box; }
.hv-section { position: relative; padding-block: clamp(56px, 7vw, 100px); }
.hv-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.hv-head { text-align: center; max-width: 720px; margin: 0 auto clamp(32px, 4.5vw, 56px); }
.hv-head-start { text-align: start; margin: 0; }
.hv-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  font-size: 14px; font-weight: 600; color: var(--v2-teal-hi); letter-spacing: .01em;
}
.hv-eyebrow::before { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, transparent, currentColor); }
html[dir="rtl"] .hv-eyebrow::before { background: linear-gradient(270deg, transparent, currentColor); }
.hv-h2 {
  margin: 14px 0 0; font-weight: 700; color: var(--v2-hi); text-wrap: balance;
  font-size: var(--v2-fs-h2); line-height: 1.12; letter-spacing: -.02em;
}
/* The three-steps timeline keeps a slightly larger heading (--v2-fs-h2-lg). */
.hv-how .hv-h2 { font-size: var(--v2-fs-h2-lg); }
.hv-lead { margin: 16px auto 0; color: var(--v2-dim); font-size: clamp(1rem, .95rem + .3vw, 1.15rem); line-height: 1.7; max-width: 36em; }
html[lang="en"] .home-v2 .hv-h1, html[lang="en"] .home-v2 .hv-h2,
html[lang="en"] .home-v2 .hv-ai-h, html[lang="en"] .home-v2 .hv-intro-title,
html[lang="en"] .home-v2 .hv-use-copy h3 { font-family: 'Space Grotesk', 'Heebo', system-ui, sans-serif; letter-spacing: -.03em; }

/* Arrows: drawn pointing left (forward in Hebrew); mirrored in English. */
.hv-arrow { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: translate var(--v2-fast) var(--v2-ease); }
.hv-arrow-back { transform: rotate(180deg); }
html[dir="ltr"] .home-v2 .hv-arrow { transform: scaleX(-1); }
html[dir="ltr"] .home-v2 .hv-arrow-back { transform: scaleX(-1) rotate(180deg); }

/* ================================================================ buttons */
.hv-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0; cursor: pointer;
  font: 700 16px/1.2 'Heebo', system-ui, sans-serif; text-decoration: none; white-space: nowrap;
  overflow: hidden; isolation: isolate;
  transition: transform var(--v2-fast) var(--v2-ease), box-shadow var(--v2-med) var(--v2-ease), background-color var(--v2-fast) ease, color var(--v2-fast) ease;
}
.hv-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hv-btn-primary {
  color: var(--v2-on-teal); background: linear-gradient(180deg, var(--v2-teal-top), var(--v2-teal));
  box-shadow: inset 0 0 0 1px rgba(160, 255, 240, .55), inset 0 1px 0 rgba(255, 255, 255, .5), 0 12px 32px -12px rgba(var(--v2-teal-rgb), calc(.75 * var(--v2-glow-k))), 0 0 46px -16px rgba(var(--v2-teal-rgb), calc(.8 * var(--v2-glow-k)));
}
.hv-btn-primary::after { /* light sweep on hover */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(var(--v2-lift-rgb), .55) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--v2-ease);
}
.hv-btn-primary:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(190, 255, 245, .8), inset 0 1px 0 rgba(255, 255, 255, .6), 0 16px 40px -12px rgba(var(--v2-teal-rgb), calc(.9 * var(--v2-glow-k))), 0 0 60px -12px rgba(var(--v2-teal-rgb), calc(.9 * var(--v2-glow-k))); }
.hv-btn-primary:hover::after { transform: translateX(120%); }
.hv-btn-primary:active { transform: translateY(0) scale(.98); }
.hv-btn-ghost { color: var(--v2-text-2); background: rgba(var(--v2-fg-rgb), .03); box-shadow: inset 0 0 0 1px rgba(var(--v2-fg-rgb), .16); }
.hv-btn-ghost:hover { background: rgba(var(--v2-fg-rgb), .07); box-shadow: inset 0 0 0 1px rgba(var(--v2-fg-rgb), .34); }
.hv-btn-ghost:hover svg { translate: 0 2px; }
.hv-btn-ghost svg { transition: translate var(--v2-fast) var(--v2-ease); }
.hv-btn-lg { min-height: 60px; padding: 0 36px; font-size: 17.5px; }
.home-v2 #dk-home-out :is(a, button, textarea):focus-visible { outline: 2px solid var(--c, var(--v2-teal-hi)); outline-offset: 3px; }

/* =================================================================== hero */
.hv-hero { position: relative; padding-block: clamp(28px, 5vw, 64px) clamp(56px, 7vw, 96px); }
.hv-hero-light {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(42% 52% at 24% 46%, rgba(var(--v2-teal-rgb), .13), transparent 70%),
    radial-gradient(38% 46% at 12% 78%, rgba(var(--v2-site-rgb), .12), transparent 70%),
    radial-gradient(40% 40% at 85% 10%, rgba(var(--v2-cv-rgb), .07), transparent 70%);
}
html[dir="ltr"] .hv-hero-light { transform: scaleX(-1); }
.hv-hero-light::after { /* fine grid, fading out from the computer */
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(var(--v2-fg-rgb), .035) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--v2-fg-rgb), .035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(50% 60% at 26% 50%, #000, transparent 75%); mask-image: radial-gradient(50% 60% at 26% 50%, #000, transparent 75%);
}
.hv-hero-grid {
  position: relative; display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  grid-template-areas: "head visual" "actions visual";
  column-gap: clamp(32px, 5vw, 88px); row-gap: 0;
}
@media (min-width: 1024px) and (min-height: 700px) {
  .hv-hero { min-height: calc(100vh - 70px); min-height: calc(100svh - 70px); display: flex; align-items: center; box-sizing: border-box; }
}
.hv-hero-head { grid-area: head; align-self: end; }
.hv-hero-visual { grid-area: visual; position: relative; display: flex; justify-content: center; align-items: center; }
.hv-hero-actions { grid-area: actions; align-self: start; }
.hv-h1 {
  margin: 0; font-weight: 700; text-wrap: balance;
  font-size: var(--v2-fs-display); line-height: 1.1; letter-spacing: -.025em;
  color: #fff; background: linear-gradient(180deg, #fff 35%, #b9c5da); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hv-hero-lead { margin: 22px 0 0; max-width: 33em; color: var(--v2-dim); font-size: clamp(1.02rem, .92rem + .38vw, 1.2rem); line-height: 1.7; }
.hv-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hv-hero-eyebrow { margin-bottom: 16px; }
.hv-trust { flex-basis: 100%; margin: 2px 0 0; color: var(--v2-dim); font-size: 14px; }

/* Neon tool shortcuts ------------------------------------------------ */
.hv-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 34px; max-width: 560px; }
.hv-neon {
  --c: var(--v2-teal);
  position: relative; isolation: isolate; display: flex; align-items: center; gap: 12px;
  min-height: 60px; padding: 0 14px; border-radius: 16px; text-decoration: none;
  color: var(--v2-text); font-weight: 600; font-size: 15px; line-height: 1.2;
  background: linear-gradient(180deg, rgba(var(--v2-lift-rgb), .035), rgba(var(--v2-lift-rgb), .008)), var(--v2-panel);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 26%, transparent);
  transition: background-color var(--v2-fast) ease, box-shadow var(--v2-fast) ease, transform var(--v2-fast) var(--v2-ease), color var(--v2-fast) ease;
  -webkit-tap-highlight-color: transparent;
}
/* The travelling light, confined to the 1.5px border ring. The ring
   (.hv-neon-ring) only masks; inside it a square conic gradient, centred on
   the button, turns (transform) — the same picture as turning the
   gradient's start angle, but run by the compositor: no restyle or repaint
   per frame on the main thread. */
.hv-neon-ring {
  position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .7; transition: opacity var(--v2-fast) ease;
}
.hv-neon-ring > span {
  position: absolute; left: 50%; top: 50%; width: max(125%, 150px); aspect-ratio: 1;
  background: conic-gradient(transparent 0deg 285deg, color-mix(in srgb, var(--c) 60%, transparent) 320deg, var(--c) 345deg, transparent 360deg);
  transform: translate(-50%, -50%); animation: hvSpinRing 7.5s linear infinite; animation-play-state: paused;
}
.hv-hero.is-live .hv-neon-ring > span { animation-play-state: running; }
.hv-neon:nth-child(2) .hv-neon-ring > span { animation-delay: -1.3s; }
.hv-neon:nth-child(3) .hv-neon-ring > span { animation-delay: -2.6s; }
.hv-neon:nth-child(4) .hv-neon-ring > span { animation-delay: -3.9s; }
.hv-neon:nth-child(5) .hv-neon-ring > span { animation-delay: -5.2s; }
.hv-neon:nth-child(6) .hv-neon-ring > span { animation-delay: -6.5s; }
@keyframes hvSpinRing { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.hv-neon::after { /* tinted illumination following the pointer */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(140px 90px at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--c) 26%, transparent), transparent 70%);
  transition: opacity var(--v2-fast) ease;
}
.hv-neon-icon {
  display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; color: var(--c);
  background: color-mix(in srgb, var(--c) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent);
  transition: transform var(--v2-med) var(--v2-ease), box-shadow var(--v2-fast) ease, background-color var(--v2-fast) ease;
}
.hv-neon-icon svg, .hv-card-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hv-neon-icon .hv-fill, .hv-card-icon .hv-fill { fill: currentColor; stroke: none; }
.hv-neon-label { min-width: 0; overflow-wrap: anywhere; }
.hv-neon:hover, .hv-neon:focus-visible {
  color: var(--v2-hi); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 12%, transparent), color-mix(in srgb, var(--c) 4%, transparent)), var(--v2-panel);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 75%, transparent), 0 0 26px -8px var(--c);
}
.hv-neon:hover .hv-neon-ring, .hv-neon:focus-visible .hv-neon-ring { opacity: 1; }
.hv-neon:hover::after { opacity: 1; }
.hv-neon:hover .hv-neon-icon, .hv-neon:focus-visible .hv-neon-icon {
  transform: translateY(-1px) rotate(-6deg) scale(1.07);
  background: color-mix(in srgb, var(--c) 22%, transparent); box-shadow: inset 0 0 0 1px var(--c), 0 0 16px -3px var(--c);
}
.hv-neon:active { transform: scale(.975); background: color-mix(in srgb, var(--c) 20%, var(--v2-panel)); }

/* The computer ------------------------------------------------------- */
.hv-device {
  position: relative; z-index: 1; width: 100%; max-width: 680px;
  container-type: inline-size; transform-origin: 0 0;
}
.hv-monitor {
  position: relative; padding: 1.7cqw; border-radius: 2.9cqw;
  background: linear-gradient(155deg, #3a404c 0%, #191d25 16%, #0b0d12 55%, #171a21 100%);
  box-shadow:
    inset 0 0 0 1px rgba(var(--v2-fg-rgb), .07), inset 0 1px 0 rgba(255, 255, 255, .2),
    0 0 0 1px rgba(var(--v2-shade-rgb), var(--v2-shade-k)), 0 50px 90px -40px rgba(var(--v2-shade-rgb), calc(.95 * var(--v2-shade-k))),
    0 0 120px -30px rgba(var(--v2-teal-rgb), calc(.38 * var(--v2-glow-k))), 0 0 60px -30px rgba(var(--v2-site-rgb), calc(.5 * var(--v2-glow-k)));
  transition: box-shadow 1s ease;
}
.hv-monitor::after { /* bottom-edge chamfer highlight */
  content: ""; position: absolute; inset-inline: 8%; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--v2-lift-rgb), .22), transparent);
}
.hv-screen { position: relative; aspect-ratio: 16 / 10; border-radius: 1.3cqw; overflow: hidden; background: var(--v2-void); box-shadow: inset 0 0 0 1px rgba(var(--v2-shade-rgb), calc(.9 * var(--v2-shade-k))); }
.hv-ui {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  background:
    radial-gradient(70% 70% at 78% 0%, rgba(var(--v2-teal-rgb), .2), transparent 62%),
    radial-gradient(60% 60% at 0% 100%, rgba(var(--v2-site-rgb), .17), transparent 62%),
    linear-gradient(180deg, #0c121d, #070a11);
  transition: opacity .55s ease, filter .55s ease;
}
.hv-ui-bar { flex-shrink: 0; height: 6.2cqw; display: flex; align-items: center; gap: 2cqw; padding: 0 2.4cqw; border-bottom: 1px solid rgba(var(--v2-fg-rgb), .06); }
.hv-ui-dots { display: flex; gap: .9cqw; direction: ltr; }
.hv-ui-dots i { width: 1.15cqw; height: 1.15cqw; border-radius: 50%; background: #ff5f57; opacity: .85; }
.hv-ui-dots i:nth-child(2) { background: #febc2e; }
.hv-ui-dots i:nth-child(3) { background: #28c840; }
.hv-ui-url { margin-inline: auto; padding: .55cqw 3.4cqw; border-radius: 99px; background: rgba(var(--v2-fg-rgb), .05); color: #8d98ab; font: 500 1.55cqw/1.2 'Space Grotesk', 'Heebo', sans-serif; direction: ltr; }
.hv-ui-avatar { width: 2.5cqw; height: 2.5cqw; border-radius: 50%; background: linear-gradient(135deg, var(--v2-cv), var(--v2-site)); }
.hv-ui-body { flex: 1; display: flex; min-height: 0; }
.hv-ui-side { flex-shrink: 0; width: 8cqw; display: flex; flex-direction: column; align-items: center; gap: 1.55cqw; padding-top: 2.2cqw; border-inline-end: 1px solid rgba(var(--v2-fg-rgb), .06); background: rgba(var(--v2-fg-rgb), .015); }
.hv-ui-logo { width: 3.7cqw; height: 3.9cqw; margin-bottom: .6cqw; background: url("../images/brand/deskkit-mark-dark.svg") center / 150% no-repeat; } /* the DeskKit mark */
.hv-ui-side i { width: 3cqw; height: 3cqw; border-radius: .9cqw; background: color-mix(in srgb, var(--c) 20%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); }
.hv-ui-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2.1cqw; padding: 4cqw 4.4cqw 3.6cqw; }
.hv-ui-title { margin: 0; max-width: 78%; color: var(--v2-hi); font: 700 5cqw/1.12 'Heebo', system-ui, sans-serif; letter-spacing: -.02em; }
.hv-ui-cta {
  display: inline-flex; align-items: center; padding: 1.15cqw 2.8cqw; border-radius: 99px; text-decoration: none; white-space: nowrap;
  font: 700 1.85cqw/1.2 'Heebo', system-ui, sans-serif; color: var(--v2-on-teal); background: linear-gradient(180deg, var(--v2-teal-top), var(--v2-teal));
  box-shadow: 0 0 3cqw -.6cqw rgba(var(--v2-teal-rgb), .9);
}
.hv-ui-tiles { margin-top: auto; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2cqw; }
.hv-ui-tile {
  aspect-ratio: 4 / 3.2; border-radius: 1.4cqw; padding: 1.5cqw; display: flex; flex-direction: column; gap: .95cqw; box-sizing: border-box;
  background: linear-gradient(180deg, rgba(var(--v2-lift-rgb), .055), rgba(var(--v2-lift-rgb), .015));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 48%, transparent), 0 0 3.4cqw -1.2cqw color-mix(in srgb, var(--c) 70%, transparent);
}
.hv-ui-tile i { display: block; height: .85cqw; width: 100%; border-radius: 99px; background: rgba(var(--v2-fg-rgb), .14); }
.hv-ui-tile i.s { width: 58%; }
.hv-ui-tile-hero { height: 4cqw; border-radius: .8cqw; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 80%, #000), color-mix(in srgb, var(--c) 25%, #000)); }
.hv-ui-tile-avatar { width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 40%, #000)); }
.hv-ui-tile-total { margin-top: auto; align-self: flex-end; width: 46%; height: 1.5cqw; border-radius: 99px; background: var(--c); box-shadow: 0 0 1.6cqw -.2cqw var(--c); }
.hv-glass {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(116deg, rgba(var(--v2-lift-rgb), .11) 0%, rgba(var(--v2-lift-rgb), .035) 26%, transparent 40%), linear-gradient(0deg, rgba(var(--v2-lift-rgb), .025), transparent 25%);
}
.hv-boot { display: none; }
.hv-stand { position: relative; height: 14cqw; display: flex; flex-direction: column; align-items: center; }
.hv-neck {
  width: 15cqw; height: 11.6cqw;
  background: linear-gradient(90deg, #0b0d12, #2b303a 42%, #3a3f4a 50%, #151820 72%, #0a0c10);
  clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%);
}
.hv-foot {
  width: 34cqw; height: 2.4cqw; border-radius: 1cqw 1cqw .7cqw .7cqw;
  background: linear-gradient(180deg, #2e333d, #0e1016);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1.6cqw 3cqw -.4cqw rgba(var(--v2-shade-rgb), calc(.9 * var(--v2-shade-k)));
}
.hv-desk-light {
  position: absolute; z-index: -1; left: 50%; bottom: -5cqw; width: 100%; height: 26cqw; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(var(--v2-teal-rgb), .2), rgba(var(--v2-site-rgb), .08) 48%, transparent 72%);
}

/* ================================================================ intro */
.hv-intro { display: none; }
html.hvi-run .hv-intro {
  --p: 0;
  display: block; position: fixed; inset: 0; z-index: 4600; overflow: hidden; background: #020308;
  animation: hvFailsafeHide 0s linear 4.6s forwards; /* even if js/home-v2.js never ran */
}
html.hvi-run .hv-device { z-index: 4601; }
html.hvi-run:not(.hvi-placed) .hv-device { visibility: hidden; animation: hvFailsafeShow 0s linear 4.6s forwards; }
@keyframes hvFailsafeHide { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@keyframes hvFailsafeShow { to { visibility: visible; } }
.hv-intro-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(46% 42% at 50% 54%, rgba(45, 212, 191, calc(.04 + var(--p) * .16)), transparent 72%),
    radial-gradient(90% 60% at 50% 118%, rgba(61, 139, 255, calc(.08 + var(--p) * .12)), transparent 62%),
    radial-gradient(60% 50% at 50% -10%, rgba(var(--v2-cv-rgb), .08), transparent 70%);
}
.hv-intro-beam {
  position: absolute; top: -12%; left: 50%; width: min(90vw, 1000px); height: 86%; transform: translateX(-50%);
  background: radial-gradient(50% 100% at 50% 0%, rgba(170, 240, 255, .075), rgba(170, 240, 255, .02) 55%, transparent 80%);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  opacity: 0; animation: hvFade 1.1s ease .1s forwards;
}
.hv-intro-trail { position: absolute; height: 1px; width: 40vw; left: -40vw; opacity: .6; background: linear-gradient(90deg, transparent, rgba(var(--v2-teal-hi-rgb), .8), transparent); animation: hvTrail 2.4s var(--v2-ease) .2s forwards; }
.hv-intro-trail.hv-t1 { top: 7%; }
.hv-intro-trail.hv-t2 { top: 93%; animation-delay: .55s; background: linear-gradient(90deg, transparent, rgba(var(--v2-cv-rgb), .7), transparent); }
@keyframes hvTrail { to { transform: translateX(180vw); } }
.hv-intro-floor {
  position: absolute; left: -25%; right: -25%; bottom: -6%; height: 46%;
  background-image: linear-gradient(rgba(var(--v2-teal-hi-rgb), .16) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--v2-teal-hi-rgb), .16) 1px, transparent 1px);
  background-size: 56px 56px; transform: perspective(520px) rotateX(64deg); transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, transparent 92%); mask-image: linear-gradient(180deg, transparent, #000 30%, transparent 92%);
  opacity: calc(.15 + var(--p) * .35);
}
.hv-intro-stage {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(18px, 4.5vh, 48px); padding: clamp(28px, 6vh, 70px) 20px clamp(64px, 9vh, 90px); box-sizing: border-box;
}
.hv-intro-title {
  margin: 0; max-width: 18ch; text-align: center; text-wrap: balance; font-weight: 700;
  font-size: var(--v2-fs-display); line-height: 1.1; letter-spacing: -.025em;
  color: #fff; background: linear-gradient(180deg, #fff 35%, #aebbd2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  opacity: 0; animation: hvTitleIn 1s var(--v2-ease) .12s forwards;
}
.hv-intro-row { display: flex; align-items: center; justify-content: center; gap: clamp(22px, 3.2vw, 52px); }
/* Width of the computer during the intro (height follows its own ratio
   ≈ 0.79 of the width: screen 16:10 + bezel + stand). */
.hv-intro-slot { flex-shrink: 0; width: min(60vw, 760px, calc((100vh - 330px) / .79)); width: min(60vw, 760px, calc((100svh - 330px) / .79)); aspect-ratio: 1 / .79; }

.hv-battery { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; direction: ltr; flex-shrink: 0; opacity: 0; animation: hvFade .6s ease .3s forwards; }
.hv-battery-cap { order: -1; width: 18px; height: 6px; margin-bottom: -10px; border-radius: 3px 3px 0 0; background: rgba(var(--v2-fg-rgb), .38); transition: background .4s ease; }
.hv-battery-shell {
  position: relative; width: 52px; height: 116px; border-radius: 14px; box-sizing: border-box;
  border: 2px solid rgba(var(--v2-fg-rgb), .4);
  box-shadow: 0 0 calc(var(--p) * 30px) rgba(45, 212, 191, calc(var(--p) * .55)), inset 0 0 calc(var(--p) * 16px) rgba(45, 212, 191, calc(var(--p) * .25));
  transition: border-color .4s ease;
}
.hv-battery-fill {
  position: absolute; inset: 4px; border-radius: 8px; transform-origin: 50% 100%; transform: scaleY(var(--p));
  background: linear-gradient(0deg, #0f9f90, var(--v2-teal) 45%, #8ff7e8);
  box-shadow: 0 0 calc(6px + var(--p) * 18px) rgba(94, 234, 212, calc(.3 + var(--p) * .5));
}
.hv-battery-bolt, .hv-battery-check { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%); transition: opacity .3s ease, transform .4s var(--v2-ease); }
.hv-battery-bolt { fill: var(--v2-hi); opacity: .9; filter: drop-shadow(0 0 4px rgba(var(--v2-shade-rgb), calc(.6 * var(--v2-shade-k)))); }
.hv-battery-check { fill: none; stroke: var(--v2-on-teal); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: translate(-50%, -50%) scale(.5); }
.hv-battery-pct { font: 600 15px/1 'Space Grotesk', 'Heebo', sans-serif; font-variant-numeric: tabular-nums; color: #cfe9e5; min-width: 4.5ch; text-align: center; letter-spacing: .02em; }
.hv-battery-shell::after { content: ""; position: absolute; inset: -7px; border-radius: 19px; border: 1px solid var(--v2-teal-hi); opacity: 0; pointer-events: none; }
.hv-intro.is-full .hv-battery-shell { border-color: var(--v2-teal-hi); }
.hv-intro.is-full .hv-battery-cap { background: var(--v2-teal-hi); }
.hv-intro.is-full .hv-battery-bolt { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
.hv-intro.is-full .hv-battery-check { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.hv-intro.is-full .hv-battery-shell::after { animation: hvRing .8s ease-out forwards; }
.hv-intro.is-full .hv-battery-pct { color: var(--v2-teal-hi); }
@keyframes hvRing { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.35); } }

.hv-intro-skip {
  position: absolute; inset-inline-end: clamp(16px, 3vw, 32px); bottom: max(20px, env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 99px; cursor: pointer;
  font: 600 14px/1 'Heebo', system-ui, sans-serif; color: #dfe6ef; background: rgba(var(--v2-fg-rgb), .05); border: 1px solid rgba(var(--v2-fg-rgb), .14);
  opacity: 0; animation: hvFade .5s ease .5s forwards; transition: background .2s ease, border-color .2s ease;
}
.hv-intro-skip:hover { background: rgba(var(--v2-fg-rgb), .1); border-color: rgba(var(--v2-fg-rgb), .3); }
.hv-intro-skip:focus-visible { outline: 2px solid var(--v2-teal-hi); outline-offset: 3px; }
.hv-intro-skip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html[dir="ltr"] .hv-intro-skip svg { transform: scaleX(-1); }

/* Power-on states of the screen (only during the intro). */
html.hvi-run .hv-boot {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw;
  background: radial-gradient(40% 50% at 50% 48%, rgba(var(--v2-teal-rgb), .16), transparent 70%), var(--v2-void);
  opacity: 0; transition: opacity .45s ease;
}
html.hvi-run .hv-device.is-power .hv-boot { opacity: 1; }
html.hvi-run .hv-device.is-on .hv-boot { opacity: 0; }
html.hvi-run .hv-device:not(.is-on) .hv-ui { opacity: 0; filter: brightness(1.6); }
html.hvi-run .hv-device:not(.is-power) .hv-monitor { box-shadow: inset 0 0 0 1px rgba(var(--v2-fg-rgb), .07), inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px rgba(var(--v2-shade-rgb), var(--v2-shade-k)), 0 50px 90px -40px rgba(var(--v2-shade-rgb), calc(.95 * var(--v2-shade-k))); }
html.hvi-run .hv-device:not(.is-power) .hv-desk-light { opacity: 0; }
html.hvi-run .hv-desk-light { transition: opacity 1.2s ease; }
/* The DeskKit mark (images/brand/) lighting up on the boot screen. */
.hv-boot-mark { width: 9cqw; height: 9.6cqw; display: grid; place-items: center; filter: drop-shadow(0 0 3cqw rgba(var(--v2-teal-rgb), calc(.35 * var(--v2-glow-k)))); }
.hv-boot-mark svg { width: 100%; height: 100%; overflow: visible; }
.hv-boot-bar { width: 22cqw; height: .7cqw; border-radius: 99px; background: rgba(var(--v2-fg-rgb), .1); overflow: hidden; direction: ltr; }
.hv-boot-bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--v2-teal), #8ff7e8); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
html.hvi-run .hv-boot-bar i { transform: scaleX(0); }
html.hvi-run .hv-device.is-power .hv-boot-bar i { transform: scaleX(1); transition: transform 1s cubic-bezier(.5, 0, .2, 1); }

/* Hero copy waits under the intro, then arrives with the computer.
   It is painted once first (hidden behind the opaque intro, which already
   shows the same headline), and only then held back by .hvi-hold
   (js/home-v2.js, one frame later) — so the page's largest text, the h1,
   counts as painted at first paint instead of after the intro (LCP). */
html.hvi-run.hvi-hold .hv-hero-head > .hv-hero-eyebrow, html.hvi-run.hvi-hold .hv-hero-head > .hv-h1, html.hvi-run.hvi-hold .hv-hero-head > .hv-hero-lead,
html.hvi-run.hvi-hold .hv-hero-actions > .hv-hero-ctas, html.hvi-run.hvi-hold .hv-hero-actions > .hv-shortcuts, html.hvi-run.hvi-hold .hv-hero-light {
  opacity: 0; translate: 0 18px; animation: hvFailsafeShowFull 0s linear 4.6s forwards;
}
html.hvi-run.hvi-hold .hv-hero-light { translate: none; }
@keyframes hvFailsafeShowFull { to { opacity: 1; translate: none; } }
/* The hero copy is named by class (not "> *" / ":nth-child") all through
   the intro: an html-level class toggle then restyles just these few
   elements instead of the whole page — each whole-page restyle was a long
   main-thread task on phones. */
html.hvi-land .hv-intro { opacity: 0; pointer-events: none; transition: opacity .75s ease .12s; }
html.hvi-land .hv-intro-title, html.hvi-land .hv-battery, html.hvi-land .hv-intro-skip { opacity: 0 !important; translate: 0 -16px; transition: opacity .35s ease, translate .5s var(--v2-ease); animation: none; }
html.hvi-land .hv-hero-head > .hv-hero-eyebrow, html.hvi-land .hv-hero-head > .hv-h1, html.hvi-land .hv-hero-head > .hv-hero-lead,
html.hvi-land .hv-hero-actions > .hv-hero-ctas, html.hvi-land .hv-hero-actions > .hv-shortcuts, html.hvi-land .hv-hero-light {
  opacity: 1; translate: none; animation: none;
  transition: opacity .75s var(--v2-ease), translate .85s var(--v2-ease);
}
html.hvi-land .hv-hero-head > .hv-hero-eyebrow { transition-delay: .25s; }
html.hvi-land .hv-hero-head > .hv-h1 { transition-delay: .3s; }
html.hvi-land .hv-hero-head > .hv-hero-lead { transition-delay: .4s; }
html.hvi-land .hv-hero-actions > .hv-hero-ctas { transition-delay: .5s; }
html.hvi-land .hv-hero-actions > .hv-shortcuts { transition-delay: .6s; }
html.hvi-land.hvi-fast .hv-intro { transition-duration: .4s; transition-delay: 0s; }
html.hvi-land.hvi-fast .hv-hero-head > .hv-hero-eyebrow, html.hvi-land.hvi-fast .hv-hero-head > .hv-h1, html.hvi-land.hvi-fast .hv-hero-head > .hv-hero-lead,
html.hvi-land.hvi-fast .hv-hero-actions > .hv-hero-ctas, html.hvi-land.hvi-fast .hv-hero-actions > .hv-shortcuts { transition-delay: .1s !important; transition-duration: .45s; }

@keyframes hvFade { to { opacity: 1; } }
@keyframes hvTitleIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ============================================================== benefits */
.hv-benefits { padding-top: clamp(64px, 8vw, 110px); }
.hv-benefit-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--v2-line); }
.hv-benefit {
  --c: var(--v2-teal-hi);
  position: relative; display: flex; align-items: flex-start; gap: clamp(20px, 2.6vw, 34px);
  padding: clamp(32px, 4vw, 52px) clamp(4px, 3vw, 52px) clamp(32px, 4vw, 52px) 0;
  border-bottom: 1px solid var(--v2-line); overflow: hidden;
}
.hv-benefit:nth-child(odd) { border-inline-end: 1px solid var(--v2-line); padding-inline: 0 clamp(20px, 3.5vw, 56px); }
.hv-benefit:nth-child(even) { padding-inline: clamp(20px, 3.5vw, 56px) 0; }
.hv-benefit::before { /* light sweep along the top hairline */
  content: ""; position: absolute; top: -1px; inset-inline: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--c), transparent); transform: translateX(-100%); opacity: 0;
}
.hv-benefit:hover::before { animation: hvSweep 1.1s var(--v2-ease) forwards; }
@keyframes hvSweep { 0% { transform: translateX(-100%); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }
.hv-benefit::after { /* soft light behind the icon on hover */
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(260px 200px at 100% 40%, color-mix(in srgb, var(--c) 10%, transparent), transparent 70%);
  transition: opacity var(--v2-med) ease;
}
html[dir="ltr"] .hv-benefit::after { background: radial-gradient(260px 200px at 0% 40%, color-mix(in srgb, var(--c) 10%, transparent), transparent 70%); }
.hv-benefit:nth-child(even)::after { background: radial-gradient(260px 200px at calc(100% - 40px) 40%, color-mix(in srgb, var(--c) 10%, transparent), transparent 70%); }
.hv-benefit:hover::after { opacity: 1; }
.hv-benefit { isolation: isolate; }
.hv-benefit-icon {
  position: relative; flex-shrink: 0; width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 14%, transparent), transparent);
  transition: background var(--v2-med) ease, transform var(--v2-med) var(--v2-ease);
}
.hv-benefit-icon svg { width: 88px; height: 88px; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hv-benefit-icon .hv-ring { stroke: rgba(var(--v2-fg-rgb), .12); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke var(--v2-med) ease; }
.hv-benefit-icon .hv-draw { stroke: var(--c); stroke-width: 1.7; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--c) 55%, transparent)); transition: filter var(--v2-med) ease; }
.hv-benefit-text { min-width: 0; padding-top: 10px; }
.hv-benefit-text h3 { margin: 0 0 6px; color: var(--v2-hi); font-size: var(--v2-fs-h3); line-height: 1.3; font-weight: 700; letter-spacing: -.01em; transition: color var(--v2-fast) ease; }
.hv-benefit-text p { margin: 0; color: var(--v2-dim); font-size: 1.04rem; line-height: 1.65; }
.hv-benefit:hover .hv-benefit-icon { background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 28%, transparent), transparent); transform: translateY(-2px); }
.hv-benefit:hover .hv-ring { stroke: color-mix(in srgb, var(--c) 70%, transparent); animation: hvRingDraw 1s var(--v2-ease); }
.hv-benefit:hover .hv-draw { filter: drop-shadow(0 0 9px var(--c)); animation: hvDraw 1s var(--v2-ease); }
@keyframes hvDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hvRingDraw { from { stroke-dashoffset: -1; } to { stroke-dashoffset: 0; } }
/* First view: the icons draw themselves in, one after another. */
html.hv-anim .hv-benefit-list .hv-draw { stroke-dashoffset: 1; }
html.hv-anim .hv-benefit-list.is-in .hv-draw { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--v2-ease) var(--d, 0s), filter var(--v2-med) ease; }
.hv-benefit:nth-child(2) { --d: .15s; }
.hv-benefit:nth-child(3) { --d: .3s; }
.hv-benefit:nth-child(4) { --d: .45s; }

/* ======================================================= far sections
   The last sections are laid out and painted only as they come near the
   viewport (content-visibility) — on a phone that takes a good part of the
   first page render off the main thread. Each keeps its real size once it
   has been shown (auto); the estimates only matter before that. Only
   sections BELOW the use-case scroller: a section above it settling to its
   real size would move the scroller's pinned stage under a reader who
   jumped down the page. */
.home-v2 :is(.hv-how, .hv-faq, .hv-more) { content-visibility: auto; }
.home-v2 .hv-how { contain-intrinsic-size: auto 1500px; }
.home-v2 .hv-faq { contain-intrinsic-size: auto 970px; }
.home-v2 .hv-more { contain-intrinsic-size: auto 680px; }
body.home-v2 > footer.site { content-visibility: auto; contain-intrinsic-size: auto 1000px; }
@media (min-width: 861px) {
  .home-v2 .hv-how { contain-intrinsic-size: auto 1280px; }
  .home-v2 .hv-faq { contain-intrinsic-size: auto 720px; }
  .home-v2 .hv-more { contain-intrinsic-size: auto 400px; }
  body.home-v2 > footer.site { contain-intrinsic-size: auto 560px; }
}

/* ================================================================= tools */
.hv-tools::before { /* soft ceiling light */
  content: ""; position: absolute; inset: 0 0 auto; height: 520px; pointer-events: none;
  background: radial-gradient(50% 100% at 50% 0%, rgba(var(--v2-site-rgb), .08), transparent 70%);
}
.hv-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.hv-card {
  --c: var(--v2-teal);
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 10px;
  padding: 28px 26px 24px; min-height: 236px; box-sizing: border-box; border-radius: 22px; text-decoration: none; color: var(--v2-text);
  background: linear-gradient(180deg, rgba(var(--v2-lift-rgb), .04), rgba(var(--v2-lift-rgb), .012)), var(--v2-card);
  box-shadow: inset 0 0 0 1px rgba(var(--v2-fg-rgb), .07), 0 1px 0 rgba(var(--v2-fg-rgb), .03);
  transition: transform var(--v2-med) var(--v2-ease), box-shadow var(--v2-med) var(--v2-ease), opacity .8s var(--v2-ease) var(--sd, 0s), translate .8s var(--v2-ease) var(--sd, 0s);
  -webkit-tap-highlight-color: transparent;
}
.hv-card::before { /* luminous border */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(145deg, var(--c), color-mix(in srgb, var(--c) 10%, transparent) 38%, transparent 62%, color-mix(in srgb, var(--c) 45%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .32; transition: opacity var(--v2-med) ease;
}
html[dir="ltr"] .hv-card::before { background: linear-gradient(215deg, var(--c), color-mix(in srgb, var(--c) 10%, transparent) 38%, transparent 62%, color-mix(in srgb, var(--c) 45%, transparent)); }
.hv-card::after { /* colour wash */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .45;
  background: radial-gradient(380px 240px at var(--mx, var(--mx0, 88%)) var(--my, 0%), color-mix(in srgb, var(--c) 15%, transparent), transparent 68%);
  transition: opacity var(--v2-med) ease;
}
html[dir="ltr"] .hv-card { --mx0: 12%; }
.hv-card-icon {
  display: grid; place-items: center; flex-shrink: 0; width: 52px; height: 52px; border-radius: 15px; color: var(--c);
  background: color-mix(in srgb, var(--c) 11%, var(--v2-panel));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 38%, transparent), 0 0 26px -10px color-mix(in srgb, var(--c) 80%, transparent);
  transition: transform var(--v2-med) var(--v2-ease), box-shadow var(--v2-med) ease;
}
.hv-card-icon svg { width: 25px; height: 25px; }
.hv-card h3 { margin: 14px 0 0; font-size: var(--v2-fs-h3); line-height: 1.25; font-weight: 700; color: var(--v2-hi); }
.hv-card h4, .hv-card h3.hv-row-h { margin: 0 0 4px; font-size: 1.12rem; line-height: 1.3; font-weight: 700; color: var(--v2-hi); }
.hv-card p { margin: 0; flex: 1; color: var(--v2-dim); font-size: .99rem; line-height: 1.6; }
.hv-card-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--c); font-weight: 600; font-size: .97rem; }
.hv-card:hover, .hv-card:focus-visible { transform: translateY(-4px); box-shadow: inset 0 0 0 1px transparent, 0 26px 50px -30px color-mix(in srgb, var(--c) 70%, transparent), 0 0 0 1px rgba(var(--v2-shade-rgb), calc(.4 * var(--v2-shade-k))); }
.hv-card:hover::before, .hv-card:focus-visible::before { opacity: 1; }
.hv-card:hover::after, .hv-card:focus-visible::after { opacity: 1; }
.hv-card:hover .hv-card-icon, .hv-card:focus-visible .hv-card-icon { transform: rotate(-6deg) scale(1.07); box-shadow: inset 0 0 0 1px var(--c), 0 0 30px -6px var(--c); }
.hv-card:hover .hv-arrow, .hv-card:focus-visible .hv-arrow, .hv-use-cta:hover .hv-arrow, .hv-btn:hover .hv-arrow { translate: calc(var(--dir) * 5px) 0; }
.hv-card:active { transform: translateY(-1px) scale(.99); }
/* Staggered first view (opacity/translate only, so hover's transform stays free). */
html.hv-anim .hv-stagger > .hv-card { opacity: 0; translate: 0 26px; } /* by class, not "> *": see the intro note above */
html.hv-anim .hv-stagger.is-in > .hv-card { opacity: 1; translate: none; }
.hv-stagger > :nth-child(2) { --sd: .07s; }
.hv-stagger > :nth-child(3) { --sd: .14s; }
.hv-stagger > :nth-child(4) { --sd: .21s; }
.hv-stagger > :nth-child(5) { --sd: .28s; }
.hv-stagger > :nth-child(6) { --sd: .35s; }

/* Free tools ---------------------------------------------------------- */
.hv-free {
  position: relative; margin-top: clamp(44px, 6vw, 80px); padding: clamp(20px, 3.4vw, 40px); border-radius: 28px;
  background: radial-gradient(110% 140% at 100% 0%, rgba(var(--v2-teal-rgb), .11), transparent 55%), linear-gradient(180deg, rgba(var(--v2-lift-rgb), .03), rgba(var(--v2-lift-rgb), .008));
  box-shadow: inset 0 0 0 1px rgba(var(--v2-teal-rgb), .2);
}
html[dir="ltr"] .hv-free { background: radial-gradient(110% 140% at 0% 0%, rgba(var(--v2-teal-rgb), .11), transparent 55%), linear-gradient(180deg, rgba(var(--v2-lift-rgb), .03), rgba(var(--v2-lift-rgb), .008)); }
.hv-free-head { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }
.hv-free-badge { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 99px; font-weight: 700; font-size: 13px; color: var(--v2-on-teal); background: var(--v2-teal-hi); box-shadow: 0 0 20px -4px var(--v2-teal); }
.hv-free-h { margin: 0; color: var(--v2-hi); font-weight: 700; font-size: var(--v2-fs-h3); line-height: 1.3; }
.hv-free-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hv-card-row { flex-direction: row; align-items: center; flex-wrap: wrap; min-height: 0; padding: 20px 22px; gap: 14px 18px; }
.hv-card-row .hv-card-icon { width: 48px; height: 48px; }
.hv-card-row-text { flex: 1 1 200px; min-width: 0; }
.hv-card-row .hv-card-cta { margin: 0; margin-inline-start: auto; white-space: nowrap; }

/* Automations ------------------------------------------------------------
   A monthly plan, not a document: one wide row under the six tools (and
   under the signed-in workspace's tiles), the free tools' row layout with
   a "חדש" pill and the plan line. Teal, the Automations app's own accent. */
.hv-card-auto { --c: var(--v2-teal); margin-top: clamp(12px, 1.6vw, 20px); }
html.hv-anim .hv-card-auto.hv-reveal { transition: transform var(--v2-med) var(--v2-ease), box-shadow var(--v2-med) var(--v2-ease), opacity .9s var(--v2-ease), translate .9s var(--v2-ease); }
.hv-card-auto :is(h4, h3.hv-row-h) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hv-auto-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 99px; font-size: 12px; font-weight: 700; line-height: 1; color: var(--v2-on-teal); background: var(--v2-teal-hi); }
.hv-card-auto p.hv-auto-plan { margin-top: 4px; font-size: .9rem; font-weight: 600; color: var(--v2-muted, var(--v2-dim)); }
#dk-home-in .dk-home-dash-auto { margin: calc(-1 * clamp(24px, 3.5vw, 44px)) 0 clamp(40px, 5.5vw, 64px); }
@media (max-width: 599px) { /* the phone layout of the tool cards above it: icon beside, CTA under the text */
  .hv-card-auto { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; align-items: start; padding: 20px 18px; }
  .hv-card-auto .hv-card-icon { grid-row: 1 / span 2; }
  .hv-card-auto .hv-card-cta { grid-column: 2; margin: 0; }
}

/* ============================================================ AI section */
.hv-ai {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center;
  padding-block: clamp(96px, 12vw, 160px); background: var(--v2-void);
  border-block: 1px solid rgba(var(--v2-fg-rgb), .05);
}
@media (min-width: 900px) and (min-height: 620px) { .hv-ai { min-height: 100vh; min-height: 100svh; box-sizing: border-box; } }
.hv-ai-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hv-ai-field { position: absolute; border-radius: 50%; will-change: transform; animation: hvDrift 22s ease-in-out infinite alternate; animation-play-state: paused; }
.hv-ai-field.hv-f1 { width: 120%; height: 70%; left: -30%; top: -12%; background: radial-gradient(50% 50% at 50% 50%, rgba(var(--v2-teal-rgb), .16), transparent 70%); }
.hv-ai-field.hv-f2 { width: 110%; height: 80%; right: -35%; bottom: -25%; background: radial-gradient(50% 50% at 50% 50%, rgba(139, 92, 246, .18), rgba(var(--v2-site-rgb), .06) 45%, transparent 70%); animation-duration: 28s; animation-direction: alternate-reverse; }
@keyframes hvDrift { from { transform: translate3d(-4%, -2%, 0) scale(1); } to { transform: translate3d(6%, 4%, 0) scale(1.12); } }
.hv-ai-dust {
  position: absolute; inset: 0; opacity: .28;
  background-image: radial-gradient(rgba(var(--v2-fg-rgb), .7) 1px, transparent 1.4px), radial-gradient(rgba(var(--v2-teal-hi-rgb), .6) 1px, transparent 1.4px);
  background-size: 140px 140px, 220px 220px; background-position: 0 0, 70px 90px;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent); mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent);
  animation: hvDust 80s linear infinite; animation-play-state: paused;
}
@keyframes hvDust { to { background-position: 140px -280px, -150px -350px; } }
.hv-ai-waves { position: absolute; left: 0; bottom: -2%; width: 100%; height: 34%; opacity: .55;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.hv-wave { fill: none; stroke-width: 1.3; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 420 1240; animation: hvFlow 9s linear infinite; animation-play-state: paused; }
.hv-wave-base { fill: none; stroke: rgba(148, 210, 255, .07); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hv-wave.w1 { stroke: url(#hvWaveA); }
.hv-wave.w2 { stroke: url(#hvWaveB); animation-duration: 12s; animation-delay: -4s; }
.hv-wave.w3 { stroke: url(#hvWaveA); animation-duration: 15s; animation-delay: -9s; opacity: .7; }
.hv-wave.w4 { stroke: url(#hvWaveB); animation-duration: 11s; animation-delay: -2s; opacity: .6; }
@keyframes hvFlow { from { stroke-dashoffset: 1660; } to { stroke-dashoffset: 0; } }
.hv-ai.is-live .hv-ai-field, .hv-ai.is-live .hv-ai-dust, .hv-ai.is-live .hv-wave { animation-play-state: running; }
.hv-ai-bg::after { /* faint static wave lines so the field reads even when paused */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(38% 34% at 50% 54%, rgba(var(--v2-teal-rgb), .10), transparent 70%);
}
.hv-ai-inner { position: relative; text-align: center; max-width: 920px; }
.hv-ai-eyebrow svg { width: 15px; height: 15px; fill: currentColor; filter: drop-shadow(0 0 6px var(--v2-teal)); }
.hv-ai-eyebrow::before { display: none; }
.hv-ai-h {
  margin: 18px 0 0; font-weight: 700; text-wrap: balance;
  font-size: var(--v2-fs-h2-lg); line-height: 1.1; letter-spacing: -.025em;
  color: #fff; background: linear-gradient(180deg, #fff 30%, #a9f2e6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hv-ai-lead { margin: 22px auto 0; max-width: 34em; color: var(--v2-dim); font-size: clamp(1.03rem, .95rem + .4vw, 1.22rem); line-height: 1.7; }
.hv-ai-console {
  position: relative; isolation: isolate; margin: clamp(32px, 5vw, 52px) auto 0; max-width: 780px; text-align: start;
  border-radius: 26px; padding: 8px;
  background: linear-gradient(180deg, rgba(16, 22, 34, .86), rgba(8, 12, 19, .9));
  box-shadow: inset 0 0 0 1px rgba(var(--v2-fg-rgb), .1), 0 40px 90px -40px rgba(var(--v2-shade-rgb), calc(.95 * var(--v2-shade-k))), 0 0 80px -40px rgba(var(--v2-teal-rgb), calc(.5 * var(--v2-glow-k)));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: box-shadow var(--v2-med) ease;
}
.hv-ai-ring { /* slow luminous border, brighter while typing — turned by the compositor, like .hv-neon-ring */
  position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .45; transition: opacity var(--v2-med) ease;
}
.hv-ai-ring > span {
  position: absolute; left: 50%; top: 50%; width: max(140%, 200px); aspect-ratio: 1;
  background: conic-gradient(rgba(var(--v2-teal-rgb), 0) 0deg, rgba(var(--v2-teal-rgb), .9) 60deg, rgba(139, 92, 246, .8) 140deg, rgba(139, 92, 246, 0) 200deg, rgba(var(--v2-site-rgb), .6) 290deg, rgba(var(--v2-teal-rgb), 0) 360deg);
  transform: translate(-50%, -50%); animation: hvSpinRing 12s linear infinite; animation-play-state: paused;
}
.hv-ai.is-live .hv-ai-ring > span { animation-play-state: running; }
.hv-ai-console:focus-within { box-shadow: inset 0 0 0 1px rgba(var(--v2-teal-hi-rgb), .4), 0 0 0 5px rgba(var(--v2-teal-rgb), .1), 0 40px 90px -40px rgba(var(--v2-shade-rgb), var(--v2-shade-k)), 0 0 100px -30px rgba(var(--v2-teal-rgb), calc(.65 * var(--v2-glow-k))); }
.hv-ai-console:focus-within .hv-ai-ring { opacity: 1; }
.home-v2 #dk-home-out .hv-ai-console textarea:focus-visible { outline: none; }
.hv-ai-console textarea {
  display: block; width: 100%; box-sizing: border-box; min-height: 124px; max-height: 220px; resize: none;
  padding: 18px 20px 10px; border: 0; background: transparent; color: var(--v2-hi); caret-color: var(--v2-teal-hi);
  font: 400 18px/1.6 'Heebo', system-ui, sans-serif;
}
.hv-ai-console textarea::placeholder { color: #75819a; }
.hv-ai-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 8px 10px; border-top: 1px solid rgba(var(--v2-fg-rgb), .06); }
.hv-ai-match { --c: var(--v2-teal); margin: 0; display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--v2-dim); font-size: .97rem; visibility: hidden; opacity: 0; translate: 0 4px; transition: opacity var(--v2-fast) ease, translate var(--v2-fast) ease, visibility 0s linear var(--v2-fast); }
.hv-ai-match.is-on { visibility: visible; opacity: 1; translate: none; transition: opacity var(--v2-fast) ease, translate var(--v2-fast) ease; }
.hv-ai-match strong { color: var(--c); font-weight: 700; }
.hv-ai-match-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px 1px var(--c); flex-shrink: 0; }
.hv-ai-submit { flex-shrink: 0; }
.hv-ai-try { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.hv-ai-try-k { color: var(--v2-faint); font-size: 14px; }
.hv-chip {
  min-height: 44px; padding: 0 16px; border-radius: 99px; cursor: pointer;
  font: 500 14.5px/1.2 'Heebo', system-ui, sans-serif; color: #d7deea;
  background: rgba(var(--v2-fg-rgb), .035); border: 1px solid rgba(var(--v2-fg-rgb), .12);
  transition: border-color var(--v2-fast) ease, background-color var(--v2-fast) ease, color var(--v2-fast) ease;
}
.hv-chip:hover { color: var(--v2-hi); border-color: rgba(var(--v2-teal-hi-rgb), .6); background: rgba(var(--v2-teal-rgb), .08); }
.hv-chip:active { background: rgba(var(--v2-teal-rgb), .16); }

/* ======================================================= use-case story */
/* Default — no JS, reduced motion, "stop animations", or a screen too
   short for a panel: a plain vertical stack. js/home-v2.js adds .is-pinned
   when a panel fits: the stage sticks under the header and vertical scroll
   drives the track sideways (transform only), then the page continues. */
.hv-uses { overflow-x: clip; } /* clip, not hidden: keeps position:sticky working */
.hv-uses-top { margin-bottom: clamp(28px, 4vw, 48px); }
.hv-round {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; cursor: pointer; color: var(--v2-hi);
  background: rgba(var(--v2-fg-rgb), .03); border: 1px solid rgba(var(--v2-fg-rgb), .16);
  transition: border-color var(--v2-fast) ease, background-color var(--v2-fast) ease, opacity var(--v2-fast) ease;
}
.hv-round:hover:not(:disabled) { border-color: rgba(var(--v2-teal-hi-rgb), .7); background: rgba(var(--v2-teal-rgb), .08); }
.hv-round:disabled { opacity: .32; cursor: default; }
.hv-round .hv-arrow { width: 20px; height: 20px; }
.hv-uses-track {
  display: grid; gap: clamp(16px, 2.4vw, 28px); box-sizing: border-box;
  max-width: var(--hv-max); margin-inline: auto; padding-inline: var(--hv-pad);
}
.hv-uses-track:focus-visible { outline: 2px solid var(--v2-teal-hi); outline-offset: 4px; border-radius: 8px; }
.hv-uses-bar { display: none; }
.hv-use {
  --a1: var(--v2-teal-hi);
  position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box;
  min-height: clamp(360px, 34vw, 460px); border-radius: var(--v2-r-lg);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "copy art";
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a1) 30%, transparent);
  transition: opacity .6s ease, box-shadow .6s ease;
}

/* Pinned, scroll-driven horizontal story. */
.hv-uses.is-pinned { padding-bottom: 0; }
.hv-uses.is-pinned .hv-uses-top { margin-bottom: 0; }
.hv-uses.is-pinned .hv-uses-pin { height: var(--hv-pin-h, auto); }
.hv-uses.is-pinned .hv-uses-stage {
  position: sticky; top: var(--hv-top, 70px); height: var(--hv-stage-h, 100vh); box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center; gap: clamp(14px, 2.4vh, 26px);
  padding-block: clamp(10px, 2vh, 24px); overflow-x: clip;
}
.hv-uses.is-pinned .hv-uses-track {
  --hv-gut: max(var(--hv-pad), calc((100% - var(--hv-max)) / 2 + var(--hv-pad)));
  display: flex; gap: clamp(14px, 2vw, 24px); max-width: none; margin: 0; padding: 4px var(--hv-gut);
  will-change: transform;
}
.hv-uses.is-pinned .hv-use { flex: 0 0 min(1060px, 86%); min-height: 0; height: var(--hv-panel-h, auto); }
.hv-uses.is-pinned .hv-use:not(.is-current) { opacity: .45; }
.hv-uses.is-pinned .hv-use.is-current { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a1) 40%, transparent), 0 40px 90px -50px color-mix(in srgb, var(--a1) 60%, transparent); }
.hv-uses.is-pinned .hv-uses-bar { display: flex; align-items: center; justify-content: center; gap: 18px; }
.hv-use::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .6; }
.hv-use-copy { grid-area: copy; position: relative; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: clamp(26px, 4vw, 60px); }
.hv-use-art { grid-area: art; position: relative; min-height: 220px; }
.hv-use-idx { display: inline-flex; align-items: center; gap: 10px; font: 600 14px/1 'Space Grotesk', 'Heebo', sans-serif; color: var(--a1); letter-spacing: .12em; }
.hv-use-idx::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .6; }
.hv-use-copy h3 { margin: 4px 0 0; color: var(--v2-hi); font-weight: 700; font-size: var(--v2-fs-h2); line-height: 1.12; letter-spacing: -.02em; }
.hv-use-who { margin: 0; color: var(--a1); font-weight: 600; font-size: 1.04rem; }
.hv-use-what { margin: 0; max-width: 30em; color: var(--v2-dim); font-size: 1.05rem; line-height: 1.65; }
.hv-use-tools { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hv-use-tools a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 99px; text-decoration: none;
  font-weight: 600; font-size: 14px; color: var(--c); background: color-mix(in srgb, var(--c) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 34%, transparent);
  transition: background-color var(--v2-fast) ease, box-shadow var(--v2-fast) ease;
}
.hv-use-tools a:hover { background: color-mix(in srgb, var(--c) 18%, transparent); box-shadow: inset 0 0 0 1px var(--c), 0 0 18px -6px var(--c); }
.hv-use-cta {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; min-height: 50px; padding: 0 24px;
  border-radius: 99px; text-decoration: none; font-weight: 700; font-size: 15.5px; color: var(--v2-bg); background: #fff;
  box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--a1) 90%, transparent);
  transition: background-color var(--v2-fast) ease, transform var(--v2-fast) var(--v2-ease);
}
.hv-use-cta:hover { background: color-mix(in srgb, var(--a1) 25%, #fff); transform: translateY(-1px); }

/* Art direction per panel */
.hv-use-art > * { position: absolute; box-sizing: border-box; transition: transform 1s var(--v2-ease), opacity .8s ease; }
.hv-uses.is-pinned .hv-use:not(.is-current) .hv-use-art > * { opacity: .7; }
.hv-use-art i, .hv-use-art b { display: block; }
.hv-use-biz { --a1: #7cb2ff; background: radial-gradient(80% 90% at 22% 20%, rgba(var(--v2-site-rgb), .3), transparent 62%), radial-gradient(60% 60% at 8% 100%, rgba(var(--v2-invoice-rgb), .2), transparent 62%), linear-gradient(160deg, #0a1122, #06080f 70%); }
html[dir="ltr"] .hv-use-biz { background: radial-gradient(80% 90% at 78% 20%, rgba(var(--v2-site-rgb), .3), transparent 62%), radial-gradient(60% 60% at 92% 100%, rgba(var(--v2-invoice-rgb), .2), transparent 62%), linear-gradient(200deg, #0a1122, #06080f 70%); }
.hv-use-biz::before { background-image: repeating-linear-gradient(135deg, rgba(124, 178, 255, .07) 0 1px, transparent 1px 14px); -webkit-mask-image: radial-gradient(60% 70% at 30% 40%, #000, transparent); mask-image: radial-gradient(60% 70% at 30% 40%, #000, transparent); }
.hv-art-site {
  top: 13%; inset-inline-end: 14%; width: 66%; aspect-ratio: 4 / 3; padding: 4% 5%; display: flex; flex-direction: column; gap: 6%;
  border-radius: 16px; background: linear-gradient(180deg, #0f1830, #0a0f1d); box-shadow: inset 0 0 0 1px rgba(124, 178, 255, .5), 0 30px 60px -30px rgba(var(--v2-shade-rgb), calc(.9 * var(--v2-shade-k))), 0 0 50px -16px rgba(var(--v2-site-rgb), calc(.7 * var(--v2-glow-k)));
  transform: perspective(900px) rotateY(-10deg) rotateX(4deg);
}
html[dir="ltr"] .hv-art-site { transform: perspective(900px) rotateY(10deg) rotateX(4deg); }
.hv-art-site i { height: 6px; border-radius: 99px; background: rgba(var(--v2-fg-rgb), .14); }
.hv-art-site i.b { height: 8px; width: 30%; background: rgba(124, 178, 255, .5); }
.hv-art-site i.h { height: 30%; border-radius: 10px; background: linear-gradient(120deg, rgba(var(--v2-site-rgb), .75), rgba(var(--v2-site-rgb), .15)); }
.hv-art-site i.s { width: 55%; }
.hv-art-site i.g { height: 20%; background: repeating-linear-gradient(90deg, rgba(124, 178, 255, .22) 0 30%, transparent 30% 35%); border-radius: 8px; }
.hv-art-doc { width: 31%; aspect-ratio: 3 / 4; padding: 5%; display: flex; flex-direction: column; gap: 7%; border-radius: 12px; background: linear-gradient(180deg, #141826, #0c0f18); }
.hv-art-doc i { height: 5px; border-radius: 99px; background: rgba(var(--v2-fg-rgb), .16); }
.hv-art-doc i.h { height: 9px; width: 50%; }
.hv-art-doc i.s { width: 60%; }
.hv-art-doc b { margin-top: auto; align-self: flex-end; width: 50%; height: 10px; border-radius: 99px; }
.hv-art-quote { bottom: 10%; inset-inline-start: 10%; transform: rotate(-7deg); box-shadow: inset 0 0 0 1px rgba(var(--v2-quote-rgb), .55), 0 0 40px -14px rgba(var(--v2-quote-rgb), calc(.7 * var(--v2-glow-k))), 0 24px 50px -24px rgba(var(--v2-shade-rgb), var(--v2-shade-k)); }
.hv-art-quote i.h { background: rgba(var(--v2-quote-rgb), .7); }
.hv-art-quote b { background: var(--v2-quote); box-shadow: 0 0 14px -2px var(--v2-quote); }
.hv-art-invoice { bottom: 16%; inset-inline-start: 34%; transform: rotate(5deg); box-shadow: inset 0 0 0 1px rgba(var(--v2-invoice-rgb), .6), 0 0 40px -14px rgba(var(--v2-invoice-rgb), calc(.8 * var(--v2-glow-k))), 0 24px 50px -24px rgba(var(--v2-shade-rgb), var(--v2-shade-k)); }
.hv-art-invoice i.h { background: rgba(var(--v2-invoice-rgb), .7); }
.hv-art-invoice b { background: var(--v2-invoice); box-shadow: 0 0 14px -2px var(--v2-invoice); }
.hv-use-biz.is-current .hv-art-quote { transform: rotate(-9deg) translateY(-6px); }
.hv-use-biz.is-current .hv-art-invoice { transform: rotate(7deg) translateY(-12px); }

.hv-use-career { --a1: #c4a0ff; background: radial-gradient(60% 80% at 50% -10%, rgba(var(--v2-cv-rgb), .34), transparent 65%), radial-gradient(50% 50% at 90% 100%, rgba(var(--v2-site-rgb), .12), transparent 70%), linear-gradient(180deg, #0e0a1e, #07060f 75%); }
.hv-use-career::before { background-image: repeating-linear-gradient(0deg, rgba(196, 160, 255, .06) 0 1px, transparent 1px 22px); -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%); mask-image: linear-gradient(180deg, #000, transparent 80%); }
.hv-use-career .hv-use-art::before { /* spotlight cone */
  content: ""; position: absolute; top: -10%; left: 50%; width: 80%; height: 110%; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(196, 160, 255, .2), transparent 80%); clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
}
.hv-art-cv {
  top: 14%; left: 50%; width: 46%; aspect-ratio: 1 / 1.3; margin-left: -23%; padding: 7%; display: flex; flex-direction: column; gap: 5.5%;
  border-radius: 14px; background: linear-gradient(180deg, #171230, #0e0b1c);
  box-shadow: inset 0 0 0 1px rgba(196, 160, 255, .55), 0 0 60px -16px rgba(var(--v2-cv-rgb), calc(.8 * var(--v2-glow-k))), 0 30px 60px -30px rgba(var(--v2-shade-rgb), var(--v2-shade-k));
}
.hv-art-cv b.a { width: 24%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg, #c4a0ff, #6d3fd6); box-shadow: 0 0 20px -4px var(--v2-cv); }
.hv-art-cv i { height: 6px; border-radius: 99px; background: rgba(var(--v2-fg-rgb), .15); }
.hv-art-cv i.h { height: 10px; width: 64%; background: rgba(196, 160, 255, .75); }
.hv-art-cv i.s { width: 58%; }
.hv-art-badge { top: 18%; inset-inline-start: 18%; width: 64px; height: 64px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(196, 160, 255, .6), 0 0 30px -6px rgba(var(--v2-cv-rgb), calc(.9 * var(--v2-glow-k))); background: radial-gradient(circle, rgba(196, 160, 255, .35) 0 18%, transparent 20%); }
.hv-use-career.is-current .hv-art-cv { transform: translateY(-8px); }

.hv-use-all { --a1: #5ee3f5; background: radial-gradient(70% 80% at 80% 15%, rgba(var(--v2-deck-rgb), .26), transparent 62%), radial-gradient(60% 60% at 20% 100%, rgba(var(--v2-xlsx-rgb), .2), transparent 62%), linear-gradient(200deg, #061418, #050a0d 72%); }
.hv-use-all::before { background-image: radial-gradient(rgba(94, 227, 245, .22) 1px, transparent 1.5px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(60% 70% at 30% 50%, #000, transparent); mask-image: radial-gradient(60% 70% at 30% 50%, #000, transparent); }
.hv-art-slide {
  top: 12%; inset-inline-end: 12%; width: 64%; aspect-ratio: 16 / 9; padding: 5%; display: flex; flex-direction: column; gap: 8%;
  border-radius: 14px; background: linear-gradient(180deg, #0a1d24, #071317); box-shadow: inset 0 0 0 1px rgba(94, 227, 245, .5), 0 0 50px -16px rgba(var(--v2-deck-rgb), calc(.8 * var(--v2-glow-k))), 0 30px 60px -30px rgba(var(--v2-shade-rgb), var(--v2-shade-k));
}
.hv-art-slide i.h { height: 9px; width: 40%; border-radius: 99px; background: rgba(94, 227, 245, .7); }
.hv-art-slide .bars { flex: 1; display: flex; align-items: flex-end; gap: 8%; direction: ltr; }
.hv-art-slide .bars i { flex: 1; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #5ee3f5, rgba(var(--v2-deck-rgb), .2)); height: 40%; transition: height 1s var(--v2-ease); }
.hv-art-slide .bars i:nth-child(2) { height: 65%; }
.hv-art-slide .bars i:nth-child(3) { height: 50%; background: linear-gradient(180deg, var(--v2-xlsx), rgba(var(--v2-xlsx-rgb), .2)); }
.hv-art-slide .bars i:nth-child(4) { height: 85%; background: linear-gradient(180deg, var(--v2-xlsx), rgba(var(--v2-xlsx-rgb), .2)); }
.hv-use-all.is-current .hv-art-slide .bars i:nth-child(1) { height: 52%; }
.hv-use-all.is-current .hv-art-slide .bars i:nth-child(4) { height: 95%; }
.hv-art-sheet {
  bottom: 9%; inset-inline-start: 10%; width: 50%; aspect-ratio: 4 / 2.4; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 2px; padding: 2px;
  border-radius: 10px; background: rgba(var(--v2-xlsx-rgb), .3); box-shadow: 0 0 40px -12px rgba(var(--v2-xlsx-rgb), calc(.8 * var(--v2-glow-k))), 0 24px 50px -24px rgba(var(--v2-shade-rgb), var(--v2-shade-k)); transform: rotate(-4deg);
}
.hv-art-sheet i { background: #08161a; }
.hv-art-sheet i:nth-child(-n+4) { background: #0d2a27; }
.hv-art-sheet i:nth-child(7), .hv-art-sheet i:nth-child(10) { background: linear-gradient(90deg, rgba(var(--v2-xlsx-rgb), .35), #08161a); }
.hv-uses-progress { display: flex; justify-content: center; gap: 8px; }
.hv-uses-progress i { width: 28px; height: 3px; border-radius: 3px; background: rgba(var(--v2-fg-rgb), .16); transition: width var(--v2-med) var(--v2-ease), background-color var(--v2-med) ease; }
.hv-uses-progress i.is-on { width: 56px; background: var(--v2-teal-hi); box-shadow: 0 0 10px -1px var(--v2-teal); }

/* ============================================================== timeline */
.hv-timeline { position: relative; max-width: 1040px; margin: 0 auto; }
.hv-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(56px, 8vw, 104px); }
.hv-step { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(20px, 3.4vw, 48px); align-items: center; }
.hv-line { position: absolute; inset-inline-start: 37px; top: 38px; bottom: 38px; width: 2px; border-radius: 2px; background: rgba(var(--v2-fg-rgb), .08); }
.hv-line-fill { position: absolute; inset: 0; border-radius: inherit; transform-origin: 50% 0; background: linear-gradient(180deg, var(--v2-teal-hi), #6aa8ff 50%, #4ee6a6); box-shadow: 0 0 14px rgba(var(--v2-teal-hi-rgb), calc(.55 * var(--v2-glow-k))); }
.hv-step-marker {
  position: relative; z-index: 1; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  font: 700 21px/1 'Space Grotesk', 'Heebo', sans-serif; color: var(--c); background: #070a11;
  box-shadow: inset 0 0 0 1.5px var(--c), 0 0 0 7px color-mix(in srgb, var(--c) 9%, transparent), 0 0 34px -6px var(--c);
  transition: color .5s ease, box-shadow .6s ease, background-color .5s ease;
}
.hv-step-marker svg { position: absolute; width: 30px; height: 30px; fill: none; stroke: var(--v2-on-teal); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; opacity: 0; }
html.hv-anim .hv-step:not(.is-active) .hv-step-marker { color: var(--v2-faint); box-shadow: inset 0 0 0 1px rgba(var(--v2-fg-rgb), .14), 0 0 0 7px transparent; }
.hv-step-body h3 { margin: 0 0 8px; color: var(--v2-hi); font-weight: 700; font-size: var(--v2-fs-h3); line-height: 1.3; }
.hv-step-body p { margin: 0; color: var(--v2-dim); font-size: 1.05rem; line-height: 1.65; }
.hv-step-visual {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; height: 184px; padding: 18px 20px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(var(--v2-lift-rgb), .045), rgba(var(--v2-lift-rgb), .012)), var(--v2-bg-2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 32%, transparent), 0 24px 60px -36px var(--c);
  transition: box-shadow .6s ease, opacity .8s var(--v2-ease), translate .8s var(--v2-ease);
}
html.hv-anim .hv-step .hv-step-body, html.hv-anim .hv-step .hv-step-visual { opacity: 0; translate: 0 24px; transition: opacity .8s var(--v2-ease), translate .8s var(--v2-ease), box-shadow .6s ease; }
html.hv-anim .hv-step .hv-step-visual { transition-delay: .12s; }
html.hv-anim .hv-step.is-in .hv-step-body, html.hv-anim .hv-step.is-in .hv-step-visual { opacity: 1; translate: none; }
html.hv-anim .hv-step:not(.is-active) .hv-step-visual { box-shadow: inset 0 0 0 1px rgba(var(--v2-fg-rgb), .08); }
.hv-sv-label, .hv-sv-flow > span { align-self: flex-start; display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 99px; font-size: 12.5px; font-weight: 600; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); white-space: nowrap; }
.hv-sv-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.hv-sv-flow > i { width: 22px; height: 1px; background: linear-gradient(90deg, transparent, var(--c)); }
html[dir="rtl"] .hv-sv-flow > i { background: linear-gradient(270deg, transparent, var(--c)); }
.hv-sv-qline { display: block; height: 9px; width: 72%; border-radius: 99px; background: rgba(var(--v2-fg-rgb), .14); }
.hv-sv-qline.s { width: 52%; }
.hv-sv-opts { display: flex; gap: 8px; }
.hv-sv-opts i { width: 60px; height: 26px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(var(--v2-fg-rgb), .14); }
.hv-sv-opts i.on { background: color-mix(in srgb, var(--c) 22%, transparent); box-shadow: inset 0 0 0 1px var(--c), 0 0 14px -4px var(--c); }
.hv-sv-blocks { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1.25fr 1fr; gap: 8px; }
.hv-sv-blocks i { border-radius: 8px; background: rgba(var(--v2-fg-rgb), .07); box-shadow: inset 0 0 0 1px rgba(var(--v2-fg-rgb), .08); transition: opacity .5s ease, transform .6s var(--v2-ease); }
.hv-sv-blocks i.sv-hero { grid-column: 1 / -1; background: linear-gradient(120deg, color-mix(in srgb, var(--c) 55%, transparent), color-mix(in srgb, var(--c) 8%, transparent)); }
html.hv-anim .hv-step:not(.is-active) .hv-sv-blocks i { opacity: 0; transform: scale(.8); }
.hv-sv-blocks i:nth-child(2) { transition-delay: .15s; }
.hv-sv-blocks i:nth-child(3) { transition-delay: .25s; }
.hv-sv-blocks i:nth-child(4) { transition-delay: .35s; }
.hv-sv-site { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 7px; padding: 10px; border-radius: 10px; background: rgba(var(--v2-fg-rgb), .03); box-shadow: inset 0 0 0 1px rgba(var(--v2-fg-rgb), .08); }
.hv-sv-site i { display: block; height: 6px; border-radius: 99px; background: rgba(var(--v2-fg-rgb), .13); }
.hv-sv-site i.bar { width: 30%; background: color-mix(in srgb, var(--c) 50%, transparent); }
.hv-sv-site i.sv-hero { height: 26px; border-radius: 6px; background: linear-gradient(120deg, color-mix(in srgb, var(--c) 45%, transparent), transparent); }
.hv-sv-site i.s { width: 55%; }
.hv-sv-done { position: absolute; bottom: 16px; inset-inline-end: 16px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--c); box-shadow: 0 0 26px -2px var(--c); transition: transform .6s cubic-bezier(.3, 1.6, .5, 1), opacity .3s ease; }
.hv-sv-done svg { width: 24px; height: 24px; fill: none; stroke: var(--v2-on-teal); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
html.hv-anim .hv-step-last:not(.is-done) .hv-sv-done { transform: scale(0); opacity: 0; }
/* Completion: the last marker fills and draws a check. */
.hv-step-last.is-done .hv-step-marker { background: var(--c); color: transparent; box-shadow: inset 0 0 0 1.5px var(--c), 0 0 0 7px color-mix(in srgb, var(--c) 14%, transparent), 0 0 46px -4px var(--c); }
.hv-step-last.is-done .hv-step-marker svg { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .6s var(--v2-ease) .15s, opacity .2s ease; }
.hv-step-last .hv-step-marker::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--c); opacity: 0; pointer-events: none; }
.hv-step-last.is-done .hv-step-marker::after { animation: hvRing 1s ease-out .1s; }
.hv-how-cta { margin-top: clamp(56px, 7vw, 96px); text-align: center; }

/* ===================================================== reveal-on-scroll */
html.hv-anim .hv-reveal { opacity: 0; translate: 0 26px; transition: opacity .9s var(--v2-ease), translate .9s var(--v2-ease); }
html.hv-anim .hv-reveal.is-in { opacity: 1; translate: none; }
html.hv-anim .hv-benefit.hv-reveal:nth-child(2) { transition-delay: .08s; }
html.hv-anim .hv-benefit.hv-reveal:nth-child(3) { transition-delay: .16s; }
html.hv-anim .hv-benefit.hv-reveal:nth-child(4) { transition-delay: .24s; }

/* ============================================================ responsive */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hv-shortcuts { gap: 8px; }
  .hv-neon { gap: 8px; padding: 0 10px; font-size: 14px; }
  .hv-neon-icon { width: 30px; height: 30px; }
}
@media (max-width: 1023px) {
  .hv-hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "actions" "visual"; row-gap: clamp(28px, 5vw, 44px); }
  .hv-trust { text-align: center; }
  .hv-hero-eyebrow::before { display: none; }
  .hv-hero-head, .hv-hero-actions { align-self: auto; }
  .hv-hero-head { text-align: center; }
  .hv-hero-lead { margin-inline: auto; }
  .hv-hero-ctas { justify-content: center; margin-top: 0; }
  .hv-shortcuts { margin-inline: auto; max-width: 620px; }
  .hv-device { max-width: 560px; }
  .hv-hero-light { background: radial-gradient(60% 40% at 50% 52%, rgba(var(--v2-teal-rgb), .14), transparent 70%), radial-gradient(60% 30% at 50% 70%, rgba(var(--v2-site-rgb), .12), transparent 70%); }
  html[dir="ltr"] .hv-hero-light { transform: none; }
  .hv-hero-light::after { -webkit-mask-image: radial-gradient(60% 40% at 50% 50%, #000, transparent 75%); mask-image: radial-gradient(60% 40% at 50% 50%, #000, transparent 75%); }
  .hv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hv-uses.is-pinned .hv-use { flex-basis: 88%; }
}
@media (max-width: 860px) {
  .hv-benefit-list { grid-template-columns: minmax(0, 1fr); }
  .hv-benefit:nth-child(n) { border-inline-end: 0; padding-inline: 0; }
  .hv-step { grid-template-columns: 60px minmax(0, 1fr); align-items: start; column-gap: 20px; row-gap: 18px; }
  .hv-step-visual { grid-column: 2; }
  .hv-step-marker { width: 60px; height: 60px; font-size: 18px; }
  .hv-line { inset-inline-start: 29px; top: 30px; bottom: 30px; }
  .hv-step-body { padding-top: 10px; }
}
@media (max-width: 767px) {
  .hv-free-grid { grid-template-columns: minmax(0, 1fr); }
  .hv-use { grid-template-columns: minmax(0, 1fr); grid-template-areas: "art" "copy"; grid-template-rows: auto 1fr; min-height: 0; }
  .hv-use-art { min-height: 0; height: clamp(190px, 52vw, 260px); }
  .hv-use-copy { justify-content: flex-start; padding-top: 4px; }
  .hv-uses.is-pinned .hv-use { flex-basis: 88%; }
  .hv-uses.is-pinned .hv-use-art { height: clamp(110px, 19vh, 220px); }
  .hv-uses.is-pinned .hv-use-copy { gap: 8px; padding: 6px 20px 20px; }
  .hv-uses.is-pinned .hv-use-what { font-size: .97rem; line-height: 1.55; }
  .hv-uses.is-pinned .hv-use-tools { margin-top: 2px; }
  .hv-uses.is-pinned .hv-use-cta { margin-top: 6px; min-height: 46px; }
  .hv-uses.is-pinned .hv-round { width: 44px; height: 44px; }
  .hv-art-badge { width: 48px; height: 48px; }
  .hv-ai-row { flex-direction: column; align-items: stretch; }
  .hv-ai-match { justify-content: center; }
  .hv-ai-submit { width: 100%; }
  .hv-ai-try-k { flex-basis: 100%; text-align: center; }
  /* Intro: headline on top, the computer centred, battery beneath it. */
  .hv-intro-row { flex-direction: column; gap: clamp(18px, 3.5vh, 30px); }
  .hv-intro-slot { width: min(88vw, 520px, calc((100vh - 360px) / .79)); width: min(88vw, 520px, calc((100svh - 360px) / .79)); }
  .hv-battery { flex-direction: row; gap: 12px; }
  .hv-battery-cap { order: 0; width: 6px; height: 18px; margin: 0 0 0 -12px; border-radius: 0 3px 3px 0; }
  .hv-battery-shell { width: 112px; height: 46px; border-radius: 12px; }
  .hv-battery-fill { transform-origin: 0 50%; transform: scaleX(var(--p)); border-radius: 7px; }
  .hv-battery-shell::after { border-radius: 17px; }
  .hv-battery-pct { margin-inline-start: 4px; }
}
@media (max-width: 599px) {
  .hv-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hv-cards .hv-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 16px; row-gap: 4px; align-items: start; min-height: 0; padding: 20px 18px; }
  .hv-cards .hv-card .hv-card-icon { grid-row: 1 / span 3; width: 48px; height: 48px; }
  .hv-cards .hv-card h3 { margin: 2px 0 0; }
  .hv-cards .hv-card .hv-card-cta { margin-top: 6px; }
  .hv-btn { padding: 0 22px; }
  .hv-hero-ctas .hv-btn { flex: 1 1 auto; }
  .hv-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hv-neon { min-height: 56px; }
}
@media (max-width: 380px) {
  .hv-neon { gap: 9px; padding: 0 10px; font-size: 14px; }
  .hv-neon-icon { width: 30px; height: 30px; }
  .hv-card-row .hv-card-cta { margin-inline-start: 0; }
}
@media (max-height: 560px) and (max-width: 1023px) {
  .hv-intro-title { font-size: 1.5rem; }
}

/* ================================================ motion preferences */
@media (prefers-reduced-motion: reduce) {
  .home-v2 #dk-home-out *, .home-v2 #dk-home-out *::before, .home-v2 #dk-home-out *::after {
    animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important;
  }
  .hv-uses-track { scroll-behavior: auto; }
}
html.dka-still .home-v2 .hv-neon-ring > span, html.dka-still .home-v2 .hv-ai-ring > span { animation: none !important; }
html.dka-still .home-v2 .hv-ai-field, html.dka-still .home-v2 .hv-ai-dust, html.dka-still .home-v2 .hv-wave { animation: none !important; }

/* Accessibility panel's contrast modes: gradient-filled headings become
   plain text in whatever colour the mode sets. */
html:is(.dka-contrast-dark, .dka-contrast-light) .home-v2 :is(.hv-h1, .hv-ai-h, .hv-intro-title) { background: none; -webkit-text-fill-color: currentColor; }

/* ============================================ light theme ("מצב בהיר")
   Tokens come from css/theme-v2.css (html.dk-light). Here: the homepage's
   own art — an aluminium computer with a daylight screen, pastel light
   fields instead of neon fog, white cards with soft layered shadows.
   Same layout and motion as the dark page. */
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-h1,
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-intro-title { color: #0b1020; background-image: linear-gradient(180deg, #0b1020 40%, #3b4763); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-ai-h { color: #0b1020; background-image: linear-gradient(180deg, #0b1020 30%, #0f766e); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-hero-light {
  background:
    radial-gradient(42% 52% at 24% 46%, rgba(13, 148, 136, .10), transparent 70%),
    radial-gradient(38% 46% at 12% 78%, rgba(26, 102, 216, .08), transparent 70%),
    radial-gradient(40% 40% at 85% 10%, rgba(124, 58, 237, .05), transparent 70%);
}
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-hero-light::after { background-image: linear-gradient(rgba(11, 16, 32, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 16, 32, .05) 1px, transparent 1px); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-btn-ghost { background: #fff; box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .14), 0 1px 2px rgba(15, 23, 42, .05); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-btn-ghost:hover { background: #f6f8fb; box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .26), 0 6px 16px -8px rgba(15, 23, 42, .2); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-btn-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(15, 23, 42, .12), 0 12px 28px -12px rgba(13, 148, 136, .8); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 4px rgba(15, 23, 42, .12), 0 16px 34px -12px rgba(13, 148, 136, .85); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-btn-primary::after { background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-neon { background: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, rgba(11, 16, 32, .06)), 0 1px 2px rgba(15, 23, 42, .04), 0 6px 16px -10px rgba(15, 23, 42, .16); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-neon:is(:hover, :focus-visible) { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 8%, #fff), #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent), 0 14px 28px -16px color-mix(in srgb, var(--c) 70%, transparent); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-neon:hover .hv-neon-icon { box-shadow: inset 0 0 0 1px var(--c), 0 6px 14px -6px var(--c); }

/* The computer: brushed aluminium, a daylight screen. */
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-monitor {
  background: linear-gradient(155deg, #ffffff 0%, #eef1f6 22%, #e2e6ee 60%, #f1f3f7 100%);
  box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .08), inset 0 1px 0 #fff, 0 1px 2px rgba(15, 23, 42, .08),
    0 40px 80px -36px rgba(15, 23, 42, .35), 0 0 100px -40px rgba(13, 148, 136, .35);
}
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-monitor::after { background: linear-gradient(90deg, transparent, rgba(11, 16, 32, .12), transparent); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-screen { background: #f4f6fa; box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .12); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-ui {
  background:
    radial-gradient(70% 70% at 78% 0%, rgba(13, 148, 136, .10), transparent 62%),
    radial-gradient(60% 60% at 0% 100%, rgba(26, 102, 216, .08), transparent 62%),
    linear-gradient(180deg, #ffffff, #f3f6fb);
}
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-ui-logo { background-image: url("../images/brand/deskkit-mark-light.svg"); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-ui-url { background: rgba(11, 16, 32, .05); color: #5a6377; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-ui-side { background: rgba(11, 16, 32, .02); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-ui-tile { background: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, rgba(11, 16, 32, .06)), 0 2.4cqw 3.4cqw -2cqw color-mix(in srgb, var(--c) 45%, transparent); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-ui-tile i { background: rgba(11, 16, 32, .09); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-ui-tile-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 70%, #fff), color-mix(in srgb, var(--c) 18%, #fff)); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-ui-tile-avatar { background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 35%, #fff)); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-ui-tile-total { box-shadow: none; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-ui-cta { box-shadow: 0 1cqw 2.4cqw -1cqw rgba(13, 148, 136, .8); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-glass { background: linear-gradient(116deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .12) 26%, transparent 40%); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-neck { background: linear-gradient(90deg, #c9cfd9, #eef1f6 42%, #ffffff 50%, #dfe3eb 72%, #c4cad4); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-foot { background: linear-gradient(180deg, #f6f7fa, #d3d8e1); box-shadow: inset 0 1px 0 #fff, 0 1.6cqw 3cqw -.4cqw rgba(15, 23, 42, .3); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-desk-light { background: radial-gradient(50% 50% at 50% 50%, rgba(13, 148, 136, .14), rgba(26, 102, 216, .05) 48%, transparent 72%); }

/* The intro: a bright studio instead of a dark room. */
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light).hvi-run .hv-intro { background: #f4f6fa; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-intro-beam { background: radial-gradient(50% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .3) 55%, transparent 80%); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-intro-floor { background-image: linear-gradient(rgba(13, 148, 136, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(13, 148, 136, .16) 1px, transparent 1px); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-battery-cap { background: rgba(11, 16, 32, .3); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-battery-shell { border-color: rgba(11, 16, 32, .28); background: #fff; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-battery-fill { background: linear-gradient(0deg, #0b6f66, #0d9488 45%, #2dd4bf); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-battery-check { stroke: #fff; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-battery-pct { color: #384055; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-intro-skip { color: #1c2335; background: #fff; box-shadow: 0 2px 8px -2px rgba(15, 23, 42, .15); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light).hvi-run .hv-boot { background: radial-gradient(40% 50% at 50% 48%, rgba(13, 148, 136, .10), transparent 70%), #fbfcfe; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light).hvi-run .hv-device:not(.is-power) .hv-monitor { box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .08), 0 40px 80px -36px rgba(15, 23, 42, .35); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light).hvi-run .hv-device:not(.is-on) .hv-ui { filter: brightness(1.05); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-boot-bar { background: rgba(11, 16, 32, .08); }

/* Benefits, tools, free tools: white cards, soft lift, colour on hover. */
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-benefit-icon .hv-ring { stroke: rgba(11, 16, 32, .12); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-benefit-icon .hv-draw { filter: none; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-benefit:hover .hv-draw { filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--c) 40%, transparent)); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-tools::before { background: radial-gradient(50% 100% at 50% 0%, rgba(26, 102, 216, .05), transparent 70%); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-card { box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .07), 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -16px rgba(15, 23, 42, .18); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-card::before { opacity: .45; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-card::after { opacity: .35; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-card:is(:hover, :focus-visible) { box-shadow: inset 0 0 0 1px transparent, 0 26px 50px -28px color-mix(in srgb, var(--c) 55%, transparent), 0 2px 6px rgba(15, 23, 42, .05); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-card-icon { background: color-mix(in srgb, var(--c) 9%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 28%, transparent); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-card:is(:hover, :focus-visible) .hv-card-icon { box-shadow: inset 0 0 0 1px var(--c), 0 8px 18px -8px var(--c); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-free { background: radial-gradient(110% 140% at 100% 0%, rgba(13, 148, 136, .08), transparent 55%), #fff; box-shadow: inset 0 0 0 1px rgba(13, 148, 136, .22), 0 10px 30px -18px rgba(15, 23, 42, .2); }
html[dir="ltr"].dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-free { background: radial-gradient(110% 140% at 0% 0%, rgba(13, 148, 136, .08), transparent 55%), #fff; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-free-badge { box-shadow: none; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-free .hv-card { background: #fbfcfe; }

/* AI section: a soft daylight stage with pastel light fields. */
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-ai { background: linear-gradient(180deg, #f1f4fa, #eef1f8); border-block-color: rgba(11, 16, 32, .06); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-ai-field.hv-f1 { background: radial-gradient(50% 50% at 50% 50%, rgba(45, 212, 191, .22), transparent 70%); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-ai-field.hv-f2 { background: radial-gradient(50% 50% at 50% 50%, rgba(167, 139, 250, .24), rgba(96, 165, 250, .08) 45%, transparent 70%); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-ai-dust { opacity: .35; background-image: radial-gradient(rgba(13, 148, 136, .5) 1px, transparent 1.4px), radial-gradient(rgba(124, 58, 237, .35) 1px, transparent 1.4px); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-wave-base { stroke: rgba(26, 102, 216, .1); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-ai-bg::after { background: radial-gradient(38% 34% at 50% 54%, rgba(255, 255, 255, .7), transparent 70%); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-ai-eyebrow svg { filter: none; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-ai-console {
  background: rgba(255, 255, 255, .86);
  box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .08), 0 2px 6px rgba(15, 23, 42, .05), 0 40px 80px -40px rgba(15, 23, 42, .35), 0 0 80px -40px rgba(13, 148, 136, .45);
}
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-ai-console:focus-within { box-shadow: inset 0 0 0 1px rgba(15, 118, 110, .45), 0 0 0 5px rgba(13, 148, 136, .12), 0 40px 80px -40px rgba(15, 23, 42, .35); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-ai-console textarea::placeholder { color: #6b7488; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-ai-match-dot { box-shadow: 0 0 6px var(--c); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-chip { color: #2a3247; background: rgba(255, 255, 255, .8); border-color: rgba(11, 16, 32, .12); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-chip:hover { color: #0b1020; border-color: rgba(15, 118, 110, .5); background: #fff; }

/* Use cases: pastel daylight panels; the art turns into white paper with tinted rings. */
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-round { background: #fff; box-shadow: 0 2px 8px -2px rgba(15, 23, 42, .12); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-use { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a1) 22%, rgba(11, 16, 32, .05)), 0 1px 2px rgba(15, 23, 42, .04); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-uses.is-pinned .hv-use.is-current { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a1) 30%, transparent), 0 40px 80px -50px color-mix(in srgb, var(--a1) 55%, transparent); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-use-cta { color: #fff; background: #0b1020; box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--a1) 80%, transparent); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-use-cta:hover { background: color-mix(in srgb, var(--a1) 30%, #0b1020); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-use-biz { --a1: #1a66d8; background: radial-gradient(80% 90% at 22% 20%, rgba(96, 165, 250, .28), transparent 62%), radial-gradient(60% 60% at 8% 100%, rgba(244, 114, 182, .18), transparent 62%), linear-gradient(160deg, #f3f7ff, #fbfcff 70%); }
html[dir="ltr"].dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-use-biz { background: radial-gradient(80% 90% at 78% 20%, rgba(96, 165, 250, .28), transparent 62%), radial-gradient(60% 60% at 92% 100%, rgba(244, 114, 182, .18), transparent 62%), linear-gradient(200deg, #f3f7ff, #fbfcff 70%); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-use-biz::before { background-image: repeating-linear-gradient(135deg, rgba(26, 102, 216, .06) 0 1px, transparent 1px 14px); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-art-site { background: #fff; box-shadow: inset 0 0 0 1px rgba(26, 102, 216, .3), 0 30px 60px -30px rgba(15, 23, 42, .35), 0 0 40px -18px rgba(26, 102, 216, .5); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-art-site i { background: rgba(11, 16, 32, .08); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-art-site i.b { background: rgba(26, 102, 216, .55); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-art-site i.h { background: linear-gradient(120deg, rgba(59, 130, 246, .7), rgba(147, 197, 253, .25)); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-art-site i.g { background: repeating-linear-gradient(90deg, rgba(26, 102, 216, .14) 0 30%, transparent 30% 35%); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-art-doc { background: #fff; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-art-doc i { background: rgba(11, 16, 32, .1); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-art-quote { box-shadow: inset 0 0 0 1px rgba(183, 121, 31, .45), 0 24px 44px -24px rgba(15, 23, 42, .4), 0 0 30px -14px rgba(234, 179, 8, .6); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-art-quote i.h { background: rgba(217, 160, 30, .75); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-art-invoice { box-shadow: inset 0 0 0 1px rgba(219, 39, 119, .4), 0 24px 44px -24px rgba(15, 23, 42, .4), 0 0 30px -14px rgba(236, 72, 153, .6); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-art-invoice i.h { background: rgba(219, 39, 119, .65); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-art-doc b { box-shadow: none; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-use-career { --a1: #7c3aed; background: radial-gradient(60% 80% at 50% -10%, rgba(167, 139, 250, .32), transparent 65%), radial-gradient(50% 50% at 90% 100%, rgba(96, 165, 250, .12), transparent 70%), linear-gradient(180deg, #f6f3ff, #fcfbff 75%); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-use-career::before { background-image: repeating-linear-gradient(0deg, rgba(124, 58, 237, .05) 0 1px, transparent 1px 22px); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-use-career .hv-use-art::before { background: linear-gradient(180deg, rgba(255, 255, 255, .9), transparent 80%); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-art-cv { background: #fff; box-shadow: inset 0 0 0 1px rgba(124, 58, 237, .3), 0 0 50px -20px rgba(124, 58, 237, .55), 0 30px 60px -30px rgba(15, 23, 42, .35); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-art-cv b.a { background: linear-gradient(135deg, #a78bfa, #6d28d9); box-shadow: 0 6px 14px -6px #7c3aed; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-art-cv i { background: rgba(11, 16, 32, .09); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-art-cv i.h { background: rgba(124, 58, 237, .6); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-art-badge { background: radial-gradient(circle, rgba(124, 58, 237, .4) 0 18%, #fff 20%); box-shadow: inset 0 0 0 1px rgba(124, 58, 237, .4), 0 10px 24px -10px rgba(124, 58, 237, .6); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-use-all { --a1: #0e7490; background: radial-gradient(70% 80% at 80% 15%, rgba(34, 211, 238, .24), transparent 62%), radial-gradient(60% 60% at 20% 100%, rgba(52, 211, 153, .2), transparent 62%), linear-gradient(200deg, #effbfc, #fafefd 72%); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-use-all::before { background-image: radial-gradient(rgba(14, 116, 144, .18) 1px, transparent 1.5px); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-art-slide { background: #fff; box-shadow: inset 0 0 0 1px rgba(14, 116, 144, .28), 0 0 40px -18px rgba(8, 145, 178, .55), 0 30px 60px -30px rgba(15, 23, 42, .35); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-art-slide i.h { background: rgba(8, 145, 178, .65); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-art-slide .bars i { background: linear-gradient(180deg, #22d3ee, rgba(34, 211, 238, .18)); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-art-slide .bars i:is(:nth-child(3), :nth-child(4)) { background: linear-gradient(180deg, #10b981, rgba(16, 185, 129, .18)); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-art-sheet { background: rgba(16, 185, 129, .35); box-shadow: 0 0 30px -14px rgba(16, 185, 129, .7), 0 24px 44px -24px rgba(15, 23, 42, .4); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-art-sheet i { background: #fff; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-art-sheet i:nth-child(-n+4) { background: #dcf5ea; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-art-sheet i:is(:nth-child(7), :nth-child(10)) { background: linear-gradient(90deg, rgba(16, 185, 129, .3), #fff); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-uses-progress i { background: rgba(11, 16, 32, .14); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-uses-progress i.is-on { background: var(--v2-teal); box-shadow: none; }

/* Timeline */
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-line-fill { background: linear-gradient(180deg, #14b8a6, #3b82f6 50%, #10b981); box-shadow: 0 0 10px rgba(13, 148, 136, .35); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-step-marker { background: #fff; box-shadow: inset 0 0 0 1.5px var(--c), 0 0 0 7px color-mix(in srgb, var(--c) 9%, transparent), 0 10px 24px -10px var(--c); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light).hv-anim .hv-step:not(.is-active) .hv-step-marker { box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .14), 0 0 0 7px transparent; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-step-last.is-done .hv-step-marker { background: var(--c); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 :is(.hv-step-marker, .hv-sv-done) svg { stroke: #fff; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-step-visual { background: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 26%, rgba(11, 16, 32, .06)), 0 24px 50px -34px color-mix(in srgb, var(--c) 70%, transparent); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light).hv-anim .hv-step:not(.is-active) .hv-step-visual { box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .08), 0 8px 20px -16px rgba(15, 23, 42, .2); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-sv-done { box-shadow: 0 8px 18px -6px var(--c); }
/* The steps' colours are inline (--c on each <li>): deeper siblings here. */
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-step:nth-child(1) { --c: #0f766e !important; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-step:nth-child(2) { --c: #1a66d8 !important; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-step:nth-child(3) { --c: #047857 !important; }

/* ======================================================== safe areas
   In the installed app the header grows by the status-bar strip
   (--dk-safe-top, css/style.css): the first screen subtracts it too, and
   the boot intro keeps its title and skip button clear of the status bar
   and the home indicator. */
@media (min-width: 1024px) and (min-height: 700px) {
  .hv-hero { min-height: calc(100vh - 70px - var(--dk-safe-top)); min-height: calc(100svh - 70px - var(--dk-safe-top)); }
}
.hv-intro-stage { padding-top: calc(clamp(28px, 6vh, 70px) + var(--dk-safe-top)); padding-bottom: calc(clamp(64px, 9vh, 90px) + var(--dk-safe-bottom)); }

/* ================================================== tool groups (#tools)
   Four groups instead of a tile per tool: each lists its real tools (their
   public pages) and an honest price line. Same card language as before. */
.hv-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.hv-cat { min-height: 0; }
.hv-cat:hover, .hv-cat:focus-within { transform: none; }
.hv-cat h3 { margin-top: 6px; }
.hv-cat > p:not(.hv-cat-price) { flex: 0 0 auto; }
.hv-cat-links { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.hv-cat-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: 12px;
  padding-block: 8px; line-height: 1.3;
  text-decoration: none; font-weight: 600; color: var(--v2-hi); background: color-mix(in srgb, var(--c) 7%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 28%, transparent);
  transition: background-color var(--v2-fast) ease, box-shadow var(--v2-fast) ease;
}
.hv-cat-links a .hv-arrow { color: var(--c); }
.hv-cat-links a:hover, .hv-cat-links a:focus-visible { background: color-mix(in srgb, var(--c) 15%, transparent); box-shadow: inset 0 0 0 1px var(--c); }
.hv-cat-links a:hover .hv-arrow { translate: calc(var(--dir) * 4px) 0; }
.hv-card p.hv-cat-price { flex: 0 0 auto; margin-top: 8px; font-size: .92rem; color: var(--v2-text-2, var(--v2-dim)); }
/* Six groups: three across on wide screens. The AI group has no single
   tool colour of its own: it borrows the decks' blue. */
@media (min-width: 1100px) { .hv-cats-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hv-cat-ai { --c: var(--v2-deck); }
/* "What is DeskKit?": a short plain answer right under the hero. */
.hv-what { padding-bottom: 0; }
.hv-what .hv-head { margin-bottom: 0; }
.hv-what .hv-lead + .hv-lead { margin-top: 12px; }
.hv-cats-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: clamp(22px, 3vw, 34px) 0 0; }
.hv-cats-more a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--v2-teal-hi); font-weight: 600; text-decoration: none; }
.hv-cats-more a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* What's free and what's paid ---------------------------------------- */
.hv-price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.hv-price { padding: 24px 24px 22px; border-radius: 20px; background: linear-gradient(180deg, rgba(var(--v2-lift-rgb), .04), rgba(var(--v2-lift-rgb), .012)), var(--v2-card); box-shadow: inset 0 0 0 1px rgba(var(--v2-fg-rgb), .08); }
.hv-price h3 { margin: 0 0 8px; color: var(--v2-hi); font-size: 1.15rem; }
.hv-price p { margin: 0; color: var(--v2-dim); line-height: 1.65; }
.hv-price:first-child { box-shadow: inset 0 0 0 1px rgba(var(--v2-teal-rgb), .35); }

/* FAQ ------------------------------------------------------------------ */
.hv-faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; max-width: 1100px; margin: 0 auto; }
.home-v2 .hv-faq-item { background: var(--v2-card); border: 0; border-radius: 14px; padding: 2px 18px; box-shadow: inset 0 0 0 1px rgba(var(--v2-fg-rgb), .08); }
.home-v2 .hv-faq-item summary { min-height: 52px; color: var(--v2-hi); font-weight: 600; }
.home-v2 .hv-faq-item summary::after { color: var(--v2-dim); }
.home-v2 .hv-faq-item p { color: var(--v2-dim); font-size: 15px; }
.home-v2 .hv-faq-item[open] { box-shadow: inset 0 0 0 1px rgba(var(--v2-teal-rgb), .35); }

/* Templates and guides strip ------------------------------------------- */
.hv-more { padding-top: 0; }
.hv-more-h { margin: 0 0 18px; text-align: center; color: var(--v2-hi); font-size: var(--v2-fs-h3); }
.hv-more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; max-width: 1000px; margin: 0 auto; }
.hv-more-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hv-more-list a { display: inline-flex; align-items: center; min-height: 40px; color: var(--v2-text-2, var(--v2-text)); text-decoration: none; }
.hv-more-list a:hover { color: var(--v2-teal-hi); text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 860px) {
  .hv-cats, .hv-price-grid, .hv-faq-list { grid-template-columns: minmax(0, 1fr); }
  .hv-more-grid { grid-template-columns: minmax(0, 1fr); text-align: center; }
}

html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 :is(.hv-price, .hv-faq-item) { background: #fff; box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .08), 0 1px 2px rgba(15, 23, 42, .04), 0 10px 24px -18px rgba(15, 23, 42, .25); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) .home-v2 .hv-cat-links a { color: #0b1020; }

/* Quotes from users (index.html #quotes, js/testimonials.js). */
.hv-quote-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.hv-quote {
  display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 18px; border-radius: 18px; min-width: 0;
  background: rgba(var(--v2-fg-rgb, 255, 255, 255), .03); box-shadow: inset 0 0 0 1px var(--v2-line, rgba(255, 255, 255, .1));
}
.hv-quote-stars { color: #ffd25e; letter-spacing: 2px; font-size: 15px; }
html.hv-light .hv-quote-stars, html.dk-light .hv-quote-stars { color: #b07d00; }
.hv-quote-text { margin: 0; font-size: 16px; line-height: 1.6; color: var(--v2-text, #eef2f9); overflow-wrap: anywhere; }
.hv-quote-who { margin: auto 0 0; font-size: 13px; color: var(--v2-dim, #a6b0c2); }