@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/space-grotesk-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/space-mono-regular-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/space-mono-bold-latin.woff2') format('woff2');
}

/* ===============================================================
   ENODO - shared page styles
   Derived from the mark: charcoal type and red annotation strokes
   on a warm working page.

     - cream is the ground; white signals raised, actionable paper
     - marker strokes are reserved for emphasis and annotation
     - marks are sharp, controls are soft, paper is hand-cut
     - red is an annotator's gesture, never a button fill
   =============================================================== */

:root {
  /* --- ground and ink ---------------------------------------- */
  --bg:            #F1EDE2;   /* cream ground - white is the signal */
  --paper:         #FFFFFF;   /* raised: cards, fields, toolbars    */
  --surface:       #E7E2D3;   /* recessed: wells, callouts          */
  --surface-2:     #E7E2D3;
  --border:        #DBD5C4;
  --border-strong: #C4BCA6;
  --text:          #1A1916;
  --body:          #55524A;
  --muted:         #696458;

  /* corners: marks sharp, paper hand-cut, controls soft */
  --r-mark:    0;
  --r-ctl-sm:  5px;
  --r-ctl-lg:  9px;
  --r-sheet:   4px 16px 4px 16px;

  /* matte shadow: warm, wide, low opacity */
  --lift-1: 0 1px 2px rgba(60,50,25,.05);
  --lift-2: 0 1px 2px rgba(60,50,25,.05), 0 6px 18px rgba(60,50,25,.06);
  --lift-3: 0 2px 4px rgba(60,50,25,.06), 0 14px 36px rgba(60,50,25,.09);

  /* --- the marker -------------------------------------------- */
  --accent:        #FF0021;   /* stroke red, display only */
  --accent-light:  #C7001A;   /* darkened where it carries words */
  --accent-ink:    #C7001A;
  --gold:          #8D591A;   /* the warm centre of the strokes */
  --green:         #1F7A52;
  --success:       #1F7A52;
  --well:          #E7E2D3;

  /* --- type --------------------------------------------------- */
  --font-sans: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, Menlo, monospace;

  /* --- the stroke, as a background image ----------------------
     One wobbly path stretched to any width. No extra requests.  */
  --stroke-red: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2022%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M2%2C6.5%20Q18.4%2C5.6%2034.9%2C6.7%20Q51.3%2C5.9%2067.8%2C9.4%20Q84.2%2C9.2%20100.7%2C8.2%20Q117.2%2C8.9%20133.6%2C10.7%20Q150%2C9.9%20166.4%2C10.9%20Q182.9%2C10.3%20199.3%2C10.7%20Q215.8%2C11%20232.2%2C13.2%20Q248.7%2C14.1%20265.1%2C12.3%20Q281.6%2C12.5%20298%2C14.6%22%20fill%3D%22none%22%20stroke%3D%22%23FF0021%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --stroke-red-2: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2022%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M2%2C13.6%20Q18.4%2C13.8%2034.9%2C15.4%20Q51.3%2C15.7%2067.8%2C10.8%20Q84.2%2C10.5%20100.7%2C13.5%20Q117.2%2C13.6%20133.6%2C10.5%20Q150%2C9.6%20166.4%2C9.2%20Q182.9%2C8.3%20199.3%2C8.4%20Q215.8%2C7.8%20232.2%2C8.5%20Q248.7%2C8.9%20265.1%2C9.9%20Q281.6%2C9.8%20298%2C6.6%22%20fill%3D%22none%22%20stroke%3D%22%23FF0021%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --stroke-amber: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2022%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M2%2C8.8%20Q18.4%2C9.3%2034.9%2C10%20Q51.3%2C9.6%2067.8%2C10%20Q84.2%2C11%20100.7%2C9.9%20Q117.2%2C9.1%20133.6%2C11.6%20Q150%2C11.4%20166.4%2C11.7%20Q182.9%2C12.2%20199.3%2C10.8%20Q215.8%2C10.1%20232.2%2C12.1%20Q248.7%2C12.1%20265.1%2C12.4%20Q281.6%2C11.5%20298%2C13.7%22%20fill%3D%22none%22%20stroke%3D%22%23FFB13D%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

* { box-sizing: border-box; }

html {
  background: var(--bg) !important;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg) !important;
  color: var(--body) !important;
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  max-width: 860px !important;
  width: auto !important;
  margin: 0 auto !important;
  padding: 28px 32px 120px !important;
}

.shell {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* --- Top navigation -------------------------------------------
   Sits under a marker stroke rather than a hairline border.     */

.top-nav,
.top-nav.shell {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin: 0 0 34px !important;
  padding: 0 0 18px !important;
  border-bottom: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  background-image: none !important;
  color: var(--muted) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
}

.top-nav a,
.top-nav.shell a,
.page-footer a,
footer.page-footer a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  color: var(--body) !important;
  text-decoration: none !important;
  transition: color 150ms ease, border-color 150ms ease !important;
}

.top-nav a:hover,
.page-footer a:hover,
footer.page-footer a:hover { color: var(--text) !important; }

a:focus-visible {
  outline: 3px solid var(--accent-light) !important;
  outline-offset: 2px !important;
}

/* Square, not pills. */
.top-nav .back-link,
.top-nav .brand {
  color: var(--accent-light) !important;
  border: 1px solid var(--text) !important;
  border-radius: var(--r-ctl-sm) !important;
  padding: 7px 11px !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  min-width: max-content !important;
}

.top-nav .back-link:hover,
.top-nav .brand:hover {
  background: var(--text) !important;
  color: #FFFFFF !important;
}

