/* DRAFT (Jay, 2026-09-23 19:39): the SubPro homepage below the app demo, in
   the style of the /link page. The banner, the hero and the app demo keep
   styles.css untouched. Loaded by index.html only. Jay: "ignore all the
   rules", so the sitewide no ambient motion rule does not apply here; every
   animation still stops under prefers-reduced-motion. */

:root {
  --hx-orange: #ff6b13;
  --hx-orange-2: #ff9a3c;
  --hx-orange-deep: #f26100;
  --hx-navy: #08223d;
  --hx-navy-2: #0c2d4f;
  --hx-ink: #06111f;
  --hx-text: #15202b;
  --hx-muted: #55606c;
  --hx-line: #e6e2da;
  --hx-steel: #d5dfea;
  --hx-steel-dim: #93a4b8;
  --hx-grad: linear-gradient(90deg, #ff6b13 0%, #ff9a3c 100%);
  --hx-grad-card: linear-gradient(135deg, rgba(255, 107, 19, 0.16), rgba(255, 154, 60, 0.04));
  --hx-radius-lg: 20px;
  --hx-font: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.hx-stats, .hx-section { font-family: var(--hx-font); color: var(--hx-text); -webkit-font-smoothing: antialiased; }

.hx-stats h2, .hx-section h2, .hx-section h3 { font-family: var(--hx-font); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 0; text-transform: none; }

.hx-section p { margin: 0; }

.hx-section ul, .hx-section ol, .hx-stats ul { margin: 0; padding: 0; list-style: none; }

.hx-wrap { width: min(1184px, calc(100% - 48px)); margin: 0 auto; }

.hx-center { text-align: center; }

/* Stats row */
.hx-stats { padding: 56px 0; background: #fff; border-bottom: 1px solid var(--hx-line); }

.hx-stats ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }

.hx-stats li { display: flex; align-items: center; justify-content: center; gap: 14px; }

.hx-stats svg { flex: none; width: 28px; height: 28px; stroke: var(--hx-orange); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.hx-stats strong { display: block; font-size: 22px; font-weight: 700; }

.hx-stats span { display: block; color: var(--hx-muted); font-size: 14px; }

/* Sections */
.hx-section { padding: 96px 0; background: #fff; }

.hx-dark {
  background: radial-gradient(60% 60% at 50% 0%, rgba(255, 107, 19, 0.2), transparent 60%), var(--hx-navy);
  color: #fff;
}

.hx-glow { background: radial-gradient(50% 70% at 50% 100%, rgba(255, 154, 60, 0.16), transparent 70%), #f7f4ee; }

.hx-section .hx-kicker { color: var(--hx-orange); font-size: 15px; font-weight: 600; margin-bottom: 12px !important; }

.hx-section.hx-dark .hx-kicker { color: var(--hx-orange-2); }

.hx-dark h2 { color: #fff; }

.hx-h2 { font-size: clamp(30px, 2vw + 14px, 42px); max-width: 20em; margin: 0 auto 16px !important; }

.hx-sub { font-size: 17px; color: var(--hx-muted); max-width: 36em; margin: 0 auto !important; }

.hx-head { margin-bottom: 48px; }

/* Cards */
.hx-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; text-align: left; }

.hx-card {
  padding: 32px;
  border: 1px solid rgba(255, 107, 19, 0.18);
  border-radius: var(--hx-radius-lg);
  background: var(--hx-grad-card), #fff;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.hx-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(6, 17, 31, 0.1); }

.hx-card h3 { font-size: 22px; margin: 24px 0 10px; }

.hx-card p { color: var(--hx-muted); font-size: 15px; line-height: 1.55; }

.hx-tile {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--hx-grad);
  color: #fff;
  box-shadow: 0 10px 24px rgba(255, 107, 19, 0.3);
}

.hx-tile svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Split rows */
.hx-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }

.hx-split.rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

.hx-split h2 { font-size: clamp(30px, 1.6vw + 16px, 40px); margin-bottom: 18px; }

.hx-split p { color: var(--hx-muted); font-size: 17px; line-height: 1.6; }

.hx-dark .hx-split p, .hx-dark.hx-split p { color: var(--hx-steel); }

/* Flags: glass rows that drift */
.hx-flags { display: grid; gap: 12px; }

.hx-flags li {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--hx-steel);
  font-size: 15px;
  animation: hx-drift 7s ease-in-out infinite;
  transition: background 200ms ease, border-color 200ms ease;
}

.hx-flags li:nth-child(2n) { animation-delay: -2.3s; margin-left: 28px; }

.hx-flags li:nth-child(3n) { animation-delay: -4.6s; }

.hx-flags li:hover { background: rgba(255, 107, 19, 0.12); border-color: rgba(255, 154, 60, 0.6); }

.hx-flag {
  justify-self: start;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--hx-grad);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(255, 107, 19, 0.35);
}

@keyframes hx-drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(8px); }
}

