/* ==========================================================================
   Share Council mockup kit: hormozi.css  (2026-10-29)
   Additive visual components for the Solutions page mockups. Load AFTER base.css:
     <link rel="stylesheet" href="../../mockup-kit/base.css">
     <link rel="stylesheet" href="../../mockup-kit/hormozi.css">
   Every class starts with hz-. Mobile first: one column by default, multi-column from 768px up
   (base.css stacks rows below 768px, so the two agree). No JS needed.
   Light/navy: components read the CSS variables below. Inside .bg-navy, .bg-purple or .hz-dark they switch
   to the dark set automatically. .hz-surface forces a white card (light set) inside a navy section.
   Manual: ../hormozi/COMPONENTS.md   Demo: ../hormozi/components-demo.html
   NOT production CSS: the HubSpot rebuild needs a custom module or rich-text styling for most of these.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --hz-purple: var(--sc-accent, #8b5cff);
  --hz-purple-light: #b696ff;
  --hz-yellow: #fbc40e;
  --hz-green: #41cc94;
  --hz-blue: #3fb5f5;
  --hz-navy: var(--sc-dark, #131345);
  --hz-amber: #e09a00;           /* PROPOSED outline */
  --hz-amber-bg: #fff6dc;
  --hz-amber-ink: #5c4200;
  /* cap-table series colours: work on white AND on navy */
  --hz-c1: #8b5cff;              /* founders */
  --hz-c2: #3fb5f5;              /* investors */
  --hz-c3: #41cc94;              /* employees / option pool */
  --hz-c4: #fbc40e;              /* STAK certificates */
  --hz-c5: #b696ff;              /* other */
}
/* light set (default) */
:root, .hz-surface, .hz-stack, :is(.bg-navy, .bg-purple, .hz-dark) :is(.hz-surface, .hz-stack) {
  --hz-fg: var(--sc-dark, #131345);
  --hz-body: var(--sc-text, #665d70);
  --hz-muted: #736a7e;                         /* 5:1 on white */
  --hz-card-bg: #fff;
  --hz-card-border: #ebe7f1;
  --hz-card-shadow: var(--sc-shadow);
  --hz-soft-bg: #f7f5fb;                       /* panels inside cards */
  --hz-accent: var(--sc-accent, #8b5cff);
  --hz-accent-ink: #6a3df0;                    /* accent text on white, 6:1 */
  --hz-accent-soft: #f1ebff;
  --hz-num: var(--sc-dark, #131345);
  --hz-tick: #12a26a;
  --hz-tick-soft: #e3f7ee;
  --hz-cross: #d4483f;
  --hz-cross-soft: #fdecea;
  --hz-track: #ece8f3;
  --hz-line: #e4dfec;
}
/* dark set: navy sections, or any wrapper with .hz-dark */
.bg-navy, .hz-dark {
  --hz-fg: #fff;
  --hz-body: rgba(255, 255, 255, .82);
  --hz-muted: rgba(255, 255, 255, .68);
  --hz-card-bg: rgba(255, 255, 255, .06);
  --hz-card-border: rgba(255, 255, 255, .16);
  --hz-card-shadow: none;
  --hz-soft-bg: rgba(255, 255, 255, .05);
  --hz-accent: #b696ff;
  --hz-accent-ink: #cbb4ff;
  --hz-accent-soft: rgba(182, 150, 255, .18);
  --hz-num: #fff;
  --hz-tick: #41cc94;
  --hz-tick-soft: rgba(65, 204, 148, .18);
  --hz-cross: #ff9a90;
  --hz-cross-soft: rgba(255, 154, 144, .16);
  --hz-track: rgba(255, 255, 255, .14);
  --hz-line: rgba(255, 255, 255, .14);
}
.bg-purple {
  --hz-fg: #fff;
  --hz-body: rgba(255, 255, 255, .9);
  --hz-muted: rgba(255, 255, 255, .8);
  --hz-card-bg: rgba(255, 255, 255, .12);
  --hz-card-border: rgba(255, 255, 255, .28);
  --hz-card-shadow: none;
  --hz-soft-bg: rgba(255, 255, 255, .08);
  --hz-accent: #fff;
  --hz-accent-ink: #fff;
  --hz-accent-soft: rgba(255, 255, 255, .2);
  --hz-num: #fff;
  --hz-tick: #fff;
  --hz-tick-soft: rgba(255, 255, 255, .2);
  --hz-cross: #fff;
  --hz-cross-soft: rgba(255, 255, 255, .16);
  --hz-track: rgba(255, 255, 255, .22);
  --hz-line: rgba(255, 255, 255, .22);
}
/* .hz-dark on a plain wrapper: navy panel with the dark set */
.hz-dark { background: var(--hz-navy); color: var(--hz-body); border-radius: var(--sc-radius, 24px); padding: 32px 24px; }
.hz-dark :is(h1, h2, h3, h4, h5, h6, .overline, strong) { color: #fff; }
.hz-dark a:not(.btn) { color: #fff; text-decoration: underline; }
@media (min-width: 768px) { .hz-dark { padding: 48px; } }
/* .hz-surface: white card. Inside navy it resets the heading/link colours base.css turns white */
.hz-surface { background: #fff; color: var(--sc-text); border-radius: var(--sc-radius, 24px); box-shadow: var(--sc-shadow); }
:is(.bg-navy, .bg-purple, .hz-dark) .hz-surface :is(h1, h2, h3, h4, h5, h6, .overline, strong) { color: var(--sc-dark); }
:is(.bg-navy, .bg-purple, .hz-dark) .hz-surface a:not(.btn) { color: var(--sc-accent); text-decoration: none; }
:is(.bg-navy, .bg-purple, .hz-dark) .hz-surface { color: var(--sc-text); }

/* ---------- small shared pieces ---------- */
.hz-icon { width: 24px; height: 24px; display: inline-block; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.hz-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.hz-tag { display: inline-flex; align-items: center; gap: 4px; font-size: .67rem; font-weight: 600; line-height: 1.3; letter-spacing: .02em; padding: 3px 9px; border-radius: 999px; background: var(--hz-accent-soft); color: var(--hz-accent-ink); white-space: nowrap; vertical-align: middle; }
.hz-tag--you      { background: transparent; color: var(--hz-fg); box-shadow: inset 0 0 0 1.5px var(--hz-fg); }
.hz-tag--sc       { background: var(--hz-accent-soft); color: var(--hz-accent-ink); }
.hz-tag--notary   { background: #fff1c4; color: #5c4200; }
.hz-tag--employee { background: var(--hz-tick-soft); color: var(--hz-tick); }
.hz-tag--adviser  { background: #e2f3fd; color: #0b6696; }
.hz-tag--time     { background: transparent; color: var(--hz-muted); padding-left: 0; padding-right: 0; font-weight: 500; }
.hz-tag--exists   { background: var(--hz-tick-soft); color: var(--hz-tick); }
.hz-tag--exists::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hz-tag--proposed { background: var(--hz-amber-bg); color: var(--hz-amber-ink); box-shadow: inset 0 0 0 1px var(--hz-amber); }
:is(.bg-navy, .hz-dark) .hz-tag--notary { background: rgba(251, 196, 14, .2); color: #ffe08a; }
:is(.bg-navy, .hz-dark) .hz-tag--adviser { background: rgba(63, 181, 245, .2); color: #9fdcff; }
:is(.bg-navy, .hz-dark) .hz-tag--proposed { background: var(--hz-yellow); color: #3d2c00; box-shadow: none; }
:is(.bg-navy, .hz-dark) :is(.hz-surface, .hz-stack) .hz-tag--proposed { background: var(--hz-amber-bg); color: var(--hz-amber-ink); box-shadow: inset 0 0 0 1px var(--hz-amber); }
/* highlighter for one or two words in a heading */
.hz-mark { background: linear-gradient(transparent 76%, rgba(251, 196, 14, .7) 76%, rgba(251, 196, 14, .7) 94%, transparent 94%); padding: 0 .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
:is(.bg-navy, .hz-dark) .hz-mark { background: linear-gradient(transparent 80%, #8b5cff 80%, #8b5cff 94%, transparent 94%); }
/* tick / cross list (used by hz-compare, hz-notfor, hz-guarantee) */
.hz-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.hz-checks > li { position: relative; padding-left: 36px; min-height: 24px; color: var(--hz-body); }
.hz-checks > li::before { content: ""; position: absolute; left: 0; top: .1em; width: 24px; height: 24px; border-radius: 50%; background: var(--hz-tick-soft); }
.hz-checks > li::after { content: ""; position: absolute; left: 6px; top: calc(.1em + 6px); width: 12px; height: 12px; background: var(--hz-tick);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.3l2.8 2.8L10.5 2.9' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.3l2.8 2.8L10.5 2.9' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.hz-checks > li.hz-no::before { background: var(--hz-cross-soft); }
.hz-checks > li.hz-no::after { background: var(--hz-cross);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 2.5l7 7M9.5 2.5l-7 7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 2.5l7 7M9.5 2.5l-7 7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.hz-checks > li > strong { display: block; }
/* standalone yes / no / partial marks for tables: <span class="hz-yes" role="img" aria-label="Yes"></span> */
.hz-yes, .hz-no-mark, .hz-part { display: inline-block; width: 24px; height: 24px; border-radius: 50%; position: relative; vertical-align: middle; }
.hz-yes { background: var(--hz-tick-soft); }
.hz-no-mark { background: var(--hz-cross-soft); }
.hz-part { background: #fff1c4; }
.hz-yes::after, .hz-no-mark::after, .hz-part::after { content: ""; position: absolute; inset: 6px; }
.hz-yes::after { background: var(--hz-tick); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.3l2.8 2.8L10.5 2.9' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.3l2.8 2.8L10.5 2.9' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.hz-no-mark::after { background: var(--hz-cross); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 2.5l7 7M9.5 2.5l-7 7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 2.5l7 7M9.5 2.5l-7 7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.hz-part::after { inset: 11px 6px; border-radius: 2px; background: #a77800; }

/* ==========================================================================
   1. hz-stats: 3 or 4 big-number tiles
   ========================================================================== */
.hz-stats { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; padding: 0; list-style: none; }
.hz-stat { padding: 24px 0; border-top: 1px solid var(--hz-line); text-align: center; }
.hz-stat:first-child { border-top: 0; padding-top: 0; }
.hz-stat__num { margin: 0 0 8px; font-size: 3rem; line-height: 1.05; font-weight: 600; letter-spacing: -.02em; color: var(--hz-num); font-variant-numeric: tabular-nums; }
.hz-stat__num small, .hz-stat__unit { font-size: .45em; font-weight: 600; letter-spacing: 0; color: var(--hz-accent); margin-left: .12em; }
.hz-stat__label { margin: 0 auto; max-width: 260px; font-size: .89rem; line-height: 1.5; color: var(--hz-body); }
.hz-stat__label strong { display: block; font-size: 1rem; margin-bottom: 2px; color: var(--hz-fg); }
.hz-stat__src { margin: 10px auto 0; max-width: 260px; font-size: .67rem; line-height: 1.4; color: var(--hz-muted); }
.hz-stat__src a { color: inherit !important; text-decoration: underline; }
@media (min-width: 768px) {
  .hz-stats--3 { grid-template-columns: repeat(3, 1fr); }
  .hz-stats--4 { grid-template-columns: repeat(4, 1fr); }
  .hz-stats--2 { grid-template-columns: repeat(2, 1fr); }
  .hz-stat { padding: 8px 24px; border-top: 0; border-left: 1px solid var(--hz-line); }
  .hz-stat:first-child { border-left: 0; padding-top: 8px; }
  .hz-stat__num { font-size: 3.33rem; }
}
/* card variant: each tile is a card */
.hz-stats--cards { gap: 16px; }
.hz-stats--cards .hz-stat { background: var(--hz-card-bg); border: 1px solid var(--hz-card-border); box-shadow: var(--hz-card-shadow); border-radius: var(--sc-radius-sm, 16px); padding: 28px 20px; }
@media (min-width: 768px) { .hz-stats--cards { gap: 24px; } .hz-stats--cards .hz-stat { border-left: 1px solid var(--hz-card-border); padding: 32px 24px; } }
/* compact variant for heroes: smaller numbers, left aligned */
.hz-stats--compact .hz-stat { text-align: left; }
.hz-stats--compact .hz-stat__num { font-size: 2.2rem; }
.hz-stats--compact .hz-stat__label, .hz-stats--compact .hz-stat__src { margin-left: 0; }
@media (min-width: 768px) { .hz-stats--compact .hz-stat:first-child { padding-left: 0; } }

/* ==========================================================================
   2. hz-proof (one fact under a hero button) + hz-logos (company strip)
   ========================================================================== */
.hz-proof { display: inline-flex; align-items: flex-start; gap: 8px; margin: 16px 0 0; font-size: .89rem; line-height: 1.5; color: var(--hz-muted); text-align: left; }
.hz-proof .hz-icon { width: 18px; height: 18px; margin-top: .15em; color: var(--hz-tick); stroke-width: 2.2; }
.hero--center .hz-proof, .text-center .hz-proof { justify-content: center; }
.cta-band .hz-proof { margin: 20px auto 0; max-width: none; }
.hz-logos { margin: 0; text-align: center; }
.hz-logos__label { display: block; margin-bottom: 16px; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--hz-muted); }
.hz-logos__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 32px; }
.hz-logos__list li { display: flex; align-items: center; }
.hz-logos__list img { height: 28px; width: auto; max-width: 140px; object-fit: contain; filter: grayscale(1); opacity: .7; }
:is(.bg-navy, .bg-purple, .hz-dark) .hz-logos__list img { filter: brightness(0) invert(1); opacity: .75; }
/* text placeholder until real logos are cleared for use */
.hz-logo-ph { font-size: .89rem; font-weight: 700; letter-spacing: -.01em; color: var(--hz-muted); padding: 6px 14px; border: 1.5px dashed var(--hz-line); border-radius: 8px; }
.hz-logos--left { text-align: left; }
.hz-logos--left .hz-logos__list { justify-content: flex-start; }
@media (min-width: 768px) { .hz-logos__list { gap: 20px 48px; } .hz-logos__list img { height: 32px; } }

/* ==========================================================================
   3. hz-steps: numbered timeline, horizontal from 768px, vertical below
   ========================================================================== */
.hz-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; counter-reset: hzstep; }
.hz-step { position: relative; display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; padding-bottom: 28px; counter-increment: hzstep; }
.hz-step:last-child { padding-bottom: 0; }
.hz-step::before { content: ""; position: absolute; left: 21px; top: 52px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--hz-track); }
.hz-step:last-child::before { display: none; }
.hz-step__num { grid-row: 1 / span 4; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1rem; background: var(--hz-accent); color: #fff; box-shadow: 0 0 0 6px var(--hz-accent-soft); }
.bg-purple .hz-step__num { color: var(--sc-accent); }
.hz-step__num:empty::before { content: counter(hzstep); }
.hz-step__title { margin: 8px 0 6px; font-size: 1.11rem; line-height: 1.35; color: var(--hz-fg); }
.hz-step__desc { margin: 0 0 10px; font-size: .89rem; line-height: 1.55; color: var(--hz-body); }
.hz-step__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.hz-step--done .hz-step__num { background: var(--hz-tick); }
.hz-step--outside .hz-step__num { background: transparent; color: var(--hz-fg); box-shadow: inset 0 0 0 2px var(--hz-fg); }   /* a step outside the platform (notary, bank) */
@media (min-width: 768px) {
  .hz-steps--3 { grid-template-columns: repeat(3, 1fr); }
  .hz-steps--4 { grid-template-columns: repeat(4, 1fr); }
  .hz-steps--5 { grid-template-columns: repeat(5, 1fr); }
  .hz-steps:is(.hz-steps--3, .hz-steps--4, .hz-steps--5) { column-gap: 24px; }
  .hz-steps:is(.hz-steps--3, .hz-steps--4, .hz-steps--5) .hz-step { display: block; padding-bottom: 0; padding-right: 8px; }
  .hz-steps:is(.hz-steps--3, .hz-steps--4, .hz-steps--5) .hz-step::before { left: 60px; right: -16px; top: 21px; bottom: auto; width: auto; height: 2px; }
  .hz-steps:is(.hz-steps--3, .hz-steps--4, .hz-steps--5) .hz-step__title { margin-top: 20px; }
}
/* card variant: each step in a card (horizontal only) */
@media (min-width: 768px) {
  .hz-steps--cards .hz-step { background: var(--hz-card-bg); border: 1px solid var(--hz-card-border); box-shadow: var(--hz-card-shadow); border-radius: var(--sc-radius-sm, 16px); padding: 24px !important; }
  .hz-steps--cards .hz-step::before { left: 76px !important; right: -8px !important; top: 45px !important; }
}

/* ==========================================================================
   4. hz-compare: before/after columns, and hz-table (3+ column comparison)
   ========================================================================== */
.hz-compare { display: grid; grid-template-columns: 1fr; gap: 16px; position: relative; }
.hz-compare__col { border-radius: var(--sc-radius, 24px); padding: 28px 24px; }
.hz-compare__col--before { background: var(--hz-soft-bg); border: 1px solid var(--hz-card-border); }
.hz-compare__col--after { background: var(--hz-card-bg); border: 2px solid var(--hz-accent); box-shadow: var(--hz-card-shadow); }
.bg-grey .hz-compare__col--before, .bg-offwhite .hz-compare__col--before { background: #f1eff4; }
.hz-compare__label { display: inline-block; margin-bottom: 10px; font-size: .67rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hz-muted); }
.hz-compare__col--after .hz-compare__label { color: var(--hz-accent-ink); }
.hz-compare__title { margin: 0 0 20px; font-size: 1.22rem; line-height: 1.35; color: var(--hz-fg); }
.hz-compare__col--before .hz-checks > li { color: var(--hz-muted); }
.hz-compare__vs { display: none; }
@media (min-width: 768px) {
  .hz-compare { grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; }
  .hz-compare__col { padding: 40px; }
  .hz-compare__vs { display: flex; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: 48px; height: 48px; border-radius: 50%; align-items: center; justify-content: center; background: var(--hz-navy); color: #fff; font-size: .78rem; font-weight: 700; box-shadow: 0 0 0 6px #fff; }
  :is(.bg-grey) .hz-compare__vs { box-shadow: 0 0 0 6px var(--sc-grey-bg); }
  :is(.bg-offwhite) .hz-compare__vs { box-shadow: 0 0 0 6px var(--sc-offwhite); }
  :is(.bg-navy, .hz-dark) .hz-compare__vs { background: var(--hz-purple); box-shadow: 0 0 0 6px var(--sc-dark); }
}
/* comparison table: wrap in .hz-table-wrap so it scrolls sideways on phones; first column sticks */
.hz-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--sc-radius, 24px); box-shadow: var(--hz-card-shadow); border: 1px solid var(--hz-card-border); background: var(--hz-card-bg); }
.hz-table { width: 100%; min-width: 600px; border-collapse: separate; border-spacing: 0; font-size: .89rem; line-height: 1.45; }
.hz-table th, .hz-table td { padding: 16px 16px; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--hz-line); color: var(--hz-body); }
.hz-table thead th { font-size: .89rem; font-weight: 600; color: var(--hz-fg); padding-top: 24px; padding-bottom: 20px; vertical-align: bottom; }
.hz-table tbody th, .hz-table thead th:first-child { text-align: left; font-weight: 600; color: var(--hz-fg); }
.hz-table tbody th { font-weight: 500; }
.hz-table tbody th small { display: block; font-weight: 400; color: var(--hz-muted); font-size: .78rem; }
.hz-table tr:last-child > * { border-bottom: 0; }
.hz-table :is(th, td):first-child { position: sticky; left: 0; z-index: 1; background: var(--hz-card-bg); min-width: 180px; }
:is(.bg-navy, .hz-dark) .hz-table :is(th, td):first-child { background: #1d1d52; }
.hz-table .hz-hl { background: var(--hz-accent-soft); }
.hz-table thead .hz-hl { background: var(--hz-purple); color: #fff; border-radius: 16px 16px 0 0; }
.hz-table tr:last-child .hz-hl { border-radius: 0 0 16px 16px; }
.hz-table td small { display: block; font-size: .72rem; color: var(--hz-muted); margin-top: 4px; }
:is(.bg-navy, .hz-dark) .hz-table-wrap { background: rgba(255, 255, 255, .04); }
@media (min-width: 768px) { .hz-table th, .hz-table td { padding: 18px 24px; } .hz-table :is(th, td):first-child { position: static; } }
/* .hz-table--stack: below 768px every row becomes a small card (row label on top, one cell per column with its
   column name from data-label). Recommended: the highlighted column stays visible without sideways scrolling. */
@media (max-width: 767px) {
  .hz-table.hz-table--stack { min-width: 0; }
  .hz-table--stack thead { display: none; }
  .hz-table--stack tbody { display: block; }
  .hz-table--stack tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 16px 12px; border-bottom: 1px solid var(--hz-line); }
  .hz-table--stack tr:last-child { border-bottom: 0; }
  .hz-table--stack tbody th { grid-column: 1 / -1; position: static !important; background: none !important; min-width: 0 !important; border: 0; padding: 0 4px 4px; }
  .hz-table--stack td { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; padding: 10px 4px; border: 0; border-radius: 10px !important; }
  .hz-table--stack td::before { content: attr(data-label); font-size: .67rem; font-weight: 600; line-height: 1.25; color: var(--hz-muted); }
  .hz-table--stack td.hz-hl::before { color: var(--hz-accent-ink); }
  .hz-table--stack td small { margin-top: 0; }
}

/* ==========================================================================
   5. hz-cards: icon cards (3 up) + icon sprite
   ========================================================================== */
.hz-cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
.hz-card { position: relative; background: var(--hz-card-bg); border: 1px solid var(--hz-card-border); box-shadow: var(--hz-card-shadow); border-radius: var(--sc-radius, 24px); padding: 28px 24px; display: flex; flex-direction: column; }
.hz-card__icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--hz-accent-soft); color: var(--hz-accent-ink); margin-bottom: 20px; }
.hz-card__icon .hz-icon { width: 26px; height: 26px; }
.hz-card__title { margin: 0 0 8px; font-size: 1.11rem; line-height: 1.35; color: var(--hz-fg); }
.hz-card__desc { margin: 0; font-size: .89rem; line-height: 1.55; color: var(--hz-body); }
.hz-card__more { margin-top: 16px; padding-top: 0; font-weight: 600; font-size: .89rem; color: var(--hz-accent-ink) !important; text-decoration: none !important; }
.hz-card__more::after { content: " \2192"; }
.hz-card .hz-tag { align-self: flex-start; margin-bottom: 12px; }
.hz-card__link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.hz-card:has(.hz-card__link):hover { box-shadow: var(--sc-shadow-hover); transform: translateY(-2px); transition: .2s; }
/* icon colour variants */
.hz-card__icon--green  { background: var(--hz-tick-soft); color: var(--hz-tick); }
.hz-card__icon--yellow { background: #fff1c4; color: #8a6200; }
.hz-card__icon--blue   { background: #e2f3fd; color: #0b78b0; }
.hz-card__icon--navy   { background: var(--hz-navy); color: #fff; }
:is(.bg-navy, .hz-dark) .hz-card__icon--yellow { background: rgba(251, 196, 14, .18); color: var(--hz-yellow); }
:is(.bg-navy, .hz-dark) .hz-card__icon--blue { background: rgba(63, 181, 245, .18); color: #8fd6ff; }
:is(.bg-navy, .hz-dark) .hz-card__icon--navy { background: #fff; color: var(--hz-navy); }
/* flat variant: no box, for busy sections */
.hz-cards--flat .hz-card { background: transparent; border: 0; box-shadow: none; padding: 0; }
@media (min-width: 768px) {
  .hz-cards { gap: 24px; }
  .hz-cards--2 { grid-template-columns: repeat(2, 1fr); }
  .hz-cards--3 { grid-template-columns: repeat(3, 1fr); }
  .hz-cards--4 { grid-template-columns: repeat(2, 1fr); }
  .hz-card { padding: 32px; }
  .hz-cards--flat { gap: 40px 32px; }
}
@media (min-width: 1140px) { .hz-cards--4 { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   6. hz-stack: value stack with EXISTS / PROPOSED tags and a worth column
   ========================================================================== */
.hz-stack { background: #fff; border-radius: var(--sc-radius, 24px); box-shadow: var(--sc-shadow-hover); overflow: hidden; color: var(--sc-text); max-width: 900px; margin: 0 auto; }
.hz-stack__head { display: none; }
.hz-stack__list { list-style: none; margin: 0; padding: 8px 20px; }
.hz-stack__row { display: grid; grid-template-columns: 28px 1fr; column-gap: 14px; padding: 20px 0; border-bottom: 1px solid #efecf3; }
.hz-stack__row:last-child { border-bottom: 0; }
.hz-stack__row::before { content: ""; grid-row: 1 / span 2; width: 26px; height: 26px; margin-top: 2px; border-radius: 50%; background: var(--sc-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.6 2.6L10 3.2' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
.hz-stack__row.hz-proposed::before, .hz-stack__row--proposed::before { background-color: var(--hz-amber); }
.hz-stack__name { margin: 0 0 4px; font-weight: 600; font-size: 1rem; line-height: 1.4; color: var(--sc-dark); }
.hz-stack__name .hz-tag { margin-left: 6px; position: relative; top: -1px; }
.hz-stack__desc { margin: 0; font-size: .83rem; line-height: 1.5; color: var(--sc-text); }
.hz-stack__worth { grid-column: 2; margin: 10px 0 0; font-size: .83rem; line-height: 1.45; color: var(--sc-text); }
.hz-stack__worth b { display: inline; font-size: 1.05rem; font-weight: 700; color: var(--sc-dark); margin-right: 6px; font-variant-numeric: tabular-nums; }
.hz-stack__total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; background: var(--hz-navy); color: #fff; padding: 20px; }
.hz-stack__total span:first-child { font-weight: 600; }
.hz-stack__total b { color: #fff; font-size: 1.44rem; font-variant-numeric: tabular-nums; }
.hz-stack__total small { flex-basis: 100%; color: rgba(255, 255, 255, .72); font-size: .78rem; }
:is(.bg-navy, .hz-dark) .hz-stack__total { background: var(--hz-purple); }   /* navy band would merge with a navy section */
:is(.bg-navy, .hz-dark) .hz-stack__total small { color: rgba(255, 255, 255, .88); }
.hz-stack__foot { padding: 28px 20px 32px; text-align: center; }
.hz-stack__price { margin: 0 0 4px; font-size: 1.22rem; font-weight: 600; color: var(--sc-dark); }
.hz-stack__price s { color: #9a92a5; font-weight: 400; margin-right: 8px; }
.hz-stack__foot p { margin: 0 auto 20px; max-width: 560px; font-size: .89rem; }
.hz-stack :is(h1, h2, h3, h4, strong) { color: var(--sc-dark); }
.hz-stack a:not(.btn) { color: var(--sc-accent); text-decoration: none; }
@media (min-width: 768px) {
  .hz-stack__head { display: grid; grid-template-columns: 1fr 220px; gap: 32px; padding: 20px 40px 16px 82px; font-size: .67rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a8296; border-bottom: 1px solid #efecf3; }
  .hz-stack__head span:last-child { text-align: right; }
  .hz-stack__list { padding: 0 40px; }
  .hz-stack__row { grid-template-columns: 28px 1fr 220px; column-gap: 14px; padding: 22px 0; align-items: start; }
  .hz-stack__row::before { grid-row: 1; }
  .hz-stack__worth { grid-column: 3; grid-row: 1; margin: 0; padding-left: 18px; text-align: right; }
  .hz-stack__worth b { display: block; margin: 0 0 2px; }
  .hz-stack__total { padding: 22px 40px 22px 82px; }
  .hz-stack__total small { order: 3; }
  .hz-stack__foot { padding: 36px 40px 40px; }
}

/* ==========================================================================
   7. hz-guarantee: risk-reversal box with a seal
   ========================================================================== */
.hz-guarantee { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 20px; text-align: center; background: var(--hz-card-bg); border: 2px solid var(--hz-yellow); border-radius: var(--sc-radius, 24px); padding: 32px 24px; box-shadow: var(--hz-card-shadow); max-width: 900px; margin: 0 auto; }
.hz-guarantee__title { margin: 0 0 10px; font-size: 1.44rem; line-height: 1.3; color: var(--hz-fg); }
.hz-guarantee__body p { margin: 0 0 12px; color: var(--hz-body); }
.hz-guarantee__body p:last-child { margin-bottom: 0; }
.hz-guarantee__fine { font-size: .78rem; color: var(--hz-muted) !important; }
.hz-guarantee .hz-checks { text-align: left; margin: 16px 0; }
.hz-seal { position: relative; width: 132px; height: 132px; flex: 0 0 auto; color: var(--hz-navy); }
.hz-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hz-seal__text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.05; padding: 22px; }
.hz-seal__big { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; color: var(--hz-navy); }
.hz-seal__small { margin-top: 3px; font-size: .56rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hz-navy); }
@media (min-width: 768px) {
  .hz-guarantee { grid-template-columns: 150px 1fr; justify-items: start; align-items: center; text-align: left; gap: 40px; padding: 40px 48px; }
  .hz-seal { width: 150px; height: 150px; }
  .hz-seal__big { font-size: 2.3rem; }
}

/* ==========================================================================
   8. hz-frame: browser frame and phone frame for screenshots
   ========================================================================== */
.hz-frame { margin: 0; }
.hz-browser { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 48px rgba(19, 19, 69, .12), 0 6px 14px rgba(19, 19, 69, .08); border: 1px solid #e6e2ee; }
:is(.bg-navy, .hz-dark) .hz-browser { border-color: rgba(255, 255, 255, .2); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.hz-browser__bar { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 14px; background: #f3f1f6; border-bottom: 1px solid #e6e2ee; }
.hz-browser__dots { display: flex; gap: 6px; flex: 0 0 auto; }
.hz-browser__dots i { width: 10px; height: 10px; border-radius: 50%; background: #d9d4e2; display: block; }
.hz-browser__url { flex: 1 1 auto; min-width: 0; max-width: 420px; margin: 0 auto; height: 22px; line-height: 22px; border-radius: 6px; background: #fff; color: #7a7286; font-size: 11px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 10px; }
.hz-browser__screen { position: relative; background: #fff; }
.hz-browser__screen img { width: 100%; height: auto; display: block; }
/* tall screenshots: cap the height and show the top; .hz-browser--fade adds a soft fade at the cut */
.hz-browser--crop .hz-browser__screen { max-height: var(--hz-crop, 520px); overflow: hidden; }
.hz-browser--crop .hz-browser__screen img { object-fit: cover; object-position: top; }
.hz-browser--fade .hz-browser__screen::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none; }
@media (max-width: 767px) { .hz-browser--crop .hz-browser__screen { max-height: var(--hz-crop-mobile, 320px); } .hz-browser__bar { height: 28px; } .hz-browser__dots i { width: 8px; height: 8px; } .hz-browser__url { font-size: 10px; height: 18px; line-height: 18px; } }
.hz-frame__cap { margin: 14px 0 0; font-size: .78rem; line-height: 1.5; color: var(--hz-muted); }
.hz-frame__cap b { color: var(--hz-fg); font-weight: 600; }
.text-center .hz-frame__cap, .hz-frame--center .hz-frame__cap { text-align: center; }
/* phone */
.hz-phone { width: 100%; max-width: 260px; margin: 0 auto; background: #0e0e33; border-radius: 40px; padding: 10px; box-shadow: 0 24px 48px rgba(19, 19, 69, .22), inset 0 0 0 2px #2a2a66; position: relative; }
.hz-phone__screen { border-radius: 31px; overflow: hidden; background: #fff; position: relative; aspect-ratio: 390 / 844; display: flex; flex-direction: column; }
.hz-phone__screen::after { content: ""; flex: 0 0 26px; order: -1; background: #fff; }   /* status bar, so the notch never covers the screenshot */
.hz-phone__screen img { width: 100%; flex: 1 1 auto; min-height: 0; height: auto; object-fit: cover; object-position: top; display: block; }
.hz-phone__screen::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 76px; height: 20px; border-radius: 12px; background: #0e0e33; z-index: 1; }
.hz-phone--nonotch .hz-phone__screen::before, .hz-phone--nonotch .hz-phone__screen::after { display: none; }
:is(.bg-navy, .hz-dark) .hz-phone { box-shadow: 0 24px 60px rgba(0, 0, 0, .4), inset 0 0 0 2px #3a3a80; }
/* browser + phone together: phone overlaps the bottom right from 768px up, sits below on phones */
.hz-devices { position: relative; display: grid; gap: 24px; }
.hz-devices .hz-phone { max-width: 200px; }
@media (min-width: 768px) {
  .hz-devices { display: block; padding-right: 72px; padding-bottom: 48px; }
  .hz-devices .hz-phone { position: absolute; right: 0; bottom: 0; width: 30%; max-width: 210px; z-index: 2; }
}

/* ==========================================================================
   9. hz-captable: donut + stacked bar driven by CSS variables (--a --b --c --d --e = percentages)
   ========================================================================== */
.hz-captable { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
.hz-donut { position: relative; width: 100%; max-width: 280px; margin: 0 auto; aspect-ratio: 1; --a: 0; --b: 0; --c: 0; --d: 0; --e: 0; }
.hz-donut svg { width: 100%; height: 100%; display: block; transform: rotate(-90deg); overflow: visible; }
.hz-donut circle { fill: none; stroke-width: 6; }
.hz-donut .hz-donut__track { stroke: var(--hz-track); }
.hz-donut :is(.hz-s1, .hz-s2, .hz-s3, .hz-s4, .hz-s5) { stroke-linecap: butt; }
.hz-donut .hz-s1 { stroke: var(--hz-c1); stroke-dasharray: max(calc(var(--a) - .6), 0) 100; stroke-dashoffset: 0; }
.hz-donut .hz-s2 { stroke: var(--hz-c2); stroke-dasharray: max(calc(var(--b) - .6), 0) 100; stroke-dashoffset: calc(-1 * var(--a)); }
.hz-donut .hz-s3 { stroke: var(--hz-c3); stroke-dasharray: max(calc(var(--c) - .6), 0) 100; stroke-dashoffset: calc(-1 * (var(--a) + var(--b))); }
.hz-donut .hz-s4 { stroke: var(--hz-c4); stroke-dasharray: max(calc(var(--d) - .6), 0) 100; stroke-dashoffset: calc(-1 * (var(--a) + var(--b) + var(--c))); }
.hz-donut .hz-s5 { stroke: var(--hz-c5); stroke-dasharray: max(calc(var(--e) - .6), 0) 100; stroke-dashoffset: calc(-1 * (var(--a) + var(--b) + var(--c) + var(--d))); }
.hz-donut__centre { position: absolute; inset: 24%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.2; }
.hz-donut__big { font-size: 1.44rem; font-weight: 700; color: var(--hz-fg); font-variant-numeric: tabular-nums; }
.hz-donut__small { font-size: .72rem; color: var(--hz-muted); margin-top: 2px; }
.hz-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.hz-legend li { display: grid; grid-template-columns: 14px 1fr auto; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--hz-line); font-size: .89rem; color: var(--hz-body); }
.hz-legend li:last-child { border-bottom: 0; }
.hz-legend li::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: var(--hz-sw, var(--hz-c1)); align-self: center; }
.hz-legend .hz-k1 { --hz-sw: var(--hz-c1); } .hz-legend .hz-k2 { --hz-sw: var(--hz-c2); } .hz-legend .hz-k3 { --hz-sw: var(--hz-c3); } .hz-legend .hz-k4 { --hz-sw: var(--hz-c4); } .hz-legend .hz-k5 { --hz-sw: var(--hz-c5); }
.hz-legend b { color: var(--hz-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.hz-legend small { display: block; font-size: .72rem; color: var(--hz-muted); }
.hz-legend--inline { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.hz-legend--inline li { display: inline-grid; grid-template-columns: 12px auto auto; gap: 8px; padding: 0; border: 0; font-size: .78rem; }
.hz-legend--inline li::before { width: 12px; height: 12px; border-radius: 3px; }
@media (min-width: 768px) {
  .hz-captable { grid-template-columns: minmax(200px, 280px) 1fr; gap: 40px; }
  .hz-captable .hz-donut { margin: 0; }
}
/* stacked bar (one bar = 100%) */
.hz-bar { --a: 0; --b: 0; --c: 0; --d: 0; --e: 0; display: flex; width: 100%; height: 40px; border-radius: 10px; overflow: hidden; background: var(--hz-track); gap: 2px; }
.hz-bar > span { display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; font-size: .72rem; font-weight: 700; color: #fff; white-space: nowrap; }
.hz-bar > .hz-s1 { flex: 0 0 calc(var(--a) * 1% - 2px); background: var(--hz-c1); }
.hz-bar > .hz-s2 { flex: 0 0 calc(var(--b) * 1% - 2px); background: var(--hz-c2); color: #06344c; }
.hz-bar > .hz-s3 { flex: 0 0 calc(var(--c) * 1% - 2px); background: var(--hz-c3); color: #063b26; }
.hz-bar > .hz-s4 { flex: 0 0 calc(var(--d) * 1% - 2px); background: var(--hz-c4); color: #3d2c00; }
.hz-bar > .hz-s5 { flex: 0 0 calc(var(--e) * 1% - 2px); background: var(--hz-c5); color: #2a1366; }
.hz-bar > span:last-child { flex-grow: 1; }
.hz-bars { display: grid; gap: 18px; }
.hz-bars__row { display: grid; grid-template-columns: 1fr; gap: 6px; }
.hz-bars__label { font-size: .83rem; font-weight: 600; color: var(--hz-fg); }
.hz-bars__label small { font-weight: 400; color: var(--hz-muted); margin-left: 6px; }
@media (min-width: 768px) { .hz-bars__row { grid-template-columns: 170px 1fr; gap: 16px; align-items: center; } }

/* ==========================================================================
   10. hz-vesting: cliff + monthly vesting curve
   ========================================================================== */
.hz-vesting { --m: 30; --v: 62.5; position: relative; }
.hz-vesting__chart { display: grid; grid-template-columns: 40px 1fr; gap: 0 10px; }
.hz-vesting__y { position: relative; font-size: .67rem; color: var(--hz-muted); font-variant-numeric: tabular-nums; }
.hz-vesting__y span { position: absolute; right: 0; transform: translateY(50%); }
.hz-vesting__plot { position: relative; aspect-ratio: 1.6; border-left: 1.5px solid var(--hz-line); border-bottom: 1.5px solid var(--hz-line); }
.hz-vesting__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hz-vesting__grid { stroke: var(--hz-line); stroke-width: 1; stroke-dasharray: 3 4; }
.hz-vesting__area { fill: var(--hz-accent-soft); }
.hz-vesting__line { fill: none; stroke: var(--hz-accent); stroke-width: 2.5; stroke-linejoin: round; }
.hz-vesting__cliff { stroke: var(--hz-fg); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .55; }
.hz-vesting__now { position: absolute; left: calc(var(--m) / 48 * 100%); bottom: 0; height: calc(var(--v) * .95%); width: 0; border-left: 1.5px dashed var(--hz-tick); }
.hz-vesting__now::after { content: ""; position: absolute; top: -7px; left: -8.5px; width: 14px; height: 14px; border-radius: 50%; background: var(--hz-tick); box-shadow: 0 0 0 4px var(--hz-tick-soft); }
.hz-vesting__chip { position: absolute; z-index: 2; font-size: .67rem; font-weight: 600; line-height: 1.3; padding: 5px 9px; border-radius: 8px; background: var(--hz-navy); color: #fff; white-space: nowrap; }
:is(.bg-navy, .hz-dark) .hz-vesting__chip { background: #fff; color: var(--hz-navy); }
.hz-vesting__chip--cliff { right: calc(75% + 10px); bottom: calc(25% * .95 - 12px); }   /* sits left of the cliff line, in the empty area */
.hz-vesting__chip--now { left: calc(var(--m) / 48 * 100%); bottom: calc(var(--v) * .95% + 16px); transform: translateX(-50%); background: var(--hz-tick); color: #04281a; }
:is(.bg-navy, .hz-dark) .hz-vesting__chip--now { background: var(--hz-tick); color: #04281a; }
.hz-vesting__chip--end { right: 0; top: -2px; transform: translateY(-100%); }
.hz-vesting__x { position: relative; height: 22px; margin-left: 50px; font-size: .67rem; color: var(--hz-muted); font-variant-numeric: tabular-nums; }
.hz-vesting__x span { position: absolute; top: 6px; transform: translateX(-50%); white-space: nowrap; }
.hz-vesting__x span:first-child { transform: none; }
.hz-vesting__x span:last-child { transform: translateX(-100%); }
.hz-vesting__key { margin: 18px 0 0; }
@media (min-width: 768px) { .hz-vesting__plot { aspect-ratio: 2.4; } .hz-vesting__y, .hz-vesting__x { font-size: .72rem; } .hz-vesting__chip { font-size: .72rem; } }
@media (max-width: 767px) { .hz-vesting__chip--end, .hz-vesting__chip--cliff { display: none; } }   /* the legend carries both on phones */
.hz-legend .hz-kdash::before { height: 0; border-radius: 0; border-top: 2px dashed var(--hz-fg); background: none; opacity: .7; }

/* ==========================================================================
   11. hz-quote: testimonial card with initials avatar
   ========================================================================== */
.hz-quotes { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .hz-quotes { gap: 24px; } .hz-quotes--2 { grid-template-columns: repeat(2, 1fr); } .hz-quotes--3 { grid-template-columns: repeat(3, 1fr); } }
.hz-quote { position: relative; margin: 0; background: var(--hz-card-bg); border: 1px solid var(--hz-card-border); box-shadow: var(--hz-card-shadow); border-radius: var(--sc-radius, 24px); padding: 56px 24px 24px; display: flex; flex-direction: column; }
.hz-quote::before { content: "\201C"; position: absolute; top: 14px; left: 22px; font-size: 4rem; line-height: 1; font-weight: 700; color: var(--hz-accent); opacity: .5; }
.hz-quote__text { margin: 0 0 24px; font-size: 1rem; line-height: 1.6; color: var(--hz-fg); }
.hz-quote__text p { margin: 0; }
.hz-quote__by { margin-top: auto; display: flex; align-items: center; gap: 14px; }
.hz-avatar { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .89rem; font-weight: 700; letter-spacing: .02em; background: var(--hz-accent-soft); color: var(--hz-accent-ink); overflow: hidden; }
.hz-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hz-avatar--yellow { background: #fff1c4; color: #6b4d00; }
.hz-avatar--green { background: var(--hz-tick-soft); color: var(--hz-tick); }
.hz-avatar--blue { background: #e2f3fd; color: #0b6696; }
.hz-quote__name { display: block; font-weight: 600; font-size: .89rem; color: var(--hz-fg); }
.hz-quote__role { display: block; font-size: .78rem; line-height: 1.4; color: var(--hz-muted); }
/* large single quote */
.hz-quote--lg { max-width: 860px; margin: 0 auto; text-align: center; align-items: center; padding: 72px 32px 40px; }
.hz-quote--lg::before { left: 50%; transform: translateX(-50%); }
.hz-quote--lg .hz-quote__text { font-size: 1.22rem; }
.hz-quote--lg .hz-quote__by { margin-top: 0; text-align: left; }
@media (min-width: 768px) { .hz-quote { padding: 60px 32px 32px; } .hz-quote--lg { padding: 80px 64px 48px; } .hz-quote--lg .hz-quote__text { font-size: 1.44rem; } }

/* ==========================================================================
   12. hz-notfor: "who this is not for" strip
   ========================================================================== */
.hz-notfor { border: 1.5px dashed var(--hz-line); border-radius: var(--sc-radius, 24px); padding: 24px; background: transparent; }
.hz-notfor__title { margin: 0 0 16px; font-size: 1.11rem; font-weight: 600; color: var(--hz-fg); }
.hz-notfor__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.hz-notfor__list li { position: relative; padding-left: 34px; font-size: .89rem; line-height: 1.5; color: var(--hz-body); }
.hz-notfor__list li::before { content: ""; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--hz-cross-soft); }
.hz-notfor__list li::after { content: ""; position: absolute; left: 6px; top: 6px; width: 10px; height: 10px; background: var(--hz-cross);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 2.5l7 7M9.5 2.5l-7 7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 2.5l7 7M9.5 2.5l-7 7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.hz-notfor__list li strong { display: block; color: var(--hz-fg); }
.hz-notfor__alt { margin: 18px 0 0; font-size: .83rem; color: var(--hz-muted); }
@media (min-width: 768px) {
  .hz-notfor { padding: 32px 40px; }
  .hz-notfor__list { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .hz-notfor--2 .hz-notfor__list { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   13. hz-faq: details/summary accordion
   ========================================================================== */
.hz-faq { display: grid; gap: 12px; max-width: 860px; margin: 0 auto; }
.hz-faq details { background: var(--hz-card-bg); border: 1px solid var(--hz-card-border); border-radius: var(--sc-radius-sm, 16px); transition: box-shadow .2s; }
.hz-faq details[open] { box-shadow: var(--hz-card-shadow); }
.hz-faq summary { list-style: none; cursor: pointer; position: relative; padding: 20px 64px 20px 20px; font-weight: 600; font-size: 1rem; line-height: 1.45; color: var(--hz-fg); }
.hz-faq summary::-webkit-details-marker { display: none; }
.hz-faq summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: var(--hz-accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.6L6 7.6 9 4.6' fill='none' stroke='%238b5cff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .2s; }
:is(.bg-navy, .hz-dark) .hz-faq summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.6L6 7.6 9 4.6' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.hz-faq details[open] summary::after { transform: rotate(180deg); }
.hz-faq summary:focus-visible { outline: 2px solid var(--hz-accent); outline-offset: 2px; border-radius: var(--sc-radius-sm, 16px); }
.hz-faq__a { padding: 0 20px 20px; font-size: .89rem; line-height: 1.6; color: var(--hz-body); }
.hz-faq__a p:last-child { margin-bottom: 0; }
@media (min-width: 768px) { .hz-faq summary { padding: 22px 72px 22px 28px; font-size: 1.05rem; } .hz-faq__a { padding: 0 72px 24px 28px; } }

/* ==========================================================================
   14. hz-band: quiet CTA band (one sentence, one button, one proof line)
   ========================================================================== */
.hz-band { padding-top: 56px; padding-bottom: 56px; }
.hz-band__inner { max-width: var(--sc-content, 1248px); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.hz-band__line { margin: 0; font-size: 1.33rem; line-height: 1.4; font-weight: 600; color: var(--hz-fg); max-width: 720px; }
.hz-band__proof { margin: 0; font-size: .83rem; color: var(--hz-muted); }
.hz-band--boxed .hz-band__inner { background: var(--hz-card-bg); border: 1px solid var(--hz-card-border); box-shadow: var(--hz-card-shadow); border-radius: var(--sc-radius, 24px); padding: 32px 24px; }
@media (min-width: 768px) {
  .hz-band__inner { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "line btn" "proof btn"; align-items: center; gap: 6px 40px; text-align: left; }
  .hz-band__line { grid-area: line; font-size: 1.44rem; }
  .hz-band__inner > .btn, .hz-band__inner > .inline-items { grid-area: btn; }
  .hz-band__proof { grid-area: proof; }
  .hz-band--boxed .hz-band__inner { padding: 36px 48px; }
  .hz-band--center .hz-band__inner { display: flex; text-align: center; }
}

/* ==========================================================================
   15. hz-confetti: decorative Memphis layer for navy heroes and the CTA band
   Put <div class="hz-confetti" aria-hidden="true">...</div> as the FIRST child of the section.
   ========================================================================== */
.hz-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hz-confetti ~ * { position: relative; z-index: 1; }
/* side strips live in the page gutters only (outside the 1248px content width), so they never sit behind text */
.hz-confetti svg { position: absolute; top: 0; height: 100%; width: max(calc((100% - var(--sc-content, 1248px)) / 2), 0px); max-width: none; opacity: .6; }
.hz-confetti--wide svg { width: max(calc((100% - 980px) / 2), 0px); }       /* centred CTA bands: wider gutters */
.hz-confetti .hz-confetti__l { left: 0; }
.hz-confetti .hz-confetti__r { right: 0; }
.hz-confetti .hz-confetti__b { display: none; }
.hz-confetti :is(.k1, .k2, .k3, .k4) { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hz-confetti .k1 { stroke: #b696ff; } .hz-confetti .f1 { fill: #b696ff; }
.hz-confetti .k2 { stroke: #fbc40e; } .hz-confetti .f2 { fill: #fbc40e; }
.hz-confetti .k3 { stroke: #41cc94; } .hz-confetti .f3 { fill: #41cc94; }
.hz-confetti .k4 { stroke: #3fb5f5; } .hz-confetti .f4 { fill: #3fb5f5; }
.bg-purple .hz-confetti :is(.k1, .k2, .k3, .k4) { stroke: #fff; }
.bg-purple .hz-confetti :is(.f1, .f2, .f3, .f4) { fill: #fff; }
.bg-purple .hz-confetti svg { opacity: .35; }
:is(.bg-white, .bg-offwhite, .bg-grey) .hz-confetti svg { opacity: .4; }
/* gutters too narrow for the side strips: show the bottom strip instead (it sits in the section's bottom padding) */
@media (max-width: 1339px) {
  .hz-confetti:not(.hz-confetti--wide) :is(.hz-confetti__l, .hz-confetti__r) { display: none; }
  .hz-confetti:not(.hz-confetti--wide) .hz-confetti__b { display: block; }
}
@media (max-width: 1099px) {
  .hz-confetti--wide :is(.hz-confetti__l, .hz-confetti__r) { display: none; }
  .hz-confetti--wide .hz-confetti__b { display: block; }
}
.hz-confetti .hz-confetti__b { top: auto; bottom: 12px; left: 0; right: 0; width: 100%; height: 28px; }
@media (max-width: 767px) { .hz-confetti .hz-confetti__b { bottom: 8px; height: 24px; } }

/* ==========================================================================
   16. hz-proposed: anything labelled "[PROPOSED – not approved]"
   Block: add .hz-proposed to the element (optionally data-hz-label="PROPOSED – not approved: Quintus").
   Inline: <span class="hz-proposed-inline">text</span>. Tag only: <span class="hz-tag hz-tag--proposed">PROPOSED</span>.
   Review markers stay .kit-note (base.css).
   ========================================================================== */
.hz-proposed { position: relative; outline: 2px dashed var(--hz-amber); outline-offset: 6px; margin-top: 22px; }
:is(.hz-cards, .hz-quotes, .hz-stats, .hz-compare, .hz-steps, .hz-faq) > .hz-proposed { margin-top: 0; }
.hz-proposed::after { content: "PROPOSED \2013  not approved"; position: absolute; z-index: 3; top: -6px; left: 14px; transform: translateY(-50%); font: 700 10px/1.3 var(--sc-font); letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; background: var(--hz-yellow); color: #3d2c00; white-space: nowrap; pointer-events: none; }
.hz-proposed[data-hz-label]::after { content: attr(data-hz-label); }
:is(.bg-navy, .bg-purple, .hz-dark) .hz-proposed { outline-color: var(--hz-yellow); }
/* rows inside a list or the value stack: no top margin, tag on the right */
.hz-stack__row.hz-proposed { outline-offset: -2px; margin-top: 0; padding-left: 12px; padding-right: 12px; border-radius: 12px; background: #fffaf0; margin-left: -12px; margin-right: -12px; padding-top: 28px; }
.hz-stack__row.hz-proposed::after { left: auto; right: 12px; top: 14px; }
.hz-proposed-inline { background: var(--hz-amber-bg); color: var(--hz-amber-ink); border-bottom: 2px dashed var(--hz-amber); padding: 0 .2em; border-radius: 3px 3px 0 0; }
:is(.bg-navy, .bg-purple, .hz-dark) .hz-proposed-inline { background: rgba(251, 196, 14, .2); color: #ffe08a; border-bottom-color: var(--hz-yellow); }
.hz-proposed-inline::before { content: "PROPOSED "; font-size: .62em; font-weight: 700; letter-spacing: .06em; vertical-align: .15em; }

/* ---------- layout helpers (optional) ---------- */
.hz-gap-top { margin-top: 48px; }
.hz-center { margin-left: auto; margin-right: auto; text-align: center; }
.hz-maxw { max-width: 900px; margin-left: auto; margin-right: auto; }
@media (max-width: 767px) { .hz-gap-top { margin-top: 32px; } }

/* ==========================================================================
   hz-fig--hovercap (added 2026-11-02, contract: ../hormozi/02-DANIEL-FEEDBACK-2026-11-02.md section C)
   Caption hidden by default (still read by screen readers); on hover or keyboard focus it shows as a navy
   overlay bar at the bottom of the figure. Touch devices (hover: none) never show it; the img alt is the fallback.
   Markup: <figure class="hz-fig hz-fig--hovercap" tabindex="0"> <div class="hz-browser">...</div> <figcaption>...</figcaption> </figure>
   Works on any figure wrapper (hz-frame, .pN- figures): the class sets position: relative itself.
   Bar radius follows the frame: --hz-hovercap-radius (default 14px = .hz-browser). Phone frames: set it to 31px.
   ========================================================================== */
.hz-fig--hovercap { position: relative; }
:where(.hz-fig, .hz-fig--hovercap) { margin: 0; }   /* zero specificity: drops the UA figure margin, page margins still win */
.hz-fig--hovercap > figcaption {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  opacity: 0; transition: opacity 150ms ease; pointer-events: none;
  background: rgba(19, 19, 69, .92); color: #fff;
  font: 400 13px/1.45 var(--sc-font); text-align: left;
  border-radius: 0 0 var(--hz-hovercap-radius, 14px) var(--hz-hovercap-radius, 14px);
}
.hz-fig--hovercap > figcaption :is(b, strong, a) { color: inherit; }
.hz-fig--hovercap:is(:hover, :focus-within) > figcaption {
  width: auto; height: auto; margin: 0; padding: 8px 12px; overflow: visible;
  clip: auto; clip-path: none; white-space: normal; opacity: 1;
}
.hz-fig--hovercap:focus-visible { outline: 2px solid var(--hz-accent); outline-offset: 4px; border-radius: var(--hz-hovercap-radius, 14px); }
@media (hover: none) {
  .hz-fig--hovercap:is(:hover, :focus-within) > figcaption {
    width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) { .hz-fig--hovercap > figcaption { transition: none; } }