.top-nav .brand-link {
  color: var(--text) !important;
  text-decoration: none !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  padding-top: 1px !important;
  padding-bottom: 2px !important;
}
.top-nav .brand-link:hover {
  color: var(--text) !important;
  background-image: var(--stroke-red) !important;
  background-repeat: no-repeat !important;
  background-position: 0 100% !important;
  background-size: 100% 6px !important;
}

.nav-links,
.top-nav .nav-links {
  display: flex !important;
  gap: 13px !important;
  flex-wrap: wrap !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  justify-content: flex-end !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.nav-links a + a::before,
.top-nav .nav-links a + a::before,
.nav-group a + a::before {
  content: "\2022" !important;
  margin-right: 12px !important;
  color: var(--border-strong) !important;
  pointer-events: none !important;
}

.nav-groups {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  align-items: flex-end !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.nav-group {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  align-items: baseline !important;
  column-gap: 11px !important;
  row-gap: 7px !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}
.nav-group-label {
  color: var(--muted) !important;
  opacity: 1 !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  letter-spacing: 0.2em !important;
  margin-right: 2px !important;
}

.nav-menu-button {
  display: none;
}

.top-nav a[aria-current="page"] {
  color: var(--text) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--accent) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 5px !important;
}

/* --- Page header ----------------------------------------------
   Two strokes, red over amber, the way the mark layers them.    */

header,
header.hero,
header.shell.hero {
  border-bottom: 0 !important;
  padding: 0 0 34px !important;
  margin: 0 0 44px !important;
  background-image: var(--stroke-red), var(--stroke-amber) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: 0 100%, 0 calc(100% - 3px) !important;
  background-size: 100% 11px, 100% 8px !important;
}

/* The eyebrow is the annotator's label. */
.logo,
.eyebrow,
.step-num {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
  color: var(--accent-light) !important;
  margin: 0 0 18px !important;
}

.step-num { margin-bottom: 10px !important; }

/* Heavy, tight, blunt - the wordmark's own voice. */
h1 {
  font-family: var(--font-sans) !important;
  font-size: 52px !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.02 !important;
  color: var(--text) !important;
  margin: 0 0 14px !important;
}

h2 {
  font-family: var(--font-sans) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
  color: var(--text) !important;
  margin: 0 0 12px !important;
}

h3 {
  color: var(--text) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  margin: 30px 0 10px !important;
}

.subtitle {
  color: var(--body) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  max-width: 60ch !important;
  margin: 0 !important;
}

main,
main.shell { padding: 0 !important; }

section,
section.card,
.step {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 38px !important;
}

.step { margin-bottom: 68px !important; }

p, li {
  color: var(--body) !important;
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
}

p { margin: 0 0 14px !important; }
ul, ol { padding-left: 22px !important; margin: 0 0 14px !important; }
li { margin-bottom: 6px !important; }

strong {
  color: var(--text) !important;
  font-weight: 700 !important;
}

a { color: var(--accent-light) !important; }

/* Links in prose are underlined in marker, not in a hairline. */
p a, li a {
  text-decoration: none !important;
  background-image: var(--stroke-red) !important;
  background-repeat: no-repeat !important;
  background-position: 0 100% !important;
  background-size: 100% 6px !important;
  padding-bottom: 1px !important;
}
p a:hover, li a:hover { color: var(--text) !important; }

/* --- Callouts: a note struck in the margin --------------------- */

.notice,
.callout,
.example,
.pull {
  background: var(--surface) !important;
  border: 0 !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: 0 var(--r-ctl-sm) var(--r-ctl-sm) 0 !important;
  padding: 15px 18px !important;
  margin: 24px 0 38px !important;
  color: var(--body) !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
}

.callout strong,
.notice strong,
.example strong {
  color: var(--accent-light) !important;
  font-weight: 700 !important;
}

/* --- Figures --------------------------------------------------- */

.img-wrap {
  margin: 24px 0 !important;
  border-radius: var(--r-sheet) !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  background: var(--paper) !important;
  box-shadow: var(--lift-2) !important;
}
.img-wrap img { display: block !important; width: 100% !important; height: auto !important; }
.img-caption {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--muted) !important;
  padding: 10px 14px !important;
  border-top: 1px solid var(--border) !important;
}
.img-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; margin: 24px 0 !important; }
.img-row-3 { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; margin: 24px 0 !important; }
.small-img { max-width: 420px !important; }
.tiny-img { max-width: 220px !important; }

/* --- Tags: ringed, the way a count is circled ------------------ */

.tag {
  display: inline-block !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 0 !important;
  margin-right: 6px !important;
  background: transparent !important;
  border: 1px solid currentColor !important;
}
.tag-green  { color: var(--green) !important; }
.tag-orange { color: var(--accent-light) !important; }
.tag-gold   { color: #9A6A16 !important; }

/* --- Rules are strokes ----------------------------------------- */

hr {
  border: 0 !important;
  border-top: 1px solid var(--border) !important;
  height: 0 !important;
  margin: 60px 0 !important;
  background-image: none !important;
}

/* Opt in where a stroke is genuinely an annotation, not furniture. */
hr.rule-marker {
  border: 0 !important;
  height: 12px !important;
  background-image: var(--stroke-red) !important;
  background-repeat: no-repeat !important;
  background-position: 0 50% !important;
  background-size: 100% 100% !important;
}

/* --- Call to action: square, inked ----------------------------- */

.cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 14px !important;
  border-radius: var(--r-ctl-lg) !important;
  border: 1px solid var(--text) !important;
  background: var(--text) !important;
  box-shadow: var(--lift-1) !important;
  color: #FFFFFF !important;
  padding: 11px 18px !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  background-image: none !important;
  transition: background-color 140ms ease, border-color 140ms ease !important;
}
.cta:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #FFFFFF !important;
}