/* Trust: a manifest card */
.hx-shot { position: relative; padding: 28px 28px 0 0; }

.hx-manifest {
  padding: 28px;
  background: #fff;
  border-radius: 18px;
  border: 1px solid var(--hx-line);
  box-shadow: 0 30px 60px rgba(6, 17, 31, 0.14);
}

.hx-manifest > strong { display: block; font-size: 13px; letter-spacing: 0.06em; margin-bottom: 16px; color: var(--hx-navy); }

.hx-trust-list { display: grid; gap: 0; }

.hx-trust-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hx-line);
  font-size: 15px;
}

.hx-trust-list li:last-child { border-bottom: 0; }

.hx-trust-list b {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e7f5ec;
  color: #1d7a3e;
  font-size: 12px;
  font-weight: 700;
}

.hx-seal {
  position: absolute;
  right: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--hx-grad);
  color: #fff;
  box-shadow: 0 16px 36px rgba(255, 107, 19, 0.4);
  animation: hx-bob 5s ease-in-out infinite;
}

.hx-seal svg { width: 40px; height: 40px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@keyframes hx-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.hx-trust-more { margin-top: 18px !important; font-size: 15px !important; }

.hx-trust-more a { color: var(--hx-orange-deep); font-weight: 600; }

/* Stages: numbered bubbles on a moving dotted line */
.hx-stages {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  text-align: center;
}

.hx-stages::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 34px;
  height: 5px;
  background: radial-gradient(circle, var(--hx-orange-2) 2px, transparent 2.6px) 0 50% / 14px 5px repeat-x;
  animation: hx-march 0.9s linear infinite;
}

@keyframes hx-march {
  from { background-position: 0 50%; }
  to { background-position: 14px 50%; }
}

.hx-stage {
  position: relative;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 10px;
  height: 100%;
  padding: 0 10px 24px;
  color: var(--hx-text);
  text-decoration: none;
}

.hx-stage i {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff;
  color: var(--hx-navy);
  font-style: normal;
  font-weight: 800;
  font-size: 26px;
  box-shadow: 0 10px 30px rgba(6, 17, 31, 0.15);
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}

.hx-stage strong { margin-top: 8px; font-size: 20px; }

.hx-stage span { color: var(--hx-muted); font-size: 14px; line-height: 1.5; }

.hx-stage:hover i, .hx-stage:focus-visible i { background: var(--hx-grad); color: #fff; transform: scale(1.08); }

.hx-stage:hover strong { color: var(--hx-orange-deep); }

/* Paths */
.hx-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; text-align: left; }

.hx-path {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 24px 56px;
  border-radius: var(--hx-radius-lg);
  border: 1px solid rgba(255, 107, 19, 0.18);
  background: var(--hx-grad-card), #fff;
  color: var(--hx-text);
  text-decoration: none;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.hx-path:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(6, 17, 31, 0.12); }

