/* ============================================================================
   Uncrypt — home page (body.hv2). Linked only from index.php, on top of the
   public theme in site.css (body.pv2), which carries the tokens, type, buttons
   and header. This file holds only what is particular to the home page: the
   hero, the flow, the console glimpse, the walk-through, the library belts.

   The app screens shown on the page are LIGHT, like the real portal, so they
   carry their own --ap-* tokens.
   ========================================================================== */

body.hv2 {
  --ap-bg:   #f4f6fa;
  --ap-card: #ffffff;
  --ap-ink:  #111a2c;
  --ap-ink2: #536076;
  --ap-ink3: #687489;
  --ap-line: #e4e8ef;
  --ap-brand:#2563eb;
  --ap-ok:   #16a34a;
  --ap-okink:#15803d;
  --ap-info: #0891b2;
  --ap-warn: #b45309;
  --ap-bad:  #dc2626;
}

/* ------------------------------------------------------------------ hero -- */
.hx-hero { position: relative; padding: clamp(84px, 13vw, 150px) 0 clamp(64px, 8vw, 96px); text-align: center; overflow: clip; }
.hx-glow {
  position: absolute; inset: -30% -10% auto; height: 110%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(38% 46% at 22% 18%, rgba(46, 140, 160, .42), transparent 70%),
    radial-gradient(34% 42% at 74% 12%, rgba(126, 104, 196, .34), transparent 70%),
    radial-gradient(30% 34% at 56% 44%, rgba(212, 136, 79, .16), transparent 70%);
  filter: blur(26px);
}
.hx-hero-in { position: relative; z-index: 1; }
.hx-chip {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 26px;
  padding: 7px 15px; border-radius: 999px; border: 1px solid var(--hx-line-2);
  background: rgba(255, 255, 255, .04); font-size: 13.5px; font-weight: 500; color: var(--hx-ink-2);
}
.hx-live { width: 8px; height: 8px; border-radius: 50%; background: var(--hx-live); box-shadow: 0 0 0 4px rgba(60, 227, 139, .16); }


