/* Heedlight's own site (heedlight.com). Standalone: it doesn't share the app's
   Tailwind build, so the product site can look like itself. */

@font-face { font-display: swap; font-family: "Geist"; font-weight: 400; src: url("/assets/geist-latin-400-normal-51bc737d.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "Geist"; font-weight: 500; src: url("/assets/geist-latin-500-normal-a8898f66.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "Geist"; font-weight: 600; src: url("/assets/geist-latin-600-normal-1cdc0eb8.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "Geist Mono"; font-weight: 400; src: url("/assets/geist-mono-latin-400-normal-a29b1bf1.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "Newsreader"; font-weight: 400; src: url("/assets/newsreader-latin-400-normal-a1bd2648.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "Newsreader"; font-weight: 500; src: url("/assets/newsreader-latin-500-normal-9ca2106a.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "Newsreader"; font-weight: 600; src: url("/assets/newsreader-latin-600-normal-b16b95ed.woff2") format("woff2"); }

:root {
  --hl-ink: #13233a;
  --hl-ink-2: #34445b;
  --hl-muted: #5f6b7b;
  --hl-paper: #fbf8f2;
  --hl-paper-2: #f3eee3;
  --hl-card: #ffffff;
  --hl-line: #e5ddcf;
  --hl-line-2: #d6ccba;
  --hl-amber: #f2913a;
  --hl-amber-soft: #ffd58a;
  --hl-amber-ink: #a8560f;
  --hl-cream: #f7f2e8;
  --hl-teal: #1f7a6b;
  --hl-teal-soft: #dcefe9;
  --hl-rose: #b4483c;
  --hl-night: #0d1929;
  --hl-night-2: #172a44;
  --hl-radius: 18px;
  --hl-shadow: 0 1px 2px rgb(19 35 58 / 6%), 0 12px 32px -12px rgb(19 35 58 / 18%);
  --hl-shadow-lg: 0 2px 4px rgb(19 35 58 / 6%), 0 40px 80px -30px rgb(19 35 58 / 35%);
  --hl-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --hl-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --hl-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --hl-wrap: 1180px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html:has(body.hl) { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body.hl {
  margin: 0;
  background: var(--hl-paper);
  color: var(--hl-ink-2);
  font: 400 17px/1.6 var(--hl-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* Base rules carry no weight (:where) so component classes always win. */
:where(.hl) img, :where(.hl) svg { display: block; max-width: 100%; }
:where(.hl) a { color: inherit; }
:where(.hl) :is(h1, h2, h3, h4) { color: var(--hl-ink); margin: 0; }
:where(.hl) p { margin: 0; }
.hl :focus-visible { outline: 3px solid var(--hl-amber); outline-offset: 3px; border-radius: 6px; }
.hl-wrap { width: 100%; max-width: var(--hl-wrap); margin: 0 auto; padding: 0 24px; }
.hl-skip { position: absolute; left: -999px; top: 8px; background: var(--hl-ink); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.hl-skip:focus { left: 8px; }

/* Type */
.hl-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 13px/1 var(--hl-sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--hl-amber-ink);
}
.hl-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hl-amber); box-shadow: 0 0 0 4px rgb(242 145 58 / 18%); }
.hl-display {
  font: 500 clamp(44px, 6.4vw, 84px)/1.02 var(--hl-serif);
  letter-spacing: -.025em;
}
.hl-display em, .hl-h2 em { font-style: italic; color: var(--hl-amber-ink); }
.hl-h2 { font: 500 clamp(34px, 4.2vw, 54px)/1.08 var(--hl-serif); letter-spacing: -.02em; }
.hl-h3 { font: 600 21px/1.3 var(--hl-sans); letter-spacing: -.01em; }
.hl-lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--hl-ink-2); max-width: 60ch; }
.hl-muted { color: var(--hl-muted); }
.hl-center { text-align: center; }
.hl-center .hl-lede { margin-left: auto; margin-right: auto; }

/* Buttons */
.hl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 50px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent;
  font: 600 16px/1 var(--hl-sans); text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.hl-btn:hover { transform: translateY(-1px); }
.hl-btn--primary { background: var(--hl-ink); color: var(--hl-cream); box-shadow: 0 10px 24px -10px rgb(19 35 58 / 60%); }
.hl-btn--primary:hover { background: #0b1830; box-shadow: 0 14px 30px -10px rgb(19 35 58 / 65%); }
.hl-btn--amber { background: var(--hl-amber); color: var(--hl-night); box-shadow: 0 10px 28px -10px rgb(242 145 58 / 70%); }
.hl-btn--amber:hover { background: #f59f4f; }
.hl-btn--ghost { background: transparent; color: var(--hl-ink); border-color: var(--hl-line-2); }
.hl-btn--ghost:hover { background: var(--hl-card); border-color: var(--hl-ink); }
.hl-btn--small { height: 40px; padding: 0 18px; font-size: 15px; }
.hl-btn .hl-arrow { transition: transform .2s ease; }
.hl-btn:hover .hl-arrow { transform: translateX(3px); }

/* Header */
.hl-header {
  position: sticky; top: 0; z-index: 50;
  background: rgb(251 248 242 / 82%);
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .2s ease;
}
.hl-header.is-scrolled { border-bottom-color: var(--hl-line); }
.hl-header__row { display: flex; align-items: center; gap: 24px; height: 72px; }
.hl-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--hl-ink); }
.hl-logo__mark { width: 34px; height: 34px; }
.hl-logo__word { font: 600 23px/1 var(--hl-serif); letter-spacing: -.02em; }
.hl-nav { display: flex; gap: 4px; margin-left: 12px; }
.hl-nav a { padding: 8px 12px; border-radius: 999px; text-decoration: none; font: 500 15px/1 var(--hl-sans); color: var(--hl-ink-2); }
.hl-nav a:hover, .hl-nav a[aria-current="page"] { color: var(--hl-ink); background: var(--hl-paper-2); }
.hl-header__end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hl-header__signin { font: 500 15px/1 var(--hl-sans); text-decoration: none; padding: 10px 12px; color: var(--hl-ink-2); }
.hl-header__signin:hover { color: var(--hl-ink); }
.hl-menu { display: none; }

/* Hero */
.hl-hero { position: relative; padding: 72px 0 40px; isolation: isolate; overflow-x: clip; }
.hl-hero::before {
  content: ""; position: absolute; z-index: -1; inset: -120px -20% auto auto; width: 820px; height: 820px;
  background: radial-gradient(closest-side, rgb(255 213 138 / 55%), rgb(242 145 58 / 12%) 55%, transparent 72%);
  filter: blur(8px); pointer-events: none;
}
.hl-hero__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.hl-hero__copy > * + * { margin-top: 24px; }
.hl-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px !important; }
.hl-hero__fine { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--hl-muted); }
.hl-hero__fine span { display: inline-flex; align-items: center; gap: 8px; }
.hl-hero__fine svg { width: 16px; height: 16px; color: var(--hl-teal); }

/* The capture demo in the hero */
.hl-demo {
  position: relative; background: var(--hl-card); border: 1px solid var(--hl-line);
  border-radius: 22px; box-shadow: var(--hl-shadow-lg); overflow: hidden;
}
.hl-demo__bar { display: flex; align-items: center; gap: 7px; padding: 14px 18px; border-bottom: 1px solid var(--hl-line); background: var(--hl-paper); }
.hl-demo__bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--hl-line-2); }
.hl-demo__bar b { margin-left: 10px; font: 500 13px/1 var(--hl-sans); color: var(--hl-muted); }
.hl-demo__body { padding: 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.hl-demo__label { font: 500 12px/1 var(--hl-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--hl-muted); }
.hl-demo__input {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border: 1.5px solid var(--hl-ink); border-radius: 14px; background: #fff;
  box-shadow: 0 0 0 5px rgb(242 145 58 / 16%);
  font: 400 16px/1.4 var(--hl-sans); color: var(--hl-ink); min-height: 56px;
}
.hl-demo__input kbd { margin-left: auto; font: 500 12px/1 var(--hl-mono); color: var(--hl-muted); border: 1px solid var(--hl-line); border-radius: 6px; padding: 5px 7px; background: var(--hl-paper); }
.hl-demo__typed { flex: 0 1 auto; min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; border-right: 2px solid var(--hl-amber); animation: hl-type 11s steps(46, end) infinite, hl-caret .8s step-end infinite; width: 46ch; max-width: 100%; }
.hl-demo__match {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
  background: var(--hl-teal-soft); color: #145449; font-size: 14px;
  opacity: 0; animation: hl-pop 11s ease infinite;
}
.hl-avatar { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--hl-ink); color: var(--hl-cream); font: 600 13px/1 var(--hl-sans); }
.hl-avatar--amber { background: var(--hl-amber); color: var(--hl-night); }
.hl-avatar--teal { background: var(--hl-teal); color: #fff; }
.hl-demo__match strong { color: var(--hl-ink); }
.hl-demo__tasks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.hl-task {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--hl-line); border-radius: 14px; background: #fff;
  font-size: 15px; color: var(--hl-ink); opacity: 0; transform: translateY(8px);
  animation: hl-task 11s ease infinite;
}
.hl-task:nth-child(2) { animation-name: hl-task-2; }
.hl-task:nth-child(3) { animation-name: hl-task-3; }
.hl-task__check { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--hl-line-2); }
.hl-task small { display: block; color: var(--hl-muted); font-size: 13px; }
.hl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font: 500 12.5px/1 var(--hl-sans); background: var(--hl-paper-2); color: var(--hl-ink-2); white-space: nowrap; }
.hl-chip--amber { background: #fff1dc; color: var(--hl-amber-ink); }
.hl-chip--teal { background: var(--hl-teal-soft); color: #145449; }
.hl-demo__float {
  position: absolute; right: -18px; bottom: -26px; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 14px; background: var(--hl-night); color: var(--hl-cream);
  box-shadow: var(--hl-shadow-lg); font-size: 14px; animation: hl-bob 6s ease-in-out infinite;
}
.hl-demo__float b { color: var(--hl-amber-soft); font-weight: 600; }
.hl-demo-wrap { position: relative; padding: 8px 20px 8px 0; }

@keyframes hl-type { 0% { width: 0; } 22%, 100% { width: 46ch; } }
@keyframes hl-caret { 50% { border-color: transparent; } }
@keyframes hl-pop { 0%, 24% { opacity: 0; transform: translateY(6px); } 29%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes hl-task { 0%, 31% { opacity: 0; transform: translateY(8px); } 36%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes hl-task-2 { 0%, 36% { opacity: 0; transform: translateY(8px); } 41%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes hl-task-3 { 0%, 41% { opacity: 0; transform: translateY(8px); } 46%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes hl-bob { 50% { transform: translateY(-6px); } }

/* Sections */
.hl-section { padding: 112px 0; }
.hl-section--tight { padding: 72px 0; }
.hl-section--paper { background: var(--hl-paper-2); }
.hl-section__head { max-width: 760px; margin-bottom: 56px; }
.hl-section__head > * + * { margin-top: 18px; }
.hl-center.hl-section__head { margin-left: auto; margin-right: auto; }

.hl-for { padding: 40px 0 16px; }
.hl-for__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; }
.hl-for__row p { font-size: 15px; color: var(--hl-muted); margin-right: 6px; }
.hl-pill { padding: 9px 16px; border: 1px solid var(--hl-line); border-radius: 999px; background: var(--hl-card); font: 500 14.5px/1 var(--hl-sans); color: var(--hl-ink); }

/* Pillars */
.hl-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.hl-pillar {
  position: relative; padding: 32px; border-radius: var(--hl-radius); background: var(--hl-card);
  border: 1px solid var(--hl-line); box-shadow: var(--hl-shadow); overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.hl-pillar:hover { transform: translateY(-3px); box-shadow: var(--hl-shadow-lg); }
.hl-pillar > * + * { margin-top: 14px; }
.hl-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--hl-paper-2); color: var(--hl-ink); }
.hl-icon svg { width: 24px; height: 24px; }
.hl-icon--amber { background: #fff1dc; color: var(--hl-amber-ink); }
.hl-icon--teal { background: var(--hl-teal-soft); color: var(--hl-teal); }
.hl-icon--ink { background: var(--hl-ink); color: var(--hl-amber-soft); }
.hl-pillar p { color: var(--hl-muted); }

/* Feature rows */
.hl-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 72px; align-items: center; }
.hl-feature + .hl-feature { margin-top: 128px; }
.hl-feature--flip .hl-feature__copy { order: 2; }
.hl-feature__copy > * + * { margin-top: 20px; }
.hl-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.hl-list li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; color: var(--hl-ink-2); }
.hl-list svg { width: 22px; height: 22px; margin-top: 2px; color: var(--hl-teal); }
.hl-list strong { color: var(--hl-ink); font-weight: 600; }

.hl-panel {
  position: relative; padding: 26px; border-radius: 24px; background: var(--hl-card);
  border: 1px solid var(--hl-line); box-shadow: var(--hl-shadow-lg);
}
.hl-panel--glow::before {
  content: ""; position: absolute; inset: -40px; z-index: -1; border-radius: 40px;
  background: radial-gradient(closest-side, rgb(255 213 138 / 45%), transparent 70%);
}
.hl-stack { display: grid; gap: 12px; }

/* Email card */
.hl-mail { border: 1px solid var(--hl-line); border-radius: 16px; overflow: hidden; }
.hl-mail__head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; background: var(--hl-paper); border-bottom: 1px solid var(--hl-line); font-size: 14px; }
.hl-mail__head b { display: block; color: var(--hl-ink); }
.hl-mail__head small { color: var(--hl-muted); }
.hl-mail__body { padding: 16px; font-size: 15px; color: var(--hl-ink-2); }
.hl-attach { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 12px; border: 1px solid var(--hl-line); border-radius: 10px; font: 500 13px/1 var(--hl-mono); color: var(--hl-ink); }
.hl-attach svg { width: 16px; height: 16px; color: var(--hl-rose); }
.hl-flow-arrow { display: grid; place-items: center; height: 40px; color: var(--hl-amber); }
.hl-flow-arrow svg { width: 22px; height: 22px; }
.hl-step {
  display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: 12px; background: var(--hl-paper); font-size: 15px; color: var(--hl-ink);
}
.hl-step svg { width: 22px; height: 22px; color: var(--hl-teal); }

/* Timeline (deadlines) */
.hl-timeline { position: relative; display: grid; gap: 16px; padding-left: 28px; }
.hl-timeline::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--hl-line-2), var(--hl-amber)); border-radius: 2px; }
.hl-tl { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--hl-paper); font-size: 15px; color: var(--hl-ink); }
.hl-tl::before { content: ""; position: absolute; left: -26px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--hl-card); border: 2px solid var(--hl-line-2); }
.hl-tl--done::before { background: var(--hl-teal); border-color: var(--hl-teal); }
.hl-tl--now::before { background: var(--hl-amber); border-color: var(--hl-amber); box-shadow: 0 0 0 6px rgb(242 145 58 / 22%); }
.hl-tl--due { background: var(--hl-ink); color: var(--hl-cream); }
.hl-tl--due::before { background: var(--hl-ink); border-color: var(--hl-ink); }
.hl-tl small { display: block; color: var(--hl-muted); font-size: 13px; }
.hl-tl--due small { color: #aab6c6; }

/* Portal mock */
.hl-portal { border-radius: 20px; overflow: hidden; border: 1px solid var(--hl-line); }
.hl-portal__top { display: flex; align-items: center; gap: 10px; padding: 16px 18px; background: #1d3a5f; color: #fff; font: 600 15px/1 var(--hl-sans); }
.hl-portal__top span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #fff; color: #1d3a5f; font: 700 15px/1 var(--hl-serif); }
.hl-portal__body { padding: 18px; display: grid; gap: 12px; background: var(--hl-card); }
.hl-portal__hello { font: 500 22px/1.2 var(--hl-serif); color: var(--hl-ink); }
.hl-progress { height: 8px; border-radius: 8px; background: var(--hl-paper-2); overflow: hidden; }
.hl-progress i { display: block; height: 100%; width: 66%; border-radius: 8px; background: linear-gradient(90deg, var(--hl-teal), #3aa38f); }
.hl-req { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--hl-line); border-radius: 12px; font-size: 15px; color: var(--hl-ink); }

/* Money */
.hl-money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.hl-stat { padding: 28px; border-radius: var(--hl-radius); background: var(--hl-card); border: 1px solid var(--hl-line); }
.hl-stat > * + * { margin-top: 12px; }
.hl-stat p { color: var(--hl-muted); }

/* Client types */
.hl-types { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.hl-type { padding: 22px 18px; border-radius: 16px; background: var(--hl-card); border: 1px solid var(--hl-line); }
.hl-type > * + * { margin-top: 10px; }
.hl-type b { display: block; color: var(--hl-ink); font-weight: 600; }
.hl-type p { font-size: 14.5px; color: var(--hl-muted); line-height: 1.5; }

/* Dark band */
.hl-dark { position: relative; background: var(--hl-night); color: #c3cdd9; overflow: hidden; isolation: isolate; }
.hl-dark::before {
  content: ""; position: absolute; z-index: -1; width: 900px; height: 900px; left: 50%; top: -420px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgb(242 145 58 / 28%), transparent 70%);
}
.hl-dark h2, .hl-dark h3, .hl-dark .hl-h2 { color: var(--hl-cream); }
.hl-dark .hl-h2 em { color: var(--hl-amber-soft); }
.hl-dark .hl-eyebrow { color: var(--hl-amber-soft); }
.hl-dark .hl-lede { color: #c3cdd9; }
.hl-secure { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hl-secure__item { padding: 26px; border-radius: 18px; background: rgb(255 255 255 / 4%); border: 1px solid rgb(255 255 255 / 9%); }
.hl-secure__item > * + * { margin-top: 12px; }
.hl-secure__item svg { width: 26px; height: 26px; color: var(--hl-amber-soft); }
.hl-secure__item h3 { font: 600 17px/1.3 var(--hl-sans); }
.hl-secure__item p { font-size: 15px; line-height: 1.55; }

/* Pricing */
.hl-price {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0;
  border-radius: 28px; overflow: hidden; background: var(--hl-card); border: 1px solid var(--hl-line); box-shadow: var(--hl-shadow-lg);
}
.hl-price__main { padding: 48px; }
.hl-price__main > * + * { margin-top: 20px; }
.hl-price__side { padding: 48px; background: var(--hl-paper); border-left: 1px solid var(--hl-line); }
.hl-price__amount { display: flex; align-items: baseline; gap: 10px; color: var(--hl-ink); }
.hl-price__amount b { font: 500 76px/1 var(--hl-serif); letter-spacing: -.03em; }
.hl-price__amount span { font-size: 16px; color: var(--hl-muted); }
.hl-price__tag { display: inline-flex; padding: 7px 12px; border-radius: 999px; background: var(--hl-teal-soft); color: #145449; font: 600 13px/1 var(--hl-sans); }
.hl-calc { padding: 22px; border-radius: 18px; background: var(--hl-paper); border: 1px solid var(--hl-line); }
.hl-calc label { display: flex; justify-content: space-between; font: 500 15px/1 var(--hl-sans); color: var(--hl-ink); }
.hl-calc output { font: 500 15px/1 var(--hl-sans); color: var(--hl-ink); }
.hl-calc input[type=range] { width: 100%; margin: 18px 0 14px; accent-color: var(--hl-ink); }
.hl-calc__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px dashed var(--hl-line-2); }
.hl-calc__total b { font: 500 34px/1 var(--hl-serif); color: var(--hl-ink); }
.hl-calc__total span { color: var(--hl-muted); font-size: 14px; }
.hl-included { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hl-included li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15.5px; color: var(--hl-ink-2); }
.hl-included svg { width: 20px; height: 20px; margin-top: 2px; color: var(--hl-teal); }
.hl-allow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hl-allow__item { padding: 24px; border-radius: 18px; background: var(--hl-card); border: 1px solid var(--hl-line); }
.hl-allow__item b { display: block; font: 500 34px/1.1 var(--hl-serif); color: var(--hl-ink); }
.hl-allow__item p { margin-top: 6px; color: var(--hl-muted); font-size: 15px; }
.hl-allow__item small { display: block; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hl-line); color: var(--hl-ink-2); font-size: 14px; }

/* FAQ */
.hl-faq { max-width: 840px; margin: 0 auto; display: grid; gap: 12px; }
.hl-faq__group + .hl-faq__group { margin-top: 44px; }
.hl-faq__group > h2 { font: 600 14px/1 var(--hl-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--hl-muted); margin-bottom: 14px; }
.hl-faq details { border: 1px solid var(--hl-line); border-radius: 16px; background: var(--hl-card); transition: box-shadow .2s ease; }
.hl-faq details + details { margin-top: 10px; }
.hl-faq details[open] { box-shadow: var(--hl-shadow); }
.hl-faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 22px; font: 600 17px/1.4 var(--hl-sans); color: var(--hl-ink);
}
.hl-faq summary::-webkit-details-marker { display: none; }
.hl-faq summary::after {
  content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--hl-paper-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313233a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform .2s ease;
}
.hl-faq details[open] summary::after { transform: rotate(45deg); }
.hl-faq details > div { padding: 0 22px 22px; color: var(--hl-ink-2); }
.hl-faq details > div p + p { margin-top: 10px; }

/* CTA band */
.hl-cta {
  position: relative; padding: 72px 56px; border-radius: 32px; overflow: hidden; isolation: isolate;
  background: var(--hl-ink); color: #c3cdd9; text-align: center;
}
.hl-cta::before {
  content: ""; position: absolute; z-index: -1; width: 700px; height: 700px; right: -200px; top: -380px;
  background: radial-gradient(closest-side, rgb(255 213 138 / 45%), rgb(242 145 58 / 10%) 60%, transparent 72%);
}
.hl-cta h2 { color: var(--hl-cream); }
.hl-cta .hl-lede { color: #c3cdd9; }
.hl-cta .hl-eyebrow { color: var(--hl-amber-soft); }
.hl-cta .hl-h2 em { color: var(--hl-amber-soft); }
.hl-cta > * + * { margin-top: 18px; }
.hl-cta__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px !important; }
.hl-cta .hl-btn--ghost { color: var(--hl-cream); border-color: rgb(255 255 255 / 25%); }
.hl-cta .hl-btn--ghost:hover { background: rgb(255 255 255 / 8%); border-color: var(--hl-cream); }

/* Page head (inner pages) */
.hl-pagehead { padding: 80px 0 40px; text-align: center; position: relative; isolation: isolate; }
.hl-pagehead::before {
  content: ""; position: absolute; z-index: -1; width: 760px; height: 520px; left: 50%; top: -260px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgb(255 213 138 / 45%), transparent 72%);
}
.hl-pagehead .hl-wrap > * + * { margin-top: 18px; }
.hl-pagehead .hl-lede { margin-left: auto; margin-right: auto; }

/* Form */
.hl-form { display: grid; gap: 16px; }
.hl-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hl-field { display: grid; gap: 8px; }
.hl-field label { font: 500 14.5px/1.2 var(--hl-sans); color: var(--hl-ink); }
.hl-field input, .hl-field select, .hl-field textarea {
  width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--hl-line-2); background: #fff;
  font: 400 16px/1.4 var(--hl-sans); color: var(--hl-ink); transition: border-color .15s ease, box-shadow .15s ease;
}
.hl-field textarea { min-height: 120px; resize: vertical; }
.hl-field input:focus, .hl-field select:focus, .hl-field textarea:focus { outline: none; border-color: var(--hl-ink); box-shadow: 0 0 0 4px rgb(242 145 58 / 22%); }
.hl-field small { color: var(--hl-muted); font-size: 13.5px; }
.hl-errors { padding: 14px 16px; border-radius: 12px; background: #fbe9e6; color: #7c2a20; font-size: 15px; }
.hl-notice { padding: 18px 20px; border-radius: 14px; background: var(--hl-teal-soft); color: #145449; font-size: 16px; }
.hl-contact { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.hl-contact__card { padding: 36px; border-radius: 24px; background: var(--hl-card); border: 1px solid var(--hl-line); box-shadow: var(--hl-shadow-lg); }

/* Footer */
.hl-footer { padding: 72px 0 40px; border-top: 1px solid var(--hl-line); }
.hl-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.hl-footer__grid > div > * + * { margin-top: 12px; }
.hl-footer h4 { font: 600 13px/1 var(--hl-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--hl-muted); }
.hl-footer ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.hl-footer ul a { text-decoration: none; color: var(--hl-ink-2); font-size: 15.5px; }
.hl-footer ul a:hover { color: var(--hl-ink); text-decoration: underline; text-underline-offset: 3px; }
.hl-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--hl-line); font-size: 14px; color: var(--hl-muted); }

/* Reveal on scroll */
/* Only hidden while the page script runs, so nothing stays invisible without it. */
.hl-js .hl-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.hl-js .hl-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hl *, .hl *::before, .hl *::after { animation: none !important; transition: none !important; }
  .hl-demo__typed { width: auto; border-right: 0; }
  .hl-demo__match, .hl-task { opacity: 1; transform: none; }
  .hl-reveal { opacity: 1; transform: none; }
}

/* Tablet */
@media (max-width: 1000px) {
  .hl-hero__grid, .hl-feature, .hl-contact { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .hl-feature--flip .hl-feature__copy { order: 0; }
  .hl-pillars, .hl-money { grid-template-columns: minmax(0, 1fr); }
  .hl-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hl-secure { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hl-price { grid-template-columns: minmax(0, 1fr); }
  .hl-price__side { border-left: 0; border-top: 1px solid var(--hl-line); }
  .hl-footer__grid { grid-template-columns: 1fr 1fr; }
  .hl-demo-wrap { padding-right: 0; }
  .hl-demo__float { right: 12px; bottom: -18px; }
}

/* Phone */
@media (max-width: 760px) {
  body.hl { font-size: 16px; }
  .hl-wrap { padding: 0 16px; }
  .hl-nav, .hl-header__signin { display: none; }
  .hl-menu { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--hl-line); background: var(--hl-card); color: var(--hl-ink); cursor: pointer; }
  .hl-menu svg { width: 20px; height: 20px; }
  .hl-header.is-open .hl-nav {
    display: grid; position: absolute; top: 72px; left: 0; right: 0; margin: 0; padding: 12px 16px 20px;
    background: var(--hl-paper); border-bottom: 1px solid var(--hl-line); box-shadow: var(--hl-shadow);
  }
  .hl-header.is-open .hl-nav a { padding: 14px 12px; font-size: 17px; }
  .hl-header__end .hl-btn { display: none; }
  .hl-hero { padding-top: 40px; }
  .hl-section { padding: 80px 0; }
  .hl-feature + .hl-feature { margin-top: 88px; }
  .hl-types, .hl-secure, .hl-allow, .hl-form__row { grid-template-columns: minmax(0, 1fr); }
  .hl-price__main, .hl-price__side, .hl-contact__card { padding: 28px 22px; }
  .hl-price__amount b { font-size: 60px; }
  .hl-cta { padding: 52px 22px; border-radius: 24px; }
  .hl-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .hl-demo__typed { font-size: 14px; }
  .hl-task { grid-template-columns: auto 1fr; }
  .hl-task .hl-chip { grid-column: 2; justify-self: start; }
  .hl-demo__float { position: static; margin-top: 16px; }
}

/* Terms and privacy */
.hl-legal { max-width: 760px; }
.hl-legal > * + * { margin-top: 16px; }
.hl-legal h2 { font: 600 21px/1.3 var(--hl-sans); margin-top: 40px !important; }
.hl-legal ul { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 8px; }
.hl-legal a { color: var(--hl-amber-ink); }

/* Heedlight in your assistant (/assistant): chat windows, cards and the loop */
.hl-chat { position: relative; display: flex; flex-direction: column; background: var(--hl-card); border: 1px solid var(--hl-line); border-radius: 22px; box-shadow: var(--hl-shadow-lg); overflow: hidden; }
.hl-chat__bar { display: flex; align-items: center; gap: 8px; padding: 13px 18px; border-bottom: 1px solid var(--hl-line); background: var(--hl-paper); font: 500 13px/1 var(--hl-sans); color: var(--hl-ink); }
.hl-chat__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--hl-teal); }
.hl-chat__bar span { margin-left: auto; color: var(--hl-muted); }
.hl-chat__body { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.hl-msg { max-width: 92%; font-size: 15px; line-height: 1.5; color: var(--hl-ink); }
.hl-msg--me { align-self: flex-end; max-width: 80%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--hl-paper-2); }
.hl-msg--me .hl-attach { margin: 0 0 8px; display: flex; width: fit-content; background: var(--hl-card); }
.hl-msg--ai { align-self: flex-start; }
.hl-msg--ai > :is(div, span) { display: block; }
.hl-msg--ai > :is(div, span) + :is(div, span) { margin-top: 10px; }
.hl-msg--ai strong { color: var(--hl-ink); }
.hl-ok, .hl-msg--ai > .hl-ok { display: flex; align-items: center; gap: 8px; color: #145449; font-weight: 500; }
.hl-ok svg { width: 18px; height: 18px; color: var(--hl-teal); flex: none; }
.hl-hcard { border: 1px solid var(--hl-line); border-radius: 14px; background: #fff; overflow: hidden; box-shadow: var(--hl-shadow); }
.hl-hcard__head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--hl-paper-2); font: 600 13px/1.3 var(--hl-sans); color: var(--hl-ink); }
.hl-hcard__head small { margin-left: auto; font-weight: 400; color: var(--hl-muted); white-space: nowrap; }
.hl-hcard__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--hl-paper-2); font-size: 14px; }
.hl-hcard__row:last-child { border-bottom: 0; }
.hl-hcard__row--n { justify-content: flex-start; }
.hl-hcard__row--n > i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--hl-ink); color: var(--hl-cream); font: 600 11px/1 var(--hl-sans); font-style: normal; }
.hl-hcard__row--n > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.hl-hcard__row b { display: block; font-weight: 600; color: var(--hl-ink); }
.hl-hcard__row small { display: block; font-size: 12.5px; color: var(--hl-muted); }
.hl-hcard__text { padding: 12px 14px; font-size: 14px; color: var(--hl-ink-2); }
.hl-hcard__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 14px; background: var(--hl-paper); font-size: 13px; color: var(--hl-muted); }
.hl-hcard__foot svg { flex: none; color: var(--hl-ink-2); }
.hl-pmark { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #1d3a5f; color: #fff; font: 700 12px/1 var(--hl-serif); }
.hl-mini-btn { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--hl-ink); color: var(--hl-cream); font: 500 13px/1 var(--hl-sans); white-space: nowrap; }
.hl-mini-btn--ghost { background: #fff; color: var(--hl-ink); border: 1px solid var(--hl-line-2); }

/* The hero chat plays its messages in turn, then starts over */
.hl-seq { opacity: 0; animation: 12s ease infinite; }
.hl-seq--1 { animation-name: hl-seq-1; }
.hl-seq--2 { animation-name: hl-seq-2; }
.hl-seq--3 { animation-name: hl-seq-3; }
.hl-seq--4 { animation-name: hl-seq-4; }
@keyframes hl-seq-1 { 0%, 3% { opacity: 0; transform: translateY(8px); } 8%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes hl-seq-2 { 0%, 14% { opacity: 0; transform: translateY(8px); } 20%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes hl-seq-3 { 0%, 38% { opacity: 0; transform: translateY(8px); } 44%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes hl-seq-4 { 0%, 52% { opacity: 0; transform: translateY(8px); } 58%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Two audiences */
.hl-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.hl-duo__card { padding: 36px; border-radius: var(--hl-radius); background: var(--hl-card); border: 1px solid var(--hl-line); box-shadow: var(--hl-shadow); }
.hl-duo__card > * + * { margin-top: 14px; }
.hl-duo__who { font: 500 13px/1 var(--hl-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--hl-muted); }
.hl-duo__q { font: 500 30px/1.15 var(--hl-serif); letter-spacing: -.01em; }
.hl-duo .hl-list { margin-top: 22px; }

/* The loop */
.hl-loop { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: none; }
.hl-loop li { position: relative; padding: 26px; border-radius: 18px; background: rgb(255 255 255 / 4%); border: 1px solid rgb(255 255 255 / 9%); }
.hl-loop li > * + * { margin-top: 10px; }
.hl-loop span { display: block; font: 600 12px/1 var(--hl-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--hl-amber-soft); }
.hl-loop b { display: block; font: 500 24px/1.2 var(--hl-serif); color: var(--hl-cream); }
.hl-loop p { font-size: 15px; line-height: 1.55; }
.hl-loop li:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -13px; width: 10px; height: 10px; border-top: 2px solid var(--hl-amber); border-right: 2px solid var(--hl-amber); transform: translateY(-50%) rotate(45deg); }
.hl-loop__note { margin-top: 32px; max-width: 70ch; font-size: 16px; line-height: 1.6; color: #c3cdd9; }

/* Connecting */
.hl-steps-n { margin: 28px 0 0; padding: 0; list-style: none; counter-reset: hl-step; display: grid; gap: 16px; }
.hl-steps-n li { counter-increment: hl-step; display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; color: var(--hl-ink-2); }
.hl-steps-n li::before { content: counter(hl-step); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--hl-ink); color: var(--hl-cream); font: 600 14px/1 var(--hl-sans); }
.hl-steps-n b { color: var(--hl-ink); font-weight: 600; }
.hl-consent { display: grid; gap: 18px; }
.hl-consent__head { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--hl-muted); }
.hl-consent__title { font: 500 26px/1.2 var(--hl-serif); color: var(--hl-ink); }
.hl-consent__files { display: grid; gap: 8px; }
.hl-consent__files span { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--hl-line); border-radius: 12px; font: 500 15px/1.3 var(--hl-sans); color: var(--hl-ink); }
.hl-consent__files svg { width: 18px; height: 18px; color: var(--hl-teal); }
.hl-consent__files small { margin-left: auto; font-weight: 400; color: var(--hl-muted); }
.hl-consent__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; font-size: 14px; line-height: 1.45; color: var(--hl-ink-2); }
.hl-consent__cols > div > * + * { margin-top: 6px; }
.hl-consent__can, .hl-consent__cant { font: 600 12px/1 var(--hl-sans); letter-spacing: .08em; text-transform: uppercase; }
.hl-consent__can { color: #145449; }
.hl-consent__cant { color: #8f3a30; }
.hl-consent__actions { display: flex; justify-content: flex-end; gap: 10px; }

/* Control */
.hl-settings { display: grid; }
.hl-settings__row { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--hl-paper-2); }
.hl-settings__row:last-child { border-bottom: 0; }
.hl-settings__row > span:not(.hl-avatar):not(.hl-mini-btn) { flex: 1 1 auto; min-width: 0; }
.hl-settings__row b { display: block; font: 500 15px/1.35 var(--hl-sans); color: var(--hl-ink); }
.hl-settings__row small { display: block; font-size: 13px; color: var(--hl-muted); }
.hl-settings__label { padding: 22px 4px 4px; font: 600 12px/1 var(--hl-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--hl-muted); }
.hl-switch { flex: none; position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--hl-line-2); }
.hl-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 20%); }
.hl-switch.is-on { background: var(--hl-teal); }
.hl-switch.is-on::after { left: 21px; }

