/* ============================================================
   Leadership Level Diagnostic — HubSpot custom module
   Self-contained. No @huntclub/ui bundle, no Tailwind, no React.

   Everything is scoped under .hc-lld so the module cannot leak
   styles into the HubSpot page, and the reset block stops the
   page theme from leaking in.

   Tokens below are the resolved values of the HuntClubUI
   "editorial light" theme. If the design system changes, update
   the :root block here — nothing else references raw colors.
   ============================================================ */

.hc-lld {
  /* ---- color (editorial · light) ---- */
  --color-background:         #f9f7f3;
  --color-foreground:         #0c0c0b;
  --color-card:               #ffffff;
  --color-card-foreground:    #0c0c0b;
  --color-popover:            #ffffff;
  --color-popover-foreground: #0c0c0b;
  --color-primary:            #1e5c3a;
  --color-primary-foreground: #f9f7f3;
  --color-muted:              #f4f1eb;
  --color-muted-foreground:   #3d3d3a;
  --color-border:             #e6e3dc;
  --color-brand-translucent:  rgba(47, 145, 88, 0.18);
  --color-brand-dark:         #0e3320;
  --color-warning-dark:       #604618;
  --color-subtle:             #6b6a63;   /* small helper text, 4.5:1 on cream */
  --color-pale:               #d2eedb;
  --color-link:               #267044;

  /* ---- shape / motion ---- */
  --radius-surface: 14px;
  --radius-pill:    100px;
  --shadow-lift:    0 8px 20px rgba(0, 0, 0, 0.06);
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- type families ----
     DM Sans is the site's body face; the mono role resolves to it too. */
  --font-body:  "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Lora", Georgia, "Times New Roman", serif;
  --font-mono:  "DM Sans", "Helvetica Neue", Arial, sans-serif;

  container-type: inline-size;
  container-name: lld;
  background: var(--color-background);
  /* full-width rule separating the module from the about strip below */
  border-bottom: 1px solid var(--color-border);
  color: var(--color-foreground);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;

  /* The Hunt Club theme sets `html { text-align: center }`, which inherits
     into everything that does not declare its own alignment. Stop it here,
     at the module root, so the whole subtree starts left-aligned. The few
     places that are deliberately centred or right-aligned declare it
     directly on the element, which always beats an inherited value. */
  text-align: left;
}

/* ---- scoped reset: block the HubSpot theme from bleeding in ---- */
.hc-lld *,
.hc-lld *::before,
.hc-lld *::after { box-sizing: border-box; }