/* --- Cards used across the guide pages ------------------------- */

html .link-card {
  display: block !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sheet) !important;
  background: var(--paper) !important;
  box-shadow: var(--lift-2) !important;
  padding: 18px !important;
  color: var(--body) !important;
  text-decoration: none !important;
  background-image: none !important;
  transition: border-color 140ms ease !important;
}
html .link-card strong { display: block !important; margin-bottom: 6px !important; color: var(--text) !important; font-weight: 700 !important; letter-spacing: -0.02em !important; }
html .link-card span   { display: block !important; color: var(--body) !important; font-size: 14px !important; line-height: 1.6 !important; }
html .link-card:hover  { border-color: var(--text) !important; }

/* --- Disclosure ------------------------------------------------ */

html details {
  border-top: 1px solid var(--border) !important;
  padding: 16px 0 !important;
}
html details:last-of-type { border-bottom: 1px solid var(--border) !important; }
html summary {
  cursor: pointer !important;
  color: var(--text) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}
html summary:focus-visible { outline: 3px solid var(--accent-light) !important; outline-offset: 2px !important; }

/* --- Foot ------------------------------------------------------ */

.page-footer,
footer.page-footer {
  border-top: 0 !important;
  margin: 68px 0 0 !important;
  padding: 22px 0 0 !important;
  border-top: 1px solid var(--border) !important;
  background-image: none !important;
  color: var(--muted) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 14px !important;
  justify-content: flex-start !important;
}
.page-footer nav,
footer.page-footer nav { display: flex !important; gap: 14px !important; flex-wrap: wrap !important; }
.page-footer a, footer.page-footer a { background-image: none !important; }

/* --- Responsive ------------------------------------------------ */

@media (max-width: 700px) {
  body { padding: 24px 18px 80px !important; }
  h1 { font-size: 36px !important; }
  h2 { font-size: 23px !important; }
  .subtitle { font-size: 16px !important; }
  .top-nav, .top-nav.shell { align-items: flex-start !important; flex-direction: column !important; }
  .nav-links, .top-nav .nav-links { justify-content: flex-start !important; }
  .nav-groups { align-items: flex-start !important; }
  .nav-group { justify-content: flex-start !important; }
  .img-row, .img-row-3 { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Card titles across guide/hub grids -------------------------
   Several pages build cards with .tool-grid / .link-grid and mark
   the title with <strong>. Give those the wordmark's weight and
   tracking so a card title reads as a heading, not bold body.    */

html .tool-grid strong,
html .link-grid strong,
html .comparison strong {
  display: block !important;
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2 !important;
  margin-bottom: 7px !important;
}


/* --- Card grids: paper on cream --------------------------------
   White reads as raised against the cream ground, so these need
   no heavy border - that is what keeps the set matte rather than
   boxed in.                                                     */

html body .tool-grid > *,
html body .tool-grid li,
html body .link-grid > *,
html body .link-grid li,
html body .meter-example,
html body .meter-grid > *,
html body .comparison > * {
  background: var(--paper) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sheet) !important;
  box-shadow: var(--lift-2) !important;
}

/* Fields are controls, so they are white and soft. */
input[type="text"], input[type="search"], input:not([type]), textarea, select {
  background: var(--paper) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-ctl-sm) !important;
  color: var(--text) !important;
  box-shadow: inset 0 1px 2px rgba(60,50,25,.04) !important;
  padding: 11px 13px !important;
  font-family: var(--font-mono) !important;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--text) !important;
  box-shadow: var(--lift-1) !important;
}

/* Marks stay sharp. */
.tag, .eyebrow, .step-num { border-radius: var(--r-mark) !important; }

/* ===============================================================
   TOOLS HOMEPAGE
   A wider composition than the long-form guide pages. Tool cards
   remain equal in visual weight so the homepage is a destination
   chooser, not the first tool disguised as a landing page.
   =============================================================== */

body.home-page {
  max-width: 1180px !important;
  padding-bottom: 72px !important;
}

.home-nav { margin-bottom: 52px !important; }

.home-hero {
  max-width: 980px;
  padding-bottom: 46px !important;
  margin-bottom: 64px !important;
}

.home-logo {
  display: block;
  width: min(500px, 76vw);
  max-width: 100%;
  height: auto;
  margin: 0 0 18px;
}

.home-hero .eyebrow {
  margin-bottom: 14px !important;
}

.home-hero h1 {
  max-width: 900px;
  margin-bottom: 18px !important;
}

.home-intro {
  max-width: 720px;
  margin-bottom: 0 !important;
}

.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 26px;
}

.home-primary-cta,
.recent-tool > a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 11px 17px;
  border: 2px solid var(--accent-light) !important;
  border-radius: var(--r-ctl-sm) !important;
  background: var(--accent-light) !important;
  background-image: none !important;
  color: #fff !important;
  font: 700 11px/1.25 var(--font-mono) !important;
  letter-spacing: .08em !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
}

.home-primary-cta:hover,
.recent-tool > a:hover {
  background: #a90016 !important;
  border-color: #a90016 !important;
  color: #fff !important;
}

.home-primary-cta:active,
.recent-tool > a:active { transform: translateY(1px); }

.home-secondary-link {
  display: inline-flex !important;
  align-items: center;
  min-height: 44px;
  color: var(--text) !important;
  font: 700 11px/1.3 var(--font-mono) !important;
  letter-spacing: .08em !important;
  text-decoration: underline !important;
  text-decoration-color: var(--accent) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 5px !important;
  text-transform: uppercase !important;
  background-image: none !important;
}