.hl-check { display: flex; align-items: flex-start; gap: 10px; font: 400 15px/1.45 var(--hl-sans); color: var(--hl-ink); cursor: pointer; }
.hl-check input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--hl-ink); }
.hl-fineprint { margin-top: 28px; text-align: center; font-size: 13px; color: var(--hl-muted); }

@media (prefers-reduced-motion: reduce) {
  .hl-seq { opacity: 1; transform: none; }
}
@media (max-width: 1000px) {
  .hl-duo { grid-template-columns: minmax(0, 1fr); }
  .hl-loop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hl-loop li:not(:last-child)::after { display: none; }
}
@media (max-width: 760px) {
  .hl-loop, .hl-consent__cols { grid-template-columns: minmax(0, 1fr); }
  .hl-duo__card { padding: 26px 22px; }
  .hl-chat__body { padding: 16px; }
  .hl-msg, .hl-msg--me { max-width: 100%; }
  .hl-hcard__head small { display: none; }
  .hl-settings__row .hl-mini-btn { display: none; }
}
.hl-code { display: inline-block; padding: 8px 12px; border-radius: 10px; background: var(--hl-card); border: 1px solid var(--hl-line); font: 500 15px/1.4 var(--hl-mono); color: var(--hl-ink); word-break: break-all; }
.hl-legal ol { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 8px; }