/* IQ identity adapted from the supplied AMI assets/css/app.css.
   Original SVG marks are bundled unchanged in assets/brand/. */
:root {
  --ink: #111111;
  --green: #a64020;
  --mint: #f0a58a;
  --paper: #f7f7f5;
  --muted: #5f5f5c;
  --line: #deded9;
  --spark: #d85a30;
  --font-display: "Source Serif 4", Georgia, serif;
  --font-body: "IBM Plex Sans", "Segoe UI", sans-serif;
}
body {
  font-family: var(--font-body);
  background: radial-gradient(1200px 600px at 10% -10%, #d85a3019, transparent 55%),
    linear-gradient(180deg, #f3f3f0, var(--paper) 45%, #efefed);
}
h1, h2, h3, .brand { font-family: var(--font-display); }
h1 { font-weight: 500; letter-spacing: -2px; }
h2 { font-weight: 500; }
h3 { font-weight: 600; }
.brand { font-size: 27px; letter-spacing: -.7px; }
.brand>span:last-child { color: var(--spark); }
.brand-mark {
  display: block;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  background: none;
  border-radius: 0;
  margin-right: 10px;
}
.dot, .small-dot { background: var(--spark); }
.button { font-family: var(--font-body); }
.button:hover { background: #a64020; }
.path-card { background: #ebebe8; border-color: var(--line); box-shadow: 0 18px 48px #0000000d; }
.path-core { background: linear-gradient(145deg, #111111, #241611); }
.path-core p { color: #dedbd6; }
.core-brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); }
.core-brand img { flex: 0 0 auto; }
.connector { color: #777771; }
.pills span { border-color: #775248; }
.card-foot { border-color: #d4d4cf; }
.example-steps li:before { background: #f2e2da; color: #a64020; }
.principle { background: radial-gradient(ellipse at 100% 0%, #d85a3029, transparent 65%), #111111; }
.principle p { color: #d7d5d0; }
.feedback-section { background: #ebebe8; }
.choice:has(input:checked) { background: #fcf0ea; border-color: #a64020; }
textarea, input[type=email] { background: #fcfcfa; border-color: #cecec8; font-family: var(--font-body); }
.notice.success { background: #f7f1e9; border-color: #b79a80; }
:focus-visible { outline-color: var(--spark); }
@media(max-width:680px) {
  .brand { font-size: 23px; }
  .brand-mark { width: 38px; height: 38px; margin-right: 7px; }
  .hero h1 { font-size: 41px; letter-spacing: -1.5px; }
}