/* CaseHub Landing · "A norma é código" — manifesto section
 * Inserted between split (devs/lawyers) and demo strip.
 */

.manifesto {
  position: relative;
  border-radius: 36px;
  background: var(--c-bone);
  box-shadow: var(--shadow-dark), var(--shadow-light);
  padding: 64px 56px;
  overflow: hidden;
  isolation: isolate;
}
.manifesto::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(80% 100% at 100% 0%, rgba(219,230,76,0.18) 0%, transparent 50%),
    radial-gradient(80% 100% at 0% 100%, rgba(30,72,144,0.10) 0%, transparent 50%);
  pointer-events: none; z-index: 0;
}

.manifesto-head {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px;
  margin-bottom: 48px; align-items: end;
}
.manifesto h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(40px, 5.5vw, 76px);
  letter-spacing: -0.04em; line-height: 0.95; color: var(--c-navy);
  margin: 0;
}
.manifesto h2 em {
  font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--c-blue);
}
.manifesto h2 .pollen { color: var(--c-green-d); }
.manifesto-lede {
  font-size: 17px; line-height: 1.6; color: var(--c-graphite);
}

/* Side-by-side norma vs. código */
.equation {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 64px 1fr; gap: 22px;
  align-items: stretch;
}
.equation-side {
  background: var(--c-bone);
  border-radius: 22px;
  box-shadow: inset var(--shadow-dark-sm), inset var(--shadow-light-sm);
  padding: 28px 28px 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.equation-side .kind {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
  color: var(--c-mute); font-weight: 700; text-transform: uppercase;
}
.equation-side .ref {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.10em;
  color: var(--c-green-d); font-weight: 700;
}
.equation-side .body {
  font-family: var(--serif); font-size: 15px; line-height: 1.55;
  color: var(--c-navy); font-style: italic;
}
.equation-side.code .body {
  font-family: var(--mono); font-size: 13px; font-style: normal;
  color: var(--c-navy); line-height: 1.7;
  white-space: pre-wrap;
}
.equation-side.code .body .k { color: var(--c-blue); font-weight: 600; }
.equation-side.code .body .s { color: var(--c-green-d); }
.equation-side.code .body .n { color: #B68A1F; }
.equation-side.code .body .c { color: var(--c-mute); }
.equation-side .foot {
  margin-top: auto; padding-top: 12px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  color: var(--c-mute); font-weight: 600;
}

/* The '=' glyph in Instrument Sans sits in the upper half of the em-box, so
   `place-items: center` lands the bars visibly above the optical center.
   Fix: hide the text node (font-size 0), render '=' via ::before with explicit
   transform — bars now land at the geometric center of the circle. */
.equation-eq {
  position: relative;
  width: 64px; height: 64px;
  color: var(--c-pollen);
  background: var(--c-navy);
  border-radius: 100px;
  box-shadow: var(--shadow-dark-sm), var(--shadow-light-sm);
  align-self: center;
  justify-self: center;
  font-size: 0;
}
.equation-eq::before {
  content: "=";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 38px;
  line-height: 1;
  color: var(--c-pollen);
  transform: translateY(3px);
}

/* Mapping rows */
.mapping {
  position: relative; z-index: 1;
  margin-top: 48px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.mapping-pair {
  background: var(--c-bone);
  border-radius: 18px;
  box-shadow: var(--shadow-dark-sm), var(--shadow-light-sm);
  padding: 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.mapping-pair .law {
  font-family: var(--serif); font-style: italic; font-size: 15px;
  color: var(--c-graphite); line-height: 1.4;
}
.mapping-pair .arrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  color: var(--c-green-d); font-weight: 700;
}
.mapping-pair .code {
  font-family: var(--mono); font-size: 12.5px;
  color: var(--c-navy); line-height: 1.5;
  padding: 10px 12px; border-radius: 8px;
  background: var(--c-bone);
  box-shadow: inset var(--shadow-dark-xs), inset var(--shadow-light-xs);
}
.mapping-pair .code .k { color: var(--c-blue); font-weight: 600; }
.mapping-pair .code .s { color: var(--c-green-d); }

/* Workbench callout */
.workbench {
  position: relative; z-index: 1;
  margin-top: 48px; padding: 36px 32px;
  background: var(--c-navy); color: #fff;
  border-radius: 24px;
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 36px; align-items: center;
  overflow: hidden;
}
.workbench::before {
  content: ""; position: absolute; right: -120px; bottom: -120px;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(219,230,76,0.30) 0%, transparent 60%);
  filter: blur(40px); pointer-events: none;
}
.workbench-eyebrow {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
  color: var(--c-pollen); font-weight: 700; text-transform: uppercase;
}
.workbench h3 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(28px, 3.5vw, 42px);
  letter-spacing: -0.03em; line-height: 1.05;
  margin: 14px 0 0; color: #fff;
}
.workbench h3 em {
  font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--c-pollen);
}
.workbench-tools {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.tool {
  background: rgba(255,255,255,0.06);
  border-radius: 14px; padding: 14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
  display: flex; flex-direction: column; gap: 6px;
}
.tool .ic {
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(255,255,255,0.08); display: grid; place-items: center;
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  color: var(--c-pollen);
}
.tool .name {
  font-family: var(--display); font-weight: 700; font-size: 14px;
  color: #fff; letter-spacing: -0.01em;
}
.tool .desc {
  font-size: 11.5px; color: rgba(255,255,255,0.7); line-height: 1.4;
}

@media (max-width: 880px) {
  .manifesto { padding: 40px 24px; border-radius: 24px; }
  .manifesto-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 28px; }
  .equation { grid-template-columns: 1fr; gap: 12px; }
  .equation-eq { width: 64px; height: 48px; justify-self: center; transform: rotate(90deg); }
  .equation-eq::before { font-size: 30px; transform: none; }
  .equation-side { padding: 22px; }
  .equation-side .body { font-size: 14px; }
  .equation-side.code .body { font-size: 12px; }
  .mapping { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
  .mapping-pair { padding: 16px; }
  .mapping-pair .law { font-size: 13.5px; }
  .mapping-pair .code { font-size: 11.5px; padding: 8px 10px; }
  .workbench { grid-template-columns: 1fr; padding: 28px 22px; gap: 22px; margin-top: 28px; border-radius: 20px; }
  .workbench-tools { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .mapping { grid-template-columns: 1fr; }
  .workbench-tools { grid-template-columns: 1fr; }
}