.recent-tool {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: -30px 0 58px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-sheet);
  background: var(--paper);
  box-shadow: var(--lift-1);
}

.recent-tool[hidden] { display: none !important; }
.recent-tool h2 { margin: 0 !important; font-size: 19px !important; }
.recent-tool .home-section-kicker { margin-bottom: 4px !important; }
.recent-tool > a { min-height: 44px; padding: 9px 14px; flex: 0 0 auto; }

.home-section {
  margin: 0 0 72px;
}

.home-section-heading {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(280px, 1.2fr);
  align-items: end;
  gap: 28px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.home-section-heading h2,
.home-guides h2 {
  margin: 0 !important;
}

.home-section-heading > p {
  max-width: 570px;
  margin: 0 0 2px !important;
  color: var(--body) !important;
}

.home-section-kicker,
.home-tool-label {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
}

.home-section-kicker {
  margin: 0 0 8px !important;
  color: var(--muted) !important;
}

.home-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.home-tool-card {
  display: grid;
  grid-template-rows: 190px 1fr;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sheet) !important;
  background: var(--paper) !important;
  box-shadow: var(--lift-2) !important;
  color: var(--body) !important;
  text-decoration: none !important;
  background-image: none !important;
  transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease !important;
}

a.home-tool-card:hover {
  border-color: var(--text) !important;
  color: var(--body) !important;
  transform: translateY(-2px);
  box-shadow: var(--lift-3) !important;
}

a.home-tool-card:active {
  transform: translateY(0) scale(.995);
  box-shadow: var(--lift-1) !important;
}

a.home-tool-card:focus-visible {
  outline: 3px solid var(--accent-light) !important;
  outline-offset: 3px !important;
}

.home-tool-preview {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background-color: var(--surface);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 28px,
    rgba(196, 188, 166, .62) 29px,
    transparent 30px
  );
}

.home-tool-preview--scaffold {
  display: grid;
  align-content: center;
  gap: 11px;
  padding: 28px 12%;
}

.home-tool-preview--scaffold span {
  display: block;
  height: 20px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-ctl-sm) var(--r-ctl-sm) 0;
  background: var(--paper);
  box-shadow: var(--lift-1);
}

.home-tool-preview--scaffold span:nth-child(1) { width: 72%; }
.home-tool-preview--scaffold span:nth-child(2) { width: 92%; }
.home-tool-preview--scaffold span:nth-child(3) { width: 60%; }
.home-tool-preview--scaffold span:nth-child(4) { width: 82%; }

.home-tool-preview--notepad {
  display: grid;
  align-content: center;
  gap: 18px;
  padding: 30px 12%;
}

.home-tool-preview--notepad span {
  position: relative;
  display: block;
  width: 84%;
  height: 3px;
  background: var(--border-strong);
}

.home-tool-preview--notepad span:nth-child(2) { width: 66%; }
.home-tool-preview--notepad span:nth-child(3) { width: 76%; }
.home-tool-preview--notepad b {
  position: absolute;
  right: -42px;
  top: -9px;
  min-width: 26px;
  padding: 2px 6px;
  border: 1px solid #34459B;
  border-radius: var(--r-ctl-sm);
  background: var(--paper);
  color: #34459B;
  font: 700 10px/1.4 var(--font-mono);
  text-align: center;
}

.home-tool-preview--staff::before {
  content: "";
  position: absolute;
  inset: 48px 9%;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 17px,
    var(--text) 18px,
    transparent 19px
  );
}

.home-staff-note {
  position: absolute;
  left: 54%;
  top: 83px;
  width: 26px;
  height: 19px;
  border-radius: 50%;
  background: var(--text);
  transform: rotate(-12deg);
}

.home-staff-note::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 8px;
  width: 3px;
  height: 55px;
  background: var(--text);
  transform: rotate(12deg);
  transform-origin: bottom;
}

.home-staff-note::after {
  content: "";
  position: absolute;
  inset: -11px -15px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  transform: rotate(-7deg);
}

.home-tool-preview--circle {
  display: grid;
  place-items: center;
}

.home-tool-preview--circle span {
  position: relative;
  width: 108px;
  height: 108px;
  border: 14px solid var(--border-strong);
  border-top-color: var(--accent);
  border-right-color: #34459B;
  border-bottom-color: var(--gold);
  border-radius: 50%;
  opacity: .55;
  transform: rotate(-18deg);
}

.home-tool-preview--circle span::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  margin: 36px;
  border-radius: 50%;
  background: var(--text);
}

.home-tool-card--compact {
  grid-template-rows: 138px 1fr;
}

.home-tool-preview--counts,
.home-tool-preview--rhymes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
}

.home-tool-preview--counts span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-ctl-sm);
  background: var(--paper);
  color: #34459b;
  font: 700 15px/1 var(--font-mono);
  box-shadow: var(--lift-1);
}

.home-tool-preview--bars {
  display: grid;
  align-content: center;
  gap: 9px;
  padding: 24px 12%;
}

.home-tool-preview--bars span {
  display: block;
  height: 8px;
  border-left: 3px solid var(--accent);
  background: var(--border-strong);
}
.home-tool-preview--bars span:nth-child(1) { width: 82%; }
.home-tool-preview--bars span:nth-child(2) { width: 94%; }
.home-tool-preview--bars span:nth-child(3) { width: 69%; }
.home-tool-preview--bars span:nth-child(4) { width: 88%; }