/* ----------------------------------------------------- the console glimpse -- */
.hx-console { padding: clamp(40px, 6vw, 72px) 0 clamp(70px, 9vw, 110px); }
.hx-console .hx-sechead { text-align: center; margin-left: auto; margin-right: auto; }
.hx-console .hx-sub { margin-left: auto; margin-right: auto; }
.hx-window {
  margin: 0; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--hx-line-2);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .4);
  background: #0f0f11;
}
.hx-chrome { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #1a1a1d; border-bottom: 1px solid var(--hx-line); }
.hx-chrome > span { width: 11px; height: 11px; border-radius: 50%; background: #3a3a3f; }
.hx-url {
  margin: 0 auto; padding: 5px 16px; border-radius: 8px; background: #111113; color: var(--hx-ink-3);
  font: 500 12.5px/1 var(--hx-mono); transform: translateX(-20px);
}
.hx-cap { text-align: center; font-size: 13.5px; color: var(--hx-ink-3); padding: 14px 16px; background: #151517; border-top: 1px solid var(--hx-line); }

.hx-app {
  display: grid; grid-template-columns: 220px minmax(0, 1fr);
  background: var(--ap-bg); color: var(--ap-ink); font-family: var(--hx-sans);
  font-size: 13.5px; min-height: 560px; text-align: left;
}
/* The rail mirrors the real portal: the hero's glow over a warm near-black,
   full height with the UNCRYPT mark at the top, copper for the active item. */
.hx-rail {
  padding: 16px 12px; color: #f3efe8;
  background:
    radial-gradient(130% 34% at 0% 0%, rgba(46, 140, 160, .30), transparent 72%),
    radial-gradient(120% 30% at 100% 52%, rgba(126, 104, 196, .22), transparent 72%),
    radial-gradient(130% 28% at 10% 100%, rgba(212, 136, 79, .18), transparent 72%),
    #141416;
}
.hx-rail-brand { display: flex; align-items: center; gap: 9px; margin: 2px 6px 18px; font-size: 12.5px; font-weight: 800; letter-spacing: .16em; color: #f3efe8; }
.hx-rail-brand svg { width: 26px; height: 15px; }
.hx-rail-co { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 248, 238, .10); margin-bottom: 8px; }
.hx-co-mark { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: #f3efe8; color: #1b3a5c; font-weight: 800; font-size: 15px; }
.hx-rail-co span { font-weight: 700; font-size: 13.5px; line-height: 1.25; color: #f3efe8; }
.hx-rail-co small { display: block; font-weight: 500; color: #b8b2a8; font-size: 11.5px; }
.hx-rail-g { margin: 16px 8px 6px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: #aaa49b; }
.hx-rail ul { list-style: none; margin: 0; padding: 0; }
.hx-rail li { display: flex; align-items: center; gap: 10px; padding: 8px 9px; border-radius: 8px; color: #b8b2a8; font-weight: 600; font-size: 13px; }
.hx-rail li.is-on { background: rgba(232, 160, 108, .14); color: #f3b98c; }

.hx-main { padding: 22px 24px 24px; display: grid; gap: 16px; align-content: start; }
.hx-topbar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: -22px -24px 0; padding: 10px 24px; background: #fff; border-bottom: 1px solid var(--ap-line); font-size: 12.5px; font-weight: 600; color: var(--ap-ink2); }
.hx-user { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #eef3fe; color: #1d4ed8; font-size: 11px; border: 1px solid #c8d8fb; }
.hx-main-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hx-crumb { margin: 0; font-size: 12px; color: var(--ap-ink2); font-weight: 600; }
.hx-title { margin: 2px 0 0; font-size: 21px; font-weight: 700; letter-spacing: -.015em; }
.hx-appbtn { background: var(--ap-brand); color: #fff; font-weight: 600; font-size: 13px; padding: 9px 14px; border-radius: 9px; white-space: nowrap; }

.hx-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hx-kpi { background: var(--ap-card); border: 1px solid var(--ap-line); border-radius: 12px; padding: 13px 14px; }
.hx-kpi p { margin: 0; font-size: 12px; font-weight: 600; color: var(--ap-ink2); }
.hx-kpi b { display: block; font-size: 25px; font-weight: 750; letter-spacing: -.02em; margin: 4px 0 8px; }
.hx-kbar { display: block; height: 5px; border-radius: 99px; background: #eef1f6; overflow: hidden; }
.hx-kbar s, .hx-bars i s { display: block; height: 100%; width: var(--w); background: var(--ap-brand); border-radius: inherit; }
.hx-kbar.hx-ok s { background: var(--ap-ok); }
.hx-kbar.hx-info s { background: var(--ap-info); }
.hx-kbar.hx-bad s { background: var(--ap-bad); }

.hx-cols { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 16px; }
.hx-panel { background: var(--ap-card); border: 1px solid var(--ap-line); border-radius: 12px; padding: 15px 16px; }
.hx-ph { margin: 0 0 12px; font-weight: 700; font-size: 13.5px; }
.hx-ring-panel { display: grid; justify-items: center; }
.hx-ring { position: relative; width: 132px; height: 132px; }
.hx-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hx-ring circle { fill: none; stroke-width: 11; }
.hx-ring-bg { stroke: #eef1f6; }
.hx-ring-fg { stroke: var(--ap-ok); stroke-linecap: round; stroke-dasharray: 89 100; }
.hx-ring p { position: absolute; inset: 0; margin: 0; display: grid; place-content: center; text-align: center; }
.hx-ring b { font-size: 26px; font-weight: 750; letter-spacing: -.02em; }
.hx-ring small { font-size: 11.5px; color: var(--ap-ink3); font-weight: 600; }
.hx-legend { list-style: none; margin: 12px 0 0; padding: 0; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; font-size: 12px; color: var(--ap-ink2); font-weight: 600; }
.hx-legend li { display: flex; align-items: center; gap: 6px; }
.hx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ap-brand); }
.hx-dot.hx-ok { background: var(--ap-ok); }
.hx-dot.hx-info { background: var(--ap-info); }
.hx-dot.hx-bad { background: var(--ap-bad); }

.hx-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.hx-bars li { display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: 4px 10px; align-items: center; }
.hx-bars span { grid-column: 1 / -1; font-size: 12.5px; font-weight: 600; color: var(--ap-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-bars i { display: block; height: 7px; border-radius: 99px; background: #eef1f6; overflow: hidden; }
.hx-bars b { font-size: 12px; text-align: right; color: var(--ap-ink2); }

.hx-camps table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.hx-camps th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ap-ink3); font-weight: 700; padding: 0 8px 8px 0; border-bottom: 1px solid var(--ap-line); }
.hx-camps td { padding: 10px 8px 10px 0; border-bottom: 1px solid #eef1f6; color: var(--ap-ink2); font-weight: 500; }
.hx-camps td:first-child { color: var(--ap-ink); font-weight: 650; }
.hx-camps tr:last-child td { border-bottom: 0; }
.hx-pill { display: inline-block; padding: 3px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; font-style: normal; white-space: nowrap; }
.hx-pill-ok   { background: #ebf8f0; color: var(--ap-okink); }
.hx-pill-info { background: #e7f6f9; color: #0e7490; }
.hx-pill-warn { background: #fff6e8; color: #a4580a; }

/* --------------------------------------------------------- the walk-through -- */
.hx-how { padding: clamp(40px, 6vw, 70px) 0 clamp(60px, 8vw, 100px); }
.hx-step {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--hx-bg-2); border: 1px solid var(--hx-line); border-radius: var(--hx-r);
  overflow: hidden; margin-bottom: 22px; scroll-margin-top: 90px;
}
.hx-copy { padding: clamp(28px, 4vw, 52px); }
.hx-copy p { color: var(--hx-ink-2); font-size: 16.5px; line-height: 1.65; margin: 0 0 14px; }
.hx-copy h4 { margin: 24px 0 8px; font-size: 18px; font-weight: 500; color: var(--hx-ink); letter-spacing: -.01em; }
.hx-copy a { color: var(--hx-act); text-underline-offset: 3px; }
.hx-stepchip {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: rgba(127, 178, 189, .16); color: #a5d0d9; font-size: 13px; font-weight: 600;
}
.hx-stage { display: grid; place-items: center; padding: clamp(28px, 4vw, 48px); min-height: 400px; }
.t-olive { background: #3a3624; }
.t-cocoa { background: #3c2f28; }
.t-teal  { background: #1d383b; }
.t-plum  { background: #33283c; }
.t-slate { background: #242f3d; }

.hx-stack { display: grid; gap: 14px; width: 100%; max-width: 380px; }
.hx-card {
  width: 100%; max-width: 380px; background: var(--ap-card); color: var(--ap-ink);
  border-radius: 16px; padding: 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  font-size: 13.5px;
}
.hx-card-h { margin: 0 0 14px; font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.hx-card-k { margin: 0 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ap-ink3); }
.hx-cardbtn { display: block; text-align: center; background: var(--ap-brand); color: #fff; font-weight: 650; padding: 11px; border-radius: 10px; margin-top: 14px; }
.hx-small { margin: 6px 0 0; font-size: 12.5px; color: var(--ap-ink2); }

/* step 1 — the sign-up form is on the dark public site, so it is dark here too */
.hx-signup { background: #1a1a1d; color: var(--hx-ink); border: 1px solid var(--hx-line-2); }
.hx-card-brand { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-weight: 700; letter-spacing: .12em; font-size: 12px; text-transform: uppercase; color: var(--hx-ink-2); }
.hx-mark { width: 16px; height: 16px; border-radius: 5px; border: 2px solid var(--hx-live); }
.hx-signup .hx-card-h { color: var(--hx-ink); }
.hx-signup label { display: block; font-size: 12px; font-weight: 600; color: var(--hx-ink-3); margin-bottom: 10px; }
.hx-in { display: block; margin-top: 5px; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--hx-line-2); background: #121214; color: var(--hx-ink); font-size: 13.5px; font-weight: 500; }
.hx-signup .hx-cardbtn { background: var(--hx-ink); color: #151517; }
.hx-card-note { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 12.5px; color: var(--hx-ink-2); }

.hx-tick {
  flex: none; width: 18px; height: 18px; border-radius: 50%; display: inline-block;
  background: var(--ap-ok) center/11px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.hx-signup .hx-tick { background-color: #1f9d57; }

/* step 2 — roster */
.hx-drop { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1.5px dashed #c8d3e4; border-radius: 12px; background: #f8fafc; margin-bottom: 14px; }
.hx-drop div { flex: 1; }
.hx-drop b { display: block; font-size: 13.5px; }
.hx-drop small { color: var(--ap-ink3); font-size: 12px; font-weight: 600; }
.hx-file { width: 30px; height: 36px; border-radius: 6px; background: #eef3fe; border: 1px solid #c8d8fb; }
.hx-roster ul { list-style: none; margin: 0; padding: 0; }
.hx-roster li { display: flex; align-items: center; gap: 11px; padding: 9px 2px; border-top: 1px solid #eef1f6; }
.hx-roster li span { flex: 1; font-weight: 650; font-size: 13.5px; }
.hx-roster li small { display: block; color: var(--ap-ink3); font-weight: 600; font-size: 12px; }
.hx-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; background: #eef3fe; color: var(--ap-brand); }

/* step 3 — campaign builder */
.hx-field { background: #f8fafc; border: 1px solid var(--ap-line); border-radius: 10px; padding: 9px 12px; margin-bottom: 10px; }
.hx-field small { display: block; font-size: 11px; font-weight: 700; color: var(--ap-ink3); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 3px; }
.hx-field b { font-size: 13.5px; font-weight: 650; }
.hx-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hx-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.hx-tags em { font-style: normal; font-size: 12px; font-weight: 650; background: #eef3fe; color: #1d4ed8; padding: 3px 9px; border-radius: 99px; }
.hx-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; padding: 4px 2px; }
.hx-toggle i { flex: none; width: 36px; height: 21px; border-radius: 99px; background: #cbd5e1; position: relative; }
.hx-toggle i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; }
.hx-toggle i.is-on { background: var(--ap-ok); }
.hx-toggle i.is-on::after { left: 18px; }

/* step 4 — score + signature */
.hx-score-n { margin: 2px 0 6px; font-size: 16px; color: var(--ap-ink3); font-weight: 600; }
.hx-score-n b { font-size: 42px; color: var(--ap-ink); font-weight: 750; letter-spacing: -.03em; }
.hx-pass, .hx-verified { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 650; color: var(--ap-okink); font-size: 13.5px; }
.hx-read { height: 6px; border-radius: 99px; background: #eef1f6; overflow: hidden; }
.hx-read i { display: block; height: 100%; width: var(--w); background: var(--ap-ok); }
.hx-sig { margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed #d4dbe5; font-family: 'Brush Script MT', 'Segoe Script', cursive; font-size: 20px; color: #1e3a8a; }
.hx-sig small { display: block; font-family: var(--hx-mono); font-size: 11px; color: var(--ap-ink3); margin-top: 2px; }

/* step 5 — certificate + chain */
.hx-cert-id { margin: 0 0 8px; font-family: var(--hx-mono); font-size: 20px; font-weight: 500; letter-spacing: .04em; }
.hx-chain ol { list-style: none; margin: 0; padding: 0; counter-reset: c; }
.hx-chain li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid #eef1f6; font-weight: 600; font-size: 13px; }
.hx-chain li:first-child { border-top: 0; }
.hx-chain code { font-family: var(--hx-mono); font-size: 12px; color: var(--ap-okink); background: #ebf8f0; padding: 3px 7px; border-radius: 6px; }

/* ------------------------------------------------------------------ tools -- */
.hx-tools { padding: clamp(60px, 8vw, 100px) 0; border-top: 1px solid var(--hx-line); }
.hx-toolgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hx-tool { background: var(--hx-bg-2); border: 1px solid var(--hx-line); border-radius: 18px; padding: 24px 22px; }
.hx-tool h3 { margin: 18px 0 8px; font-size: 19px; font-weight: 500; letter-spacing: -.01em; color: var(--hx-ink); }
.hx-tool p { margin: 0; color: var(--hx-ink-2); font-size: 15px; line-height: 1.6; }
.hx-tool-ico { display: block; width: 42px; height: 42px; border-radius: 12px; background: rgba(232, 160, 108, .12); position: relative; }
.hx-tool-ico::after {
  content: ""; position: absolute; inset: 10px; background: var(--hx-act);
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
}
.hx-ico-cert { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='M8.5 14 7 22l5-3 5 3-1.5-8'/%3E%3C/svg%3E"); }
.hx-ico-link { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E"); }
.hx-ico-map  { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3 3 6v15l6-3 6 3 6-3V3l-6 3-6-3zM9 3v15M15 6v15'/%3E%3C/svg%3E"); }
.hx-ico-key  { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }

/* rail icons in the console glimpse */
.hx-ico { flex: none; width: 16px; height: 16px; display: inline-block; background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.hx-ico-grid  { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z'/%3E%3C/svg%3E"); }
.hx-ico-users { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8'/%3E%3C/svg%3E"); }
.hx-ico-flag  { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 22V4h13l-2 4 2 4H4'/%3E%3C/svg%3E"); }
.hx-ico-book  { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20V2H6.5A2.5 2.5 0 0 0 4 4.5zM4 19.5A2.5 2.5 0 0 0 6.5 22H20v-5'/%3E%3C/svg%3E"); }
.hx-ico-chart { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 3v18h18M8 16v-5M13 16V8M18 16v-9'/%3E%3C/svg%3E"); }
.hx-ico-shield{ --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E"); }
.hx-ico-card  { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M2 5h20v14H2zM2 10h20'/%3E%3C/svg%3E"); }
.hx-ico-doc   { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zM14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E"); }

.hx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 44px 0 0; border: 1px solid var(--hx-line); border-radius: 18px; overflow: hidden; }
.hx-stats div { padding: 24px 22px; border-left: 1px solid var(--hx-line); }
.hx-stats div:first-child { border-left: 0; }
.hx-stats dt { font-size: 13.5px; color: var(--hx-ink-3); font-weight: 500; }
.hx-stats dd { margin: 6px 0 0; font-size: clamp(32px, 3.6vw, 44px); font-weight: 350; letter-spacing: -.02em; color: var(--hx-ink); }

/* ---------------------------------------------------------------- library -- */
.hx-lib { padding: clamp(60px, 8vw, 100px) 0; border-top: 1px solid var(--hx-line); }

/* ---------------------------------------------------------------- pricing -- */
.hx-plans { padding: 0 0 clamp(60px, 8vw, 100px); }
.hx-plans-in {
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  background: var(--hx-bg-2); border: 1px solid var(--hx-line); border-radius: var(--hx-r);
  padding: clamp(28px, 4vw, 48px);
}
.hx-plans-in > div { max-width: 640px; }

/* -------------------------------------------------------------------- faq -- */
.hx-faq { padding: clamp(60px, 8vw, 100px) 0; border-top: 1px solid var(--hx-line); }
.hx-faq-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.hx-q { border-bottom: 1px solid var(--hx-line); }
.hx-q summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 20px 0; font-size: 17.5px; font-weight: 500; color: var(--hx-ink);
}
.hx-q summary::-webkit-details-marker { display: none; }
.hx-q summary::after { content: "+"; flex: none; font-size: 24px; font-weight: 300; color: var(--hx-act); transition: transform .2s ease; }
.hx-q[open] summary::after { transform: rotate(45deg); }
.hx-q summary:focus-visible { outline: 2px solid var(--hx-act); outline-offset: 4px; border-radius: 6px; }
.hx-q p { margin: 0 0 22px; color: var(--hx-ink-2); font-size: 16px; line-height: 1.7; max-width: 720px; }

/* ------------------------------------------------------------------ close -- */
.hx-close { position: relative; overflow: clip; padding: clamp(90px, 12vw, 150px) 0; text-align: center; border-top: 1px solid var(--hx-line); }
.hx-glow-close { inset: auto -10% -40%; height: 120%; }
.hx-close-in { position: relative; z-index: 1; }

/* ------------------------------------------------------------- responsive -- */
@media (max-width: 1040px) {
  .hx-toolgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-app { grid-template-columns: 184px minmax(0, 1fr); }
}
@media (max-width: 880px) {
  .hx-step { grid-template-columns: minmax(0, 1fr); }
  .hx-stage { min-height: 0; }
  .hx-app { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hx-rail { display: none; }
  .hx-cols { grid-template-columns: minmax(0, 1fr); }
  .hx-faq-in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .hx-toolgrid { grid-template-columns: minmax(0, 1fr); }
  .hx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-main { padding: 16px 14px; }
  .hx-main-top .hx-appbtn { display: none; }
  .hx-camps th:nth-child(2), .hx-camps td:nth-child(2) { display: none; }
    .hx-url { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hx-btn, .hx-q summary::after { transition: none; }
  .hx-btn-solid:hover { transform: none; }
}


/* ----------------------------------------------------------------- the flow --
   The branching campaign flow from the earlier home page (markup and motion in
   marketing.css: .flow-*), dressed for this theme. The travelling pulse stays
   emerald — it is the "live" signal, which is exactly what emerald means. */
.hx-flowsec { padding: 0 0 clamp(56px, 8vw, 96px); position: relative; z-index: 1; }
.hx-flowbox {
  background: var(--hx-bg-2); border: 1px solid var(--hx-line); border-radius: var(--hx-r);
  padding: clamp(22px, 3.4vw, 44px) clamp(18px, 3vw, 40px);
}
body.pv2 .flow-node {
  background: var(--hx-bg-3); border-color: var(--hx-line-2); border-radius: 16px;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9);
}
body.pv2 .fn-step { font-family: var(--hx-mono); color: var(--hx-ink-3); }
body.pv2 .fn-title { color: var(--hx-ink); font-weight: 600; font-family: var(--hx-sans); }
body.pv2 .fn-desc { color: var(--hx-ink-3); }
body.pv2 .flow-link-base { stroke: rgba(255, 248, 238, .16); }
body.pv2 .flow-tip { stroke: rgba(255, 248, 238, .42); }
body.pv2 .flow-list li { color: var(--hx-ink); }

/* ------------------------------------------------------------- library belts --
   Three belts of the REAL catalogue, each in a different order, speed and
   direction, so the library reads as the size it is going to be rather than a
   count. Each belt is printed twice for a seamless loop (marketing.css). */
.hx-lib .mk-shelf { margin-top: 0; }
.hx-lib .mk-shelf-row:nth-child(3) .mk-shelf-track { animation-duration: 96s; }
.hx-tile {
  flex: none; width: clamp(230px, 24vw, 300px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  padding: 18px 20px; min-height: 118px;
  background: var(--hx-bg-2); border: 1px solid var(--hx-line); border-radius: 16px;
}
.hx-tile h3 { margin: 0; font-size: 16.5px; font-weight: 500; line-height: 1.3; color: var(--hx-ink); letter-spacing: -.01em; }
.hx-tile span {
  align-self: flex-start; font: 500 12px/1 var(--hx-mono); color: var(--hx-ink-2);
  background: rgba(255, 255, 255, .06); padding: 6px 10px; border-radius: 99px;
}
.hx-tile:nth-child(4n+1) { border-top-color: rgba(127, 178, 189, .45); }
.hx-tile:nth-child(4n+2) { border-top-color: rgba(212, 136, 79, .45); }
.hx-tile:nth-child(4n+3) { border-top-color: rgba(157, 138, 216, .45); }
.hx-tile:nth-child(4n+4) { border-top-color: rgba(143, 160, 104, .45); }

/* three stats now the course count is gone */
.hx-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 880px) {
  .hx-stats { grid-template-columns: minmax(0, 1fr); }
  .hx-stats div { border-left: 0; border-top: 1px solid var(--hx-line); }
  .hx-stats div:first-child { border-top: 0; }
}

/* the mock top bar follows the tighter phone padding of .hx-main */
@media (max-width: 620px) { .hx-topbar { margin: -16px -14px 0; padding: 10px 14px; } }