.hx-path .hx-tile { margin-bottom: 12px; }

.hx-path-q { color: var(--hx-orange-deep); font-size: 13px; font-weight: 600; }

.hx-path strong { font-size: 21px; letter-spacing: -0.01em; }

.hx-path > span:not(.hx-tile):not(.hx-path-q):not(.hx-go) { color: var(--hx-muted); font-size: 15px; line-height: 1.5; }

.hx-go { position: absolute; right: 24px; bottom: 20px; font-size: 22px; color: var(--hx-orange); transition: transform 200ms ease; }

.hx-path:hover .hx-go { transform: translateX(6px); }

/* Closing */
.hx-closing { padding: 110px 0; }

.hx-closing h2 { font-size: clamp(34px, 2.4vw + 14px, 50px); color: #fff; }

.hx-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 18px; }

.hx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 13px 24px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-family: var(--hx-font);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.hx-btn-grad { background: var(--hx-grad); color: #fff; box-shadow: 0 8px 24px rgba(255, 107, 19, 0.35); }

.hx-btn-grad:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(255, 107, 19, 0.45); }

.hx-btn-dark { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.18); }

.hx-btn-dark:hover { background: rgba(255, 255, 255, 0.18); }

.hx-micro { font-size: 13px !important; color: var(--hx-steel-dim) !important; }

.hx-back {
  padding: 30px;
  border-radius: var(--hx-radius-lg);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3);
}

.hx-back strong { display: block; color: #fff; font-size: 19px; margin-bottom: 20px; }

.hx-back ol { display: grid; gap: 18px; }

.hx-back li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; color: var(--hx-steel); font-size: 15px; line-height: 1.55; }

.hx-back i {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--hx-grad);
  color: #fff;
  font-style: normal;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(255, 107, 19, 0.35);
}

/* Footer: restyled in place. Its markup is the sitewide source that
   tools/sync-chrome.mjs copies to every page, so only CSS changes here. */
.home-page .site-footer {
  background: linear-gradient(180deg, var(--hx-navy) 0%, var(--hx-ink) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--hx-font);
  color: var(--hx-steel);
}

.home-page .site-footer .footer-heading { color: var(--hx-steel-dim); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 15px; }

.home-page .site-footer .footer-col a { color: #fff; text-decoration: none; font-size: 15px; }

.home-page .site-footer .footer-col a:hover { text-decoration: underline; color: var(--hx-orange-2); }

.home-page .site-footer .linkedin-link { border-radius: 10px; border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.08); }

.home-page .site-footer .footer-legal-links a { color: var(--hx-steel-dim); text-decoration: none; }