.home-tool-preview--meter {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 11px;
  padding: 28px 16%;
}

.home-tool-preview--meter span {
  flex: 1;
  max-width: 52px;
  border: 1px solid var(--border-strong);
  border-bottom: 4px solid var(--accent);
  background: var(--paper);
}
.home-tool-preview--meter span:nth-child(1) { height: 54%; }
.home-tool-preview--meter span:nth-child(2) { height: 76%; }
.home-tool-preview--meter span:nth-child(3) { height: 67%; }
.home-tool-preview--meter span:nth-child(4) { height: 78%; }

.home-tool-preview--rhymes span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--paper);
  color: var(--text);
  font: 700 12px/1 var(--font-mono);
}
.home-tool-preview--rhymes span:nth-child(even) { border-color: #34459b; }

.home-tool-copy {
  display: flex;
  flex-direction: column;
  padding: 24px 25px 26px;
}

.home-tool-label {
  align-self: flex-start;
  margin-bottom: 10px;
  color: var(--accent-light) !important;
}

.home-tool-copy h3 {
  margin: 0 0 10px !important;
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
  font-size: 25px !important;
  font-weight: 700 !important;
  letter-spacing: -.035em !important;
  line-height: 1.08 !important;
  text-transform: none !important;
}

.home-tool-copy p {
  margin: 0 !important;
  color: var(--body) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

.home-tool-action {
  margin-top: auto;
  padding-top: 20px;
  color: var(--accent-light) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase !important;
}

.home-tool-card--planned {
  border-style: dashed !important;
  box-shadow: none !important;
}

.home-tool-card--planned .home-tool-label,
.home-tool-action--muted {
  color: var(--muted) !important;
}

.home-guides {
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: var(--r-sheet);
  background: var(--paper);
  box-shadow: var(--lift-2);
}

.home-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 20px;
  margin-top: 22px;
}

.home-guide-grid a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  color: var(--body) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  background-image: none !important;
}

.home-guide-grid a::after {
  content: "\2192";
  margin-left: auto;
  padding-left: 12px;
  color: var(--accent-light);
}

.home-guide-grid a:hover { color: var(--text) !important; }

@media (max-width: 760px) {
  body.home-page { padding-top: 16px !important; }
  .home-nav,
  .compact-nav {
    position: relative;
    flex-direction: row !important;
    align-items: center !important;
    min-height: 48px;
    margin-bottom: 28px !important;
    padding-bottom: 10px !important;
  }
  .nav-menu-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 7px 9px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-ctl-sm);
    background: var(--paper);
    color: var(--text);
    font: 700 10px/1 var(--font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .nav-menu-button:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
  .nav-menu-icon,
  .nav-menu-icon::before,
  .nav-menu-icon::after { display: block; width: 17px; height: 2px; background: currentColor; }
  .nav-menu-icon { position: relative; }
  .nav-menu-icon::before,
  .nav-menu-icon::after { content: ""; position: absolute; left: 0; }
  .nav-menu-icon::before { top: -5px; }
  .nav-menu-icon::after { top: 5px; }
  .home-nav .nav-groups,
  .compact-nav .nav-groups {
    display: none !important;
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    align-items: stretch !important;
    padding: 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sheet);
    background: var(--paper);
    box-shadow: var(--lift-3);
  }
  .home-nav .nav-groups--open,
  .compact-nav .nav-groups--open { display: flex !important; }
  .home-nav .nav-group,
  .compact-nav .nav-group { justify-content: flex-start !important; row-gap: 11px !important; }
  .home-hero { margin-bottom: 52px !important; }
  .home-logo { width: min(390px, 92vw); }
  .home-hero-actions { align-items: stretch; flex-direction: column; }
  .home-primary-cta, .home-secondary-link { width: 100%; justify-content: center; }
  .recent-tool { align-items: stretch; flex-direction: column; gap: 14px; margin-top: -28px; }
  .recent-tool > a { width: 100%; }
  .home-section { margin-bottom: 56px; }
  .home-section-heading { grid-template-columns: 1fr; gap: 10px; }
  .home-tool-grid { grid-template-columns: 1fr; gap: 16px; }
  .home-tool-card { grid-template-rows: 160px 1fr; }
  .home-guide-grid { grid-template-columns: 1fr; gap: 0; }
}

/* Interactive analyzer landing pages */
body.analysis-page { max-width: 1040px !important; }
.analysis-shell { max-width: 940px !important; }
.analysis-hero { max-width: 820px; margin-bottom: 28px !important; }
.breadcrumbs { margin: -10px 0 25px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 7px; padding: 0; margin: 0; list-style: none; }
.breadcrumbs li + li::before { content: "/"; margin-right: 7px; color: var(--border-strong); }
.breadcrumbs a { color: var(--body) !important; }
.analysis-article { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.analysis-article .card { margin: 0 !important; }
.analysis-article .answer-card,
.analysis-article .card:last-child { grid-column: 1 / -1; }
.review-line { margin-top: 20px !important; color: var(--muted) !important; font: 700 10px/1.5 var(--font-mono) !important; letter-spacing: .09em; text-transform: uppercase; }

@media (max-width: 700px) {
  .analysis-article { grid-template-columns: 1fr; }
  .analysis-article .answer-card,
  .analysis-article .card:last-child { grid-column: auto; }
  .breadcrumbs { margin-top: 0; }
}

@media (max-width: 420px) {
  .home-tool-copy { padding: 21px 20px 23px; }
  .home-guides { padding: 24px 20px; }
}

/* Unified pill navigation. The shape follows the approved navigation
   prototype while the colour remains in Enodo's cream, ink and marker red. */
.enodo-site-nav {
  position: relative;
  z-index: 40;
  width: min(1120px, calc(100vw - 40px));
  margin: 0 0 34px 50%;
  transform: translateX(-50%);
  border-bottom: 1px solid var(--border);
  color: var(--muted);
}
.enodo-site-nav__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 66px;
  padding: 10px 0;
}
.enodo-site-nav__brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text) !important;
  font: 700 13px/1 var(--font-mono) !important;
  letter-spacing: .22em !important;
  text-decoration: none !important;
  text-transform: uppercase;
  white-space: nowrap;
}
.enodo-site-nav__brand span { color: var(--accent-light); }
.enodo-site-nav__brand[aria-current="page"] { text-decoration: underline !important; text-decoration-color: var(--accent) !important; text-underline-offset: 7px; }
.enodo-site-nav__menu {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: 18px;
}
.enodo-site-nav__tools,
.enodo-site-nav__reading {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}
.enodo-site-nav__tools a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted) !important;
  font: 500 13px/1.2 var(--font-sans) !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.enodo-site-nav__tools a:hover { border-color: var(--text); color: var(--text) !important; }
