.references { --ref-accent:var(--cyan); --ref-ink:var(--text); --ref-muted:var(--text-dim); --ref-surface:var(--surface); --ref-border:var(--border); scroll-margin-top:90px; }
body:has([data-reviews="mage"]) .references { --ref-accent:var(--blue); --ref-ink:var(--ink); --ref-muted:var(--muted); --ref-surface:var(--pale); --ref-border:var(--line); }
.references-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.references-heading h2 { color:var(--ref-ink); font-size:clamp(28px,3.5vw,48px); margin:0; max-width:740px; }
.references-eyebrow { color:var(--ref-accent); font-size:12px; text-transform:uppercase; letter-spacing:.12em; margin:0 0 14px; font-weight:600; }
.reference-link { display:inline-flex; align-items:center; gap:16px; min-height:44px; color:var(--ref-accent); font:600 15px var(--font-body,var(--body)); border:0; background:transparent; cursor:pointer; padding:0; }
.reference-link:hover { text-decoration:underline; text-underline-offset:5px; }
.references-intro { color:var(--ref-muted); margin:20px 0 10px; }
.references-demo { color:var(--ref-muted); font-size:13px; margin:0 0 28px; }
.references-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.reference-card { margin:0; padding:28px; background:var(--ref-surface); border:1px solid var(--ref-border); border-radius:6px; display:flex; flex-direction:column; min-width:0; }
.reference-tag { font-size:12px; color:var(--ref-accent); font-weight:600; }
.reference-card blockquote { margin:20px 0 28px; color:var(--ref-ink); font-size:19px; line-height:1.6; overflow-wrap:anywhere; white-space:pre-line; }
.reference-card figcaption { display:flex; gap:12px; align-items:center; margin-top:auto; padding-top:18px; border-top:1px solid var(--ref-border); }
.reference-avatar { display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--ref-border); border-radius:50%; color:var(--ref-accent); flex-shrink:0; font-size:13px; }
.reference-card strong { display:block; font-size:15px; color:var(--ref-ink); overflow-wrap:anywhere; }
.reference-card small { color:var(--ref-muted); font-size:12px; display:block; }
.references-participate { display:grid; grid-template-columns:.8fr 1.2fr; gap:64px; margin-top:48px; padding-top:40px; border-top:1px solid var(--ref-border); }
.references-participate h3 { color:var(--ref-ink); font-size:24px; margin:0 0 18px; }
.references-participate p:not(.references-eyebrow) { color:var(--ref-muted); }
.references-local { font-size:13px; margin-top:18px; max-width:370px; }
.review-form { display:grid; grid-template-columns:1fr 1fr; gap:18px; min-width:0; }
.review-field { min-width:0; }
.review-field label { display:block; color:var(--ref-ink); font-size:14px; font-weight:600; margin-bottom:8px; }
.review-field input,.review-field select,.review-field textarea { box-sizing:border-box; width:100%; min-height:48px; padding:12px; color:var(--ref-ink); background:var(--ref-surface); border:1px solid var(--ref-border); border-radius:4px; font:inherit; font-size:16px; }
.review-field input::placeholder,.review-field textarea::placeholder { color:var(--ref-muted); opacity:1; }
.review-field textarea { resize:vertical; }
.review-field-wide,.review-submit,.review-status { grid-column:1/-1; }
.review-submit { cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:48px; padding:12px 18px; background:var(--ref-accent); color:var(--bg); border:1px solid var(--ref-accent); border-radius:4px; font:600 16px var(--font-body,var(--body)); }
[data-reviews="mage"] .review-submit { color:var(--white); }
.review-submit:hover { filter:brightness(1.1); }
.review-status { margin:0; font-size:14px; color:var(--ref-ink); }
.saved-reviews { margin-top:40px; }
.saved-reviews .references-heading { margin-bottom:24px; }
.saved-reviews h3 { font-size:22px; line-height:1.4; }
@media (min-width:1051px) { body:has([data-reviews="mage"]) .nav { gap:13px; font-size:13px; } }
@media (max-width:1100px) { .references-grid { gap:14px; } .reference-card { padding:22px; } .references-participate { gap:32px; } }
@media (max-width:760px) { .references-grid,.references-participate { grid-template-columns:1fr; } .references-participate { margin-top:32px; padding-top:32px; gap:24px; } .reference-card blockquote { font-size:18px; } }
@media (max-width:480px) { .review-form { grid-template-columns:1fr; } .references-heading h2 { font-size:30px; } }