.home-page .site-footer .footer-legal-links a:hover { color: #fff; text-decoration: underline; }

@media (max-width: 1000px) {
  .hx-split, .hx-split.rev { grid-template-columns: 1fr; gap: 40px; }
  .hx-split.rev .hx-shot { order: 2; }
  .hx-stats ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-cards { grid-template-columns: 1fr 1fr; }
  .hx-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  .hx-stages::before { display: none; }
  .hx-flags li:nth-child(2n) { margin-left: 0; }
}

@media (max-width: 640px) {
  .hx-wrap { width: calc(100% - 32px); }
  .hx-section { padding: 64px 0; }
  .hx-stats ul, .hx-paths, .hx-cards { grid-template-columns: 1fr; }
  .hx-stats li { justify-content: flex-start; }
  .hx-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-flags li { grid-template-columns: 1fr; gap: 8px; }
  .hx-shot { padding: 24px 12px 0 0; }
  .hx-seal { width: 64px; height: 64px; }
  .hx-seal svg { width: 30px; height: 30px; }
  .hx-card { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .hx-flags li, .hx-seal, .hx-stages::before { animation: none; }
  .hx-card, .hx-path, .hx-stage i, .hx-go, .hx-btn { transition: none; }
}

.hx-go svg { display: block; width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* One submittal, two timelines, and who it's for (Jay, 2026-10-09). The
   timeline is an illustration with its planning assumptions printed under it. */
.hx-tl-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--hx-line); border-radius: var(--hx-radius-lg); background: #fff; overflow: hidden; margin-bottom: 40px !important; }

.hx-tl-stats li { padding: 28px 32px; border-left: 1px solid var(--hx-line); }

.hx-tl-stats li:first-child { border-left: 0; }

.hx-tl-stats span { display: block; color: var(--hx-muted); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }

.hx-tl-stats strong { display: block; margin: 8px 0 4px; font-size: clamp(36px, 2vw + 20px, 48px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; color: var(--hx-ink); }

.hx-tl-stats .is-good strong { color: #157a4f; }

.hx-tl-stats em { display: block; font-style: normal; color: var(--hx-muted); font-size: 15px; }

.hx-tl-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

.hx-tl-col { padding-top: 20px; border-top: 4px solid var(--hx-steel-dim); }

.hx-tl-col.is-good { border-top-color: #157a4f; }

.hx-tl-col h3 { font-size: 22px; margin-bottom: 16px; }

.hx-tl-col ol { display: grid; gap: 12px; }

.hx-tl-col li { color: var(--hx-muted); font-size: 16px; line-height: 1.55; padding-left: 18px; position: relative; }

.hx-tl-col li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.hx-tl-col li b { color: var(--hx-text); }

.hx-tl-note { margin-top: 32px !important; max-width: 60em; color: var(--hx-muted); font-size: 13px; line-height: 1.55; }

.hx-sub-cue { margin-top: 12px !important; font-size: 15px; }

.hx-role-who { margin: -4px 0 12px !important; color: var(--hx-orange-deep) !important; font-size: 14px !important; font-weight: 600; }

.hx-role-go { display: inline-block; margin-top: 18px; color: var(--hx-ink); font-weight: 600; font-size: 15px; text-decoration: underline; text-decoration-color: var(--hx-orange); text-underline-offset: 4px; }

.hx-role-go:hover { color: var(--hx-orange-deep); }

@media (max-width: 1000px) {
  .hx-roles { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .hx-tl-stats, .hx-tl-cols { grid-template-columns: 1fr; }
  .hx-tl-stats li { border-left: 0; border-top: 1px solid var(--hx-line); padding: 20px 24px; }
  .hx-tl-stats li:first-child { border-top: 0; }
}

/* The manifesto band, right under the app demo (Jay, 2026-10-09). */
.hx-manifesto .hx-h2 { max-width: 18em; }

.hx-manifesto .hx-sub { color: var(--hx-steel); }

.hx-manifesto-lines { display: grid; gap: 14px; max-width: 46em; margin: 40px auto 0 !important; }

.hx-manifesto-lines li { padding: 18px 24px; border-left: 4px solid var(--hx-orange); border-radius: 0 12px 12px 0; background: rgba(255, 255, 255, 0.05); color: #fff; font-size: clamp(18px, 0.6vw + 14px, 22px); font-weight: 600; line-height: 1.35; text-align: left; }

@media (max-width: 640px) {
  .hx-manifesto-lines li { padding: 14px 18px; }
}

.hx-manifesto-close { max-width: 30em; margin: 44px auto 0 !important; color: var(--hx-orange-2); font-size: clamp(20px, 0.9vw + 15px, 26px); font-weight: 700; line-height: 1.35; }

/* "See why" follows the hero line, inline, and opens the proof page
   (Jay, 2026-10-10). */
.hp-lead .hp-lead-answer { display: inline; }
.hp-see-why { color: #fff; font-weight: 400; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--hx-orange); text-decoration-thickness: 2px; text-underline-offset: 6px; text-shadow: 0 2px 14px rgba(6, 17, 31, 0.6); }
.hp-see-why:hover, .hp-see-why:focus-visible { color: var(--hx-orange-2); }