.enodo-site-nav__tools a[aria-current="page"] { border-color: var(--text); background: var(--text); color: var(--bg) !important; }
.enodo-site-nav__spacer { flex: 1 1 auto; }
.enodo-site-nav__reading { gap: 18px; }
.enodo-site-nav__reading a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted) !important;
  font: 500 13px/1.2 var(--font-sans) !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.enodo-site-nav__reading a:hover,
.enodo-site-nav__reading a[aria-current="page"] { color: var(--text) !important; text-decoration: underline !important; text-underline-offset: 4px; }
.enodo-site-nav a:focus-visible,
.enodo-site-nav button:focus-visible { outline: 2px solid var(--accent-light) !important; outline-offset: 3px !important; }
.enodo-site-nav__toggle { display: none; }

@media (max-width: 980px) {
  .enodo-site-nav { width: calc(100vw - 32px); margin-bottom: 24px; }
  .enodo-site-nav__inner { justify-content: space-between; min-height: 58px; padding: 7px 0; }
  .enodo-site-nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--paper);
    color: var(--text);
    font: 700 10px/1 var(--font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .enodo-site-nav__menu {
    display: none;
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    right: 0;
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sheet);
    background: var(--paper);
    box-shadow: var(--lift-3);
  }
  .enodo-site-nav__menu--open { display: flex; }
  .enodo-site-nav__tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .enodo-site-nav__tools a { white-space: normal; text-align: center; }
  .enodo-site-nav__spacer { display: none; }
  .enodo-site-nav__reading { justify-content: space-between; flex-wrap: wrap; gap: 6px 18px; padding-top: 12px; border-top: 1px solid var(--border); }
}

@media (max-width: 430px) {
  .enodo-site-nav { width: calc(100vw - 24px); }
  .enodo-site-nav__tools { grid-template-columns: 1fr; }
}