.hc-lld h1, .hc-lld h2, .hc-lld h3, .hc-lld p, .hc-lld figure {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

.hc-lld button {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  border-radius: 0;
  text-align: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.hc-lld input {
  font: inherit;
  color: inherit;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

.hc-lld svg { display: block; max-width: 100%; }
.hc-lld strong { font-weight: 600; }
.hc-lld em { font-style: italic; }

.hc-lld a { color: var(--color-primary); text-decoration: none; }
.hc-lld a:hover { color: var(--color-brand-dark); }

/* ============================================================
   Type roles — the HuntClubUI `type-*` ladder, scoped.
   Only the roles this surface actually uses are included.
   ============================================================ */

.hc-lld .type-eyebrow {
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-muted-foreground);
}
.hc-lld .type-intro {
  font-family: var(--font-body); font-size: 17px; font-weight: 300;
  line-height: 28px; color: var(--color-muted-foreground);
}
.hc-lld .type-body {
  font-family: var(--font-body); font-size: 15px; font-weight: 400; line-height: 1.65;
}
.hc-lld .type-label {
  font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 20px;
}
.hc-lld .type-caption {
  font-family: var(--font-body); font-size: 11px; font-weight: 400;
  line-height: 16px; color: var(--color-muted-foreground);
}

.hc-lld .type-serif-headline {
  font-family: var(--font-serif); font-size: clamp(36px, 4vw, 64px);
  font-weight: 400; letter-spacing: -.03em; line-height: 1.1;
}
.hc-lld .type-serif-subhead {
  font-family: var(--font-serif); font-size: clamp(32px, 3.5vw, 52px);
  font-weight: 400; letter-spacing: -.03em; line-height: 1.1;
}
.hc-lld .type-serif-lead {
  font-family: var(--font-serif); font-size: 21px; font-weight: 400; line-height: 32px;
}
.hc-lld .type-serif-body {
  font-family: var(--font-serif); font-size: 16px; font-weight: 400; line-height: 26px;
}
.hc-lld .type-serif-footnote {
  font-family: var(--font-serif); font-size: 14px; font-weight: 400;
  font-style: italic; line-height: 22px; color: var(--color-muted-foreground);
}

.hc-lld .type-mono-eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
}
.hc-lld .type-mono-meta {
  font-family: var(--font-mono); font-size: 13px; font-weight: 400;
  color: var(--color-muted-foreground);
}
.hc-lld .type-mono-caption {
  font-family: var(--font-mono); font-size: 11px; font-weight: 400;
  line-height: 16px; color: var(--color-muted-foreground);
}
.hc-lld .type-mono-metric {
  font-family: var(--font-mono); font-size: 28px; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.hc-lld .type-mono-stat {
  font-family: var(--font-mono); font-size: 22px; font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Structure
   ============================================================ */

.lld-wrap { max-width: 1120px; margin: 0 auto; }
.hc-lld .lld-muted { color: var(--color-muted-foreground); }
.hc-lld .lld-green { color: var(--color-primary); }

/* ---- buttons ---- */
.hc-lld .lld-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; cursor: pointer; white-space: nowrap;
  font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 20px;
  min-height: 44px; padding: 0 20px; border-radius: var(--radius-pill); flex-shrink: 0;
  border: 1px solid var(--color-primary);
  background: var(--color-primary); color: #ffffff;
  transition: background .2s var(--ease-out), color .2s var(--ease-out), opacity .2s;
}
.hc-lld .lld-btn:hover { background: var(--color-brand-dark); border-color: var(--color-brand-dark); color: #ffffff; }
.hc-lld .lld-btn:focus-visible,
.hc-lld .lld-lvl:focus-visible,
.hc-lld .lld-sp:focus-visible,
.hc-lld .lld-linkbtn:focus-visible,
.hc-lld .lld-textbtn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.hc-lld .lld-btn[disabled] { opacity: .45; cursor: not-allowed; }
.hc-lld .lld-btn[disabled]:hover { background: var(--color-primary); border-color: var(--color-primary); }
.hc-lld .lld-btn--lg { min-height: 52px; padding: 0 28px; font-size: 16px; }
.hc-lld .lld-btn--outline { background: var(--color-card); color: var(--color-primary); }
.hc-lld .lld-btn--outline:hover { background: var(--color-muted); color: var(--color-primary); border-color: var(--color-primary); }
.hc-lld .lld-btn--locked,
.hc-lld .lld-btn--locked[disabled] { opacity: 1; background: var(--color-card); color: var(--color-subtle); border-color: #d6d1c6; }
.hc-lld .lld-btn--locked[disabled]:hover { background: var(--color-card); border-color: #d6d1c6; }

.hc-lld .lld-linkbtn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer;
  font-size: 15px; font-weight: 500; color: var(--color-link); transition: color .2s;
}
.hc-lld .lld-linkbtn:hover { color: var(--color-brand-dark); }
.hc-lld .lld-textbtn {
  min-height: 44px; padding: 0 12px; cursor: pointer;
  font-size: 13px; color: var(--color-subtle); text-decoration: underline; text-underline-offset: 3px;
}
.hc-lld .lld-textbtn:hover { color: var(--color-foreground); }
.hc-lld .lld-textbtn[disabled] { opacity: .45; cursor: default; text-decoration: none; }
.hc-lld .lld-textbtn[data-armed="1"] { color: #b3261e; }
.hc-lld .lld-textbtn--green { padding: 0; font-size: 14px; font-weight: 500; color: var(--color-link); text-decoration: none; }
.hc-lld .lld-textbtn--green:hover { color: var(--color-brand-dark); text-decoration: underline; }

/* ---- hero (first category only) ---- */
.lld-hero { padding: 64px 24px 56px; }
.lld-hero-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; }
.hc-lld .lld-hero-h { margin-top: 14px; text-wrap: balance; }
.lld-start-row { margin-top: 32px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hc-lld .lld-steps {
  margin: 36px 0 0; padding: 24px 0 0; list-style: none;
  border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 14px;
}
.hc-lld .lld-steps li { display: flex; gap: 14px; align-items: baseline; font-size: 15px; line-height: 1.5; margin: 0; padding: 0; }
.hc-lld .lld-steps li::before, .hc-lld .lld-steps li::marker { content: none; }
.lld-step-n {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-pale); color: var(--color-primary);
  font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center;
}

/* ---- example report ---- */
.hc-lld .lld-example { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.lld-example-frame {
  border-radius: 16px; border: 1px solid var(--color-border); background: var(--color-muted);
  padding: 24px; display: flex; flex-direction: column; gap: 18px;
}
.lld-example-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lld-example-tag {
  padding: 6px 12px; border-radius: var(--radius-pill); background: var(--color-foreground); color: #ffffff;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.lld-example-card {
  border-radius: 12px; background: var(--color-card); border: 1px solid var(--color-border);
  padding: 20px; display: flex; flex-direction: column; gap: 16px;
}
.lld-example-meta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--color-muted-foreground); }
.lld-example-meta span + span { font-size: 12px; color: var(--color-subtle); }
.lld-example-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: center; }
.lld-example-stats { display: flex; flex-direction: column; gap: 16px; }
.lld-example-k { font-size: 12px; color: var(--color-muted-foreground); }
.lld-example-level { font-family: var(--font-serif); font-size: 26px; line-height: 1.2; color: var(--color-primary); }
.lld-example-gap { padding-top: 12px; border-top: 1px solid var(--color-border); font-size: 14px; }
.lld-example-gap strong { display: block; margin-top: 2px; font-weight: 600; }
.hc-lld .lld-example figcaption { font-size: 14px; line-height: 1.55; color: var(--color-muted-foreground); text-wrap: pretty; }
.lld-example .lld-legend { justify-content: center; gap: 6px 12px; font-size: 11px; margin-top: 10px; }

/* ---- stepper ----
   One row: five categories, then Results. Not sticky: each category is
   short, and the footer's Next button moves forward. */
.lld-stepper {
  background: var(--color-card); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
  padding: 0 24px;
}
.hc-lld .lld-sp-row {
  max-width: 1120px; margin: 0 auto; padding: 14px 0; list-style: none;
  display: flex; align-items: center; gap: 8px;
}
.hc-lld .lld-sp-item { flex: 1 1 0; min-width: 0; margin: 0; padding: 0; list-style: none; }
.hc-lld .lld-sp-item--results { flex: 0 0 auto; margin-left: 8px; }
.hc-lld .lld-sp {
  width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 8px; cursor: pointer;
  padding: 8px 10px 10px; border-radius: 10px; color: var(--color-foreground); text-align: left; transition: background .2s;
}
.hc-lld .lld-sp:hover { background: var(--color-muted); }
.hc-lld .lld-sp-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hc-lld .lld-sp-n {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #d6d1c6; font-size: 12px; font-weight: 600; color: var(--color-subtle); background: var(--color-card);
}
.hc-lld .lld-sp-name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-lld .lld-sp-bar { display: block; height: 3px; border-radius: 3px; background: var(--color-border); overflow: hidden; }
.hc-lld .lld-sp-bar > span { display: block; height: 3px; background: var(--color-primary); transition: width .5s var(--ease-out); }
.hc-lld .lld-sp[data-state="done"] .lld-sp-n { background: var(--color-pale); border-color: var(--color-pale); color: var(--color-primary); }
.hc-lld .lld-sp-item.is-active .lld-sp-n { background: var(--color-primary); border-color: var(--color-primary); color: #ffffff; }
.hc-lld .lld-sp-item.is-active .lld-sp-name { font-weight: 700; }
.hc-lld .lld-sp-item.is-active .lld-sp { background: var(--color-muted); }
.hc-lld .lld-sp--results, .hc-lld .lld-sp--results:hover { cursor: not-allowed; background: none; color: var(--color-subtle); }
.hc-lld .lld-sp--results .lld-sp-n { border-style: dashed; }
.hc-lld .lld-sp-hint { font-size: 11px; line-height: 1.2; color: var(--color-subtle); white-space: nowrap; }
.hc-lld .lld-sp-go { min-height: 44px; padding: 0 20px; white-space: nowrap; }
.hc-lld .lld-results-hint { font-size: 11px; line-height: 1.3; color: var(--color-subtle); text-align: center; }

/* ---- category + questions ---- */
.lld-cat { padding: 56px 24px 0; }
.lld-cat-head { display: flex; flex-direction: column; gap: 12px; padding-bottom: 32px; border-bottom: 1px solid var(--color-foreground); }
.hc-lld .lld-cat-h { font-size: clamp(34px, 4vw, 52px); }
.lld-q { padding: 44px 0 48px; border-bottom: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 20px; }
.lld-q-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.hc-lld .lld-q-title { margin-top: 6px; font-family: var(--font-serif); font-weight: 500; font-size: 30px; line-height: 1.2; letter-spacing: -.01em; }
.hc-lld .lld-q-prompt { margin-top: 4px; font-size: 16px; color: var(--color-muted-foreground); }
.lld-answered {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--color-pale); color: var(--color-primary); font-size: 13px; font-weight: 600;
}
.hc-lld .lld-pick-hint { color: var(--color-subtle); padding-top: 6px; }

/* levels: five equal columns — the whole column is the radio button */
.lld-levels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: start; }
.hc-lld .lld-lvl { display: flex; flex-direction: column; gap: 10px; cursor: pointer; text-align: left; }
.lld-lvl-head {
  display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; min-height: 64px; padding: 12px 14px;
  border-radius: 12px; border: 1.5px solid #d6d1c6; background: var(--color-card); color: var(--color-foreground);
  transition: background .15s, border-color .15s, color .15s;
}
.lld-lvl-n { width: 100%; font-size: 12px; font-weight: 600; opacity: .8; }
.lld-lvl-label { flex: 1; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3; }
.lld-lvl-check { display: none; }
.lld-lvl-desc {
  display: block; padding: 14px; border-radius: 12px; background: var(--color-card); border: 1px solid var(--color-border);
  font-family: var(--font-serif); font-size: 15px; line-height: 1.55; color: var(--color-foreground); text-wrap: pretty;
  transition: border-color .15s;
}
.lld-lvl[data-kind="between"] .lld-lvl-desc {
  background: transparent; border: 1px dashed #d6d1c6;
  font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: var(--color-muted-foreground);
}
.hc-lld .lld-lvl:hover .lld-lvl-head { border-color: var(--color-primary); }
.hc-lld .lld-lvl[aria-checked="true"] .lld-lvl-head { background: var(--color-primary); border-color: var(--color-primary); color: #ffffff; }
.hc-lld .lld-lvl[aria-checked="true"] .lld-lvl-desc { border-color: var(--color-primary); }
.hc-lld .lld-lvl[aria-checked="true"][data-kind="between"] .lld-lvl-desc { border-style: solid; }

/* footer */
.lld-foot { padding: 32px 0 72px; }
.lld-foot-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.lld-foot-right { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-left: auto; }
.lld-foot-hint { margin-top: 8px; text-align: right !important; }
.lld-startover { margin-top: 32px; text-align: center; }

/* ---- results ---- */
.lld-results-actions { background: var(--color-card); border-bottom: 1px solid var(--color-border); padding: 0 24px; }
.lld-results-actions-row { min-height: 68px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.lld-results-actions-right { display: flex; align-items: center; gap: 8px; }
.lld-results { max-width: 1120px; margin: 0 auto; padding: 0 24px 96px; }

.lld-verdict { padding: 64px 0 48px; display: flex; flex-direction: column; gap: 14px; }
.hc-lld .lld-verdict-h { max-width: 18ch; font-size: clamp(36px, 4.4vw, 56px); text-wrap: balance; }
.lld-track { margin-top: 22px; max-width: 880px; display: flex; flex-direction: column; gap: 10px; }
.lld-track-marker { position: relative; height: 48px; width: 0; transform: none; }
.lld-track-marker span {
  position: absolute; left: 0; top: 0; transform: translateX(-50%);
  padding: 4px 10px; border-radius: var(--radius-pill); background: var(--color-primary); color: #ffffff; font-size: 14px; font-weight: 600;
}
.lld-track-marker i { position: absolute; left: -1px; top: 30px; width: 2px; height: 18px; background: var(--color-primary); }
.lld-track-bar, .lld-track-labels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.lld-track-bar span { height: 10px; background: var(--color-border); }
.lld-track-bar span:first-child { border-radius: 6px 0 0 6px; }
.lld-track-bar span:last-child { border-radius: 0 6px 6px 0; }
.lld-track-bar span.on { background: var(--color-primary); }
.lld-track-labels span { font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--color-muted-foreground); }
.lld-track-labels span.on { color: var(--color-primary); font-weight: 700; }
.hc-lld .lld-track-note { margin-top: 6px; font-size: 14px; color: var(--color-muted-foreground); }

.hc-lld .lld-section-h { font-family: var(--font-serif); font-weight: 500; font-size: 30px; line-height: 1.2; letter-spacing: -.01em; }
.hc-lld .lld-section-sub { margin-top: 8px; font-size: 15px; color: var(--color-muted-foreground); }

.lld-meaning { padding-bottom: 56px; display: flex; flex-direction: column; gap: 16px; }
.lld-meaning-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.lld-meaning-card {
  padding: 28px; border-radius: 16px; background: var(--color-muted); border: 1px solid var(--color-border);
  display: flex; flex-direction: column; gap: 14px;
}
.lld-meaning-card.is-theirs { background: var(--color-card); border: 1.5px solid var(--color-primary); }
.lld-meaning-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lld-meaning-label { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted-foreground); }
.is-theirs .lld-meaning-label { color: var(--color-primary); }
.lld-meaning-pill { padding: 4px 10px; border-radius: var(--radius-pill); background: var(--color-pale); color: var(--color-primary); font-size: 12px; font-weight: 600; }
.lld-meaning-tag { font-size: 12px; font-weight: 500; color: var(--color-muted-foreground); }
.hc-lld .lld-meaning-profile { font-family: var(--font-serif); font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.hc-lld .lld-meaning-means { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--color-border); font-size: 15px; line-height: 1.6; color: #333333; }
.lld-meaning .lld-textbtn--green { align-self: flex-start; }

/* gaps band runs edge to edge inside the module */
.lld-gaps {
  margin: 0 calc(50% - 50cqi); padding: 56px max(24px, calc(50cqi - 536px)) 64px;
  background: var(--color-card); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
}
.lld-gaps-inner { max-width: 1072px; margin: 0 auto; }
.lld-gaps-grid { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.hc-lld .lld-gaps-chart { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.hc-lld .lld-radar { width: 100%; height: auto; overflow: visible; }
.lld-gaps-side { display: flex; flex-direction: column; gap: 32px; }
.hc-lld .lld-mini-h { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted-foreground); margin-bottom: 12px; }
.lld-gap-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--color-border); }
.lld-gap-name { font-family: var(--font-serif); font-size: 18px; }
.lld-gap-cat { font-size: 12px; color: var(--color-muted-foreground); margin-top: 2px; }
.lld-gap-v { font-size: 14px; font-weight: 600; color: #8a5a10; white-space: nowrap; }
.hc-lld .lld-gap-more, .hc-lld .lld-gap-none { padding-top: 12px; border-top: 1px solid var(--color-border); font-size: 13px; line-height: 1.55; color: var(--color-muted-foreground); }

.lld-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; font-size: 12px; color: var(--color-muted-foreground); }
.lld-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.lld-legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.lld-legend-break { flex-basis: 100%; height: 0; }
.lld-sw { display: inline-block; }
.lld-sw--score { width: 12px; height: 12px; border-radius: 3px; background: #dcebe1; border: 1.5px solid var(--color-primary); }
.lld-sw--bar { width: 16px; border-top: 2px dashed #b07a1f; }
.lld-sw--gap { width: 12px; height: 12px; border-radius: 3px; background: rgba(176, 122, 31, .22); }

.lld-rank { display: flex; flex-direction: column; gap: 16px; }
.lld-rank-row { display: flex; flex-direction: column; gap: 6px; }
.lld-rank-top { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.lld-rank-v { font-weight: 600; }
.lld-rank-track { height: 8px; border-radius: 6px; background: var(--color-muted); overflow: hidden; }
.lld-rank-fill { height: 8px; border-radius: 6px; background: var(--color-primary); }
.lld-rank-fill--gap { background: #b07a1f; }
.lld-rank-qs { font-size: 12px; color: var(--color-muted-foreground); }
.lld-rank--compact { gap: 6px; margin-top: 8px; }
.lld-rank--compact .lld-rank-row { display: grid; grid-template-columns: minmax(0, 1fr) 48px 24px; align-items: center; gap: 8px; }
.lld-rank--compact .lld-rank-top { display: contents; font-size: 12px; }
.lld-rank--compact .lld-rank-top span:first-child { grid-column: 1; }
.lld-rank--compact .lld-rank-v { grid-column: 3; grid-row: 1; text-align: right; font-weight: 400; color: var(--color-muted-foreground); }
.lld-rank--compact .lld-rank-track { grid-column: 2; grid-row: 1; height: 5px; background: var(--color-border); }
.lld-rank--compact .lld-rank-fill { height: 5px; }

/* CTA */
.lld-cta {
  margin-top: 64px; position: relative; overflow: hidden; border-radius: 16px;
  background: #0b0c0a; color: #ffffff; padding: 48px;
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: end;
}
.lld-cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 85% 10%, rgba(47, 145, 88, .32), transparent 55%);
}
.lld-cta-copy, .lld-cta-act { position: relative; display: flex; flex-direction: column; gap: 14px; }
.lld-cta-act { align-items: flex-start; }
.hc-lld .lld-cta-eyebrow { color: rgba(255, 255, 255, .7); }
.hc-lld .lld-cta-h { font-family: var(--font-serif); font-size: 38px; line-height: 1.15; letter-spacing: -.01em; }
.hc-lld .lld-cta-p { font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, .78); max-width: 56ch; }
.lld-cta-gap { font-size: 14px; color: rgba(255, 255, 255, .78); }
.lld-cta-gap strong { color: #ffffff; }
.hc-lld .lld-btn--cta { background: #2a7d4f; border-color: #2a7d4f; }
.hc-lld .lld-btn--cta:hover { background: #3d9a66; border-color: #3d9a66; }

/* wide/narrow swaps */
.hc-lld .lld-narrow { display: none; }

/* ============================================================
   Responsive — container queries, with media-query fallback for
   older Safari/Firefox (HubSpot pages still see those).
   ============================================================ */

/* Six steps don't fit with names below this; only the current one keeps its name. */
@container lld (max-width: 1100px) {
  .hc-lld .lld-sp-item.is-active { flex-grow: 3; }
  .hc-lld .lld-sp-item:not(.is-active):not(.lld-sp-item--results) .lld-sp-name { display: none; }
  .hc-lld .lld-sp-item:not(.is-active) .lld-sp-top { justify-content: center; }
}
@container lld (max-width: 900px) {
  .lld-hero-grid, .lld-gaps-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .lld-cta { grid-template-columns: minmax(0, 1fr); align-items: start; padding: 36px 28px; }
}
@container lld (max-width: 720px) {
  .hc-lld .lld-wide { display: none !important; }
  .hc-lld .lld-narrow { display: inline; }
  .hc-lld div.lld-narrow { display: block; }
  .hc-lld .lld-hide-sm { display: none !important; }

  .lld-hero { padding: 40px 20px 40px; }
  .lld-example-grid { grid-template-columns: minmax(0, 1fr); }

  /* stepper: tighter; the locked Results step drops its hint (the footer has it) */
  .lld-stepper { padding: 0 12px; }
  .hc-lld .lld-sp-row { gap: 2px; padding: 10px 0; }
  .hc-lld .lld-sp { padding: 6px 6px 8px; gap: 6px; }
  .hc-lld .lld-sp-item--results { margin-left: 4px; }
  .hc-lld .lld-sp--results .lld-sp-name, .hc-lld .lld-sp-hint { display: none; }
  .hc-lld .lld-sp-go { min-height: 36px; padding: 0 12px; font-size: 13px; }

  .lld-cat { padding: 32px 20px 0; }
  .lld-cat-head { padding-bottom: 24px; gap: 10px; }
  .lld-q { padding: 28px 0 32px; gap: 16px; }
  .hc-lld .lld-q-title { font-size: 24px; }
  .hc-lld .lld-q-prompt { font-size: 15px; }
  .lld-q-head { flex-direction: column; gap: 8px; }

  /* levels stack as tappable rows, description inside the row */
  .lld-levels { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .hc-lld .lld-lvl {
    gap: 6px; padding: 14px 16px; border-radius: 12px; border: 1.5px solid #d6d1c6; background: var(--color-card);
  }
  .hc-lld .lld-lvl[data-kind="between"] { border-style: dashed; background: transparent; padding: 12px 16px; }
  .lld-lvl-head { min-height: 0; padding: 0; border: 0; background: none; gap: 4px; }
  .hc-lld .lld-lvl:hover .lld-lvl-head { border: 0; }
  .lld-lvl-n { width: auto; font-size: 13px; opacity: 1; }
  .lld-lvl-n::after { content: " \00b7"; }
  .lld-lvl-desc, .lld-lvl[data-kind="between"] .lld-lvl-desc { padding: 0; border: 0; background: none; }
  .hc-lld .lld-lvl[aria-checked="true"] { background: var(--color-primary); border-color: var(--color-primary); border-style: solid; color: #ffffff; }
  .hc-lld .lld-lvl[aria-checked="true"] .lld-lvl-head { background: none; color: #ffffff; }
  .hc-lld .lld-lvl[aria-checked="true"] .lld-lvl-desc { color: #ffffff; }
  .hc-lld .lld-lvl[aria-checked="true"] .lld-lvl-check { display: inline-flex; margin-left: auto; }

  /* sticky bottom action */
  .lld-foot { padding: 0 0 40px; }
  .lld-foot-bar {
    position: sticky; bottom: 0; z-index: 20; margin: 0 -20px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
    background: var(--color-card); border-top: 1px solid var(--color-border); flex-wrap: nowrap;
  }
  .lld-foot-right { width: 100%; justify-content: space-between; gap: 12px; flex-wrap: nowrap; }
  .lld-foot-right .lld-btn--lg { min-height: 48px; padding: 0 22px; font-size: 15px; }

  .lld-results-actions { padding: 0 20px; }
  .lld-results { padding: 0 20px 64px; }
  .lld-verdict { padding: 40px 0 36px; }
  /* five labels don't fit at phone width: keep the ends and their level */
  .lld-track-labels span { font-size: 11px; letter-spacing: .02em; line-height: 1.3; }
  .lld-track-labels span:not(.on):not(:first-child):not(:last-child) { visibility: hidden; }
  .lld-track-labels span:last-child { text-align: right; }
  .lld-gaps { padding: 40px 20px 48px; }
  .lld-meaning-card { padding: 22px; }
  .hc-lld .lld-cta-h { font-size: 30px; }
}

@supports not (container-type: inline-size) {
  @media (max-width: 900px) {
    .hc-lld .lld-hero-grid, .hc-lld .lld-gaps-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .hc-lld .lld-cta { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 720px) {
    .hc-lld .lld-wide, .hc-lld .lld-hide-sm { display: none !important; }
    .hc-lld .lld-narrow { display: inline; }
    .hc-lld div.lld-narrow { display: block; }
    .hc-lld .lld-levels { grid-template-columns: minmax(0, 1fr); }
    .hc-lld .lld-sp-item:not(.is-active):not(.lld-sp-item--results) .lld-sp-name, .hc-lld .lld-sp--results .lld-sp-name, .hc-lld .lld-sp-hint { display: none; }
    .hc-lld .lld-sp-item.is-active { flex-grow: 3; }
  }
}

@media print {
  .hc-lld .lld-noprint { display: none !important; }
  .hc-lld .lld-gaps { margin: 0; padding: 32px 0; }
}