/* Compact homepage */
.home-hero--compact {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
  column-gap: clamp(42px, 7vw, 96px);
  align-items: center;
  max-width: 1120px;
  min-height: 0;
  padding: 42px 0 76px;
  text-align: left;
}
.home-hero--compact > .eyebrow,
.home-hero--compact > h1,
.home-hero--compact > .home-intro,
.home-hero--compact > .home-feature-support,
.home-hero--compact > .home-hero-actions { grid-column: 1; }
.home-hero--compact h1 { max-width: 750px; margin: 8px 0 20px; font-size: clamp(46px, 5.2vw, 74px); line-height: .98; letter-spacing: -.055em; }
.home-hero--compact .home-intro { max-width: 620px; margin: 0; font-size: clamp(17px, 1.6vw, 21px); }
.home-feature-support { display: none; max-width: 570px; margin: 14px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
html:not([data-home-feature]) .home-feature-support[data-home-feature-item="scaffold"],
html[data-home-feature="scaffold"] .home-feature-support[data-home-feature-item="scaffold"],
html[data-home-feature="notepad"] .home-feature-support[data-home-feature-item="notepad"],
html[data-home-feature="analyzer"] .home-feature-support[data-home-feature-item="analyzer"],
html[data-home-feature="rhyme"] .home-feature-support[data-home-feature-item="rhyme"],
html[data-home-feature="trainer"] .home-feature-support[data-home-feature-item="trainer"],
html[data-home-feature="fifths"] .home-feature-support[data-home-feature-item="fifths"] { display: block; }
.home-hero--compact .home-hero-actions { justify-content: flex-start; margin-top: 28px; }
.home-primary-cta.home-feature-cta,
.home-feature-preview { display: none !important; }
html:not([data-home-feature]) .home-feature-cta[data-home-feature-item="scaffold"],
html[data-home-feature="scaffold"] .home-feature-cta[data-home-feature-item="scaffold"],
html[data-home-feature="notepad"] .home-feature-cta[data-home-feature-item="notepad"],
html[data-home-feature="analyzer"] .home-feature-cta[data-home-feature-item="analyzer"],
html[data-home-feature="rhyme"] .home-feature-cta[data-home-feature-item="rhyme"],
html[data-home-feature="trainer"] .home-feature-cta[data-home-feature-item="trainer"],
html[data-home-feature="fifths"] .home-feature-cta[data-home-feature-item="fifths"] { display: inline-flex !important; }
html:not([data-home-feature]) .home-feature-preview[data-home-feature-item="scaffold"],
html[data-home-feature="scaffold"] .home-feature-preview[data-home-feature-item="scaffold"],
html[data-home-feature="notepad"] .home-feature-preview[data-home-feature-item="notepad"],
html[data-home-feature="analyzer"] .home-feature-preview[data-home-feature-item="analyzer"],
html[data-home-feature="rhyme"] .home-feature-preview[data-home-feature-item="rhyme"],
html[data-home-feature="trainer"] .home-feature-preview[data-home-feature-item="trainer"],
html[data-home-feature="fifths"] .home-feature-preview[data-home-feature-item="fifths"] { display: block !important; }
.home-feature-preview {
  position: relative;
  grid-column: 2;
  grid-row: 1 / span 5;
  width: 100%;
  min-height: 341px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sheet);
  background: var(--paper);
  box-shadow: var(--lift-3);
  overflow: hidden;
  transform: rotate(.35deg);
}
.home-feature-preview__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 12px 16px; border-bottom: 1px solid var(--border); font: 700 11px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.home-feature-preview__head span:last-child { color: var(--success); font-weight: 600; letter-spacing: 0; text-transform: none; }
.home-feature-preview__canvas { position: relative; min-height: 235px; background: var(--well); overflow: hidden; }
.home-feature-preview__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 11px 16px; border-top: 1px solid var(--border); color: var(--text); font-weight: 650; text-decoration: none; }
.home-feature-preview__link:hover { color: var(--accent); }
.home-preview-marker,
.preview-doodle-layer { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.marker-doodle.marker-art--compact { display: none; }
.home-scaffold-preview__body { display: grid; grid-template-columns: 90px minmax(0, 1fr) 100px; min-height: 235px; background: var(--well); }
.home-scaffold-preview__outline,
.home-scaffold-preview__pool { display: flex; flex-direction: column; gap: 10px; padding: 18px 12px; font: 600 9px/1.3 var(--font-mono); color: var(--muted); }
.home-scaffold-preview__outline { border-right: 1px solid var(--border); }
.home-scaffold-preview__pool { border-left: 1px solid var(--border); }
.home-scaffold-preview__outline span { width: 70%; height: 5px; border-radius: 5px; background: var(--border-strong); }
.home-scaffold-preview__pool span { padding: 5px 6px; border: 1px solid var(--border); border-radius: 5px; background: var(--paper); }
.home-scaffold-preview__draft { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px 18px; }
.home-scaffold-preview__draft span { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--paper); }
.home-scaffold-preview__draft i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--text); color: var(--bg); font: normal 700 10px/1 var(--font-mono); }
.home-scaffold-preview__draft b { display: block; width: var(--line-width); height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--accent-light) 32%, var(--border)); }
.home-notepad-preview { display: grid; grid-template-columns: 54px minmax(0, 1fr); min-height: 235px; padding: 26px 30px; }
.home-notepad-preview__gutter { position: relative; display: grid; grid-template-rows: repeat(4, 35px); align-items: center; justify-items: center; border-right: 1px solid var(--border-strong); color: var(--accent); font: 700 11px/1 var(--font-mono); }
.home-notepad-preview__sheet { display: grid; grid-template-rows: repeat(4, 35px); align-items: center; min-width: 0; padding-left: 18px; }
.home-notepad-preview__sheet span { overflow: hidden; color: var(--muted); font: 600 11px/1.3 var(--font-mono); text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px solid var(--border); }
.home-analyzer-preview { display: grid; grid-template-rows: auto 1fr auto; gap: 16px; min-height: 235px; padding: 22px; }
.home-analyzer-preview__modes { display: flex; gap: 6px; }
.home-analyzer-preview__modes span,
.home-analyzer-preview__modes b { padding: 7px 9px; border: 1px solid var(--border); border-radius: 999px; font: 700 9px/1 var(--font-mono); }
.home-analyzer-preview__modes b { border-color: var(--text); background: var(--text); color: var(--bg); }
.home-analyzer-preview__input { position: relative; display: grid; align-content: center; gap: 14px; padding: 17px 17px 28px; border: 1px solid var(--border); border-radius: 8px; background: var(--paper); }
.home-analyzer-preview__input span { width: 88%; height: 6px; border-radius: 8px; background: var(--border-strong); }
.home-analyzer-preview__input span:nth-child(2) { width: 70%; }
.home-analyzer-preview__input span:nth-child(3) { width: 78%; }
.home-analyzer-preview__summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.home-analyzer-preview__summary b { padding: 8px 4px; border: 1px solid var(--border); border-radius: 6px; background: var(--paper); text-align: center; font: 700 9px/1.2 var(--font-mono); }
.home-rhyme-preview { display: grid; gap: 12px; min-height: 235px; align-content: center; padding: 24px 54px 24px 28px; }
.home-rhyme-preview span { display: grid; grid-template-columns: 24px 1fr; color: var(--muted); font: 600 11px/1.35 var(--font-mono); }
.home-rhyme-preview b { color: var(--accent); }
.home-rhyme-preview em { color: var(--text); font-style: normal; font-weight: 700; }
.home-rhyme-preview__word { position: relative; display: inline-block; width: max-content; }
.home-trainer-preview { display: grid; min-height: 235px; align-content: center; gap: 34px; padding: 30px; }
.home-trainer-preview__staff { display: grid; height: 80px; place-items: center; color: var(--text); }
.home-trainer-preview__notation { display: block; width: 92%; height: 88px; overflow: visible; }
.home-trainer-preview__staff-lines { fill: none; stroke: currentColor; stroke-width: 1.35; }
.home-trainer-preview__clef { fill: currentColor; }
.home-trainer-preview__quarter-note { fill: currentColor; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.home-trainer-preview__answers { position: relative; display: flex; justify-content: center; gap: 8px; }
.home-trainer-preview__answers b { display: grid; place-items: center; width: 38px; height: 36px; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--paper); font: 700 11px/1 var(--font-mono); }
.home-section-heading--compact { margin-bottom: 24px; }
.home-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.home-category { padding: clamp(20px, 3vw, 32px); border: 1px solid var(--border-strong); border-radius: var(--r-sheet); background: var(--paper); box-shadow: var(--lift-1); }
.home-category h2 { margin: 3px 0 22px; font-size: clamp(28px, 3vw, 40px); }
.home-compact-tool { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 78px; margin-top: 10px; padding: 14px 15px; border: 1px solid var(--border); border-radius: 9px; background: var(--paper); color: var(--text); text-decoration: none; transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease; }
.home-compact-tool:hover { border-color: var(--text); box-shadow: var(--lift-1); transform: translateY(-1px); }
.home-compact-tool:active { transform: translateY(0); }
.home-compact-tool span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.home-compact-tool strong { font-size: 15px; }
.home-compact-tool small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.home-compact-tool > b { color: var(--accent); font: 700 14px/1 var(--font-mono); }
.home-compact-tool--unavailable { border-style: dashed; background: var(--well); color: var(--muted); cursor: default; }
.home-compact-tool--unavailable > b { color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.home-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; max-width: 1120px; margin: 76px auto 0; border: 1px solid var(--border-strong); border-radius: var(--r-sheet); background: var(--border-strong); overflow: hidden; }
.home-values article { padding: 30px; background: var(--paper); }
.home-values span { color: var(--accent); font: 700 10px/1 var(--font-mono); letter-spacing: .12em; }
.home-values h2 { margin: 13px 0 9px; font-size: 21px; }
.home-values p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

/* Homepage-only marker doodles. Each SVG is anchored to the phrase it marks,
   remains outside layout, and never captures a pointer or focus event. */
.home-hero--compact,
.home-category { position: relative; isolation: isolate; }
.marker-target { position: relative; isolation: isolate; }
.marker-target--hero { display: inline-block; }
.marker-target--cta { display: inline-flex; }
.marker-target--cta .home-primary-cta { position: relative; z-index: 1; }
.marker-target--heading {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 3px 0 22px;
}
.home-category .marker-target--heading h2 {
  position: relative;
  z-index: 1;
  margin: 0;
}
.marker-doodle {
  position: absolute;
  z-index: 0;
  display: block;
  max-width: none;
  overflow: visible;
  pointer-events: none;
}
.marker-doodle--hero-underline {
  left: -.08em;
  bottom: -.19em;
  width: calc(100% + .16em);
  height: .48em;
}
.marker-doodle--cta-arrow {
  top: -38px;
  right: -4px;
  width: 96px;
  height: 62px;
}
.marker-doodle--heading {
  top: -60px;
  left: -28px;
  width: calc(100% + 112px);
  height: 160px;
}
.marker-doodle--loop {
  top: -22px;
  left: -24px;
  width: calc(100% + 80px);
  height: 92px;
}

@media (max-width: 920px) {
  .home-hero--compact { grid-template-columns: 1fr; padding: 28px 0 58px; }
  .home-hero--compact > .eyebrow,
  .home-hero--compact > h1,
  .home-hero--compact > .home-intro,
  .home-hero--compact > .home-feature-support,
  .home-hero--compact > .home-hero-actions,
  .home-feature-preview { grid-column: 1; grid-row: auto; }
  .home-feature-preview { margin-top: 34px; }
  .home-category-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .home-hero--compact h1 { font-size: clamp(42px, 13.5vw, 58px); }
  .home-scaffold-preview__body { grid-template-columns: 70px minmax(0, 1fr); }
  .home-scaffold-preview__pool { display: none; }
  .home-values { grid-template-columns: 1fr; }
  .home-values article { padding: 24px; }
  .marker-doodle__detail { display: block; }
  .marker-doodle.marker-art--desktop { display: none; }
  .marker-doodle.marker-art--compact { display: block; }
  .marker-doodle--hero-underline { bottom: -.15em; height: .42em; }
  .marker-doodle--cta-arrow { top: calc(100% - 1px); right: auto; left: 8px; width: 72px; height: 34px; }
  .marker-doodle--heading { top: -52px; left: -20px; width: calc(100% + 88px); height: 142px; }
  .marker-doodle--loop { top: -18px; left: -18px; width: calc(100% + 64px); height: 84px; }
}

/* --- Circle of Fifths preview -------------------------------------
   The wheel is the tool's whole identity, so the preview leads with it and
   sets three movement cards beside it, the way the board reads in play. */
.home-fifths-preview {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 4px 2px;
}
.home-fifths-preview__dial { flex: none; line-height: 0; }
.home-fifths-preview__wheel { width: 124px; height: 124px; display: block; }
.home-fifths-preview__hand { display: grid; gap: 8px; min-width: 0; flex: 1; }
.home-fifths-preview__hand span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-ctl-sm);
  background: var(--paper);
}
.home-fifths-preview__hand i {
  font-style: normal;
  font-weight: 700;
  font-size: 19px;
  line-height: 1;
  color: var(--text);
  min-width: 15px;
  text-align: center;
}
.home-fifths-preview__hand b {
  font: 700 9px/1.3 var(--font-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 520px) {
  .home-fifths-preview { gap: 12px; }
  .home-fifths-preview__wheel { width: 96px; height: 96px; }
  .home-fifths-preview__hand b { font-size: 8px; letter-spacing: .06em; }
}