:root {
  --bg: #faf9f5;
  --surface: #fff;
  --ink: #232625;
  --muted: #515650;
  --line: #dedfd6;
  --accent: #943b2e;
  --accent2: var(--accent);
  --a: var(--accent);
  --coral: #ff725c;
  --lime: #d9ec96;
  --violet: #d5c9ed;
  --radius: 24px;
  --max: 1200px;
  color-scheme: light;
}
body { background: var(--bg); color: var(--ink); }
.uhead { position: sticky; top: 0; z-index: 10; padding: 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.uinner { position: relative; width: 100%; max-width: var(--max); min-height: 66px; margin: auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.uhead .ubrand { color: var(--ink) !important; font: 700 20px Arial, Helvetica, sans-serif !important; letter-spacing: -.04em; text-decoration: none; white-space: nowrap; }
.uhead .ubrand span { color: var(--accent); }
.uhead .ulinks { display: flex; align-items: center; gap: clamp(12px, 2vw, 26px); margin: 0; padding: 0; }
.uhead .ulinks a { padding: 8px 0; color: var(--ink) !important; font: 600 14px Arial, Helvetica, sans-serif !important; text-decoration: none; white-space: nowrap; }
.uhead .ulinks a:hover { text-decoration: underline !important; text-underline-offset: 4px; }
.uhead .utoggle { display: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
main .eyebrow, main .variant-link, main .cards a, main > a, main .related a { color: var(--accent); }
main .eyebrow { background: transparent; padding: 0; }
main .hero { background: var(--bg); color: var(--ink); }
main .hero::before, main .hero::after { content: none; }
main .hero p, main .lead, main .card p, main .panel p, main .option p { color: var(--muted); }
main .hero .meta span, main .variant-meta span, main .related a { background: #edeae5; color: var(--ink); border-color: var(--line); }
main .card, main .panel, main .variant, main .option { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: none; }
main .cta-box { background: #25262b; color: #fff; }
main .cta-box p { color: #e2e1de; }
main a.btn, main a.button { background: var(--ink); color: #fff; border-color: var(--ink); border-radius: 999px; }
main a.btn.secondary, main a.button.secondary { background: transparent; color: var(--ink); border: 1px solid var(--line); }
main :is(a.btn, a.button):hover { text-decoration: underline; text-underline-offset: 3px; }
body:not(.studio-home) header:has(.logo) { background: var(--bg); border-color: var(--line); }
body:not(.studio-home) header .logo, body:not(.studio-home) header .back { color: var(--ink); }
body:not(.studio-home) .cards .card { border: 0; border-radius: var(--radius); }
body:not(.studio-home) .cards .card h2 { margin: 24px 0 0; letter-spacing: -.035em; }
body:not(.studio-home) .cards .card a { margin-top: 12px; text-underline-offset: 4px; }
body:not(.studio-home) .cards .card:nth-child(3n+1) { background: #f4ddd5; }
body:not(.studio-home) .cards .card:nth-child(3n+2) { background: #e7edcf; }
body:not(.studio-home) .cards .card:nth-child(3n) { background: #e9e1f1; }
@media (max-width: 850px) {
  .uhead .uinner { padding-inline: 18px; }
  .uhead .utoggle { display: block; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 23px; cursor: pointer; }
  .uhead .ulinks { display: none; position: absolute; inset: 100% 12px auto; align-items: stretch; flex-direction: column; gap: 0; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 28px #23262514; }
  .uhead .ulinks.open { display: flex; }
  .uhead .ulinks a { padding: 12px; }
}
@media (min-width: 851px) {
  .uhead .utoggle { display: none; }
  .uhead .ulinks { position: static; flex-direction: row; background: transparent; border: 0; box-shadow: none; }
}

body { font-family: Arial, Helvetica, sans-serif; }
.uhead .ulinks a[href="/#contact"] { border: 1px solid var(--ink); border-radius: 999px; padding-inline: 14px; }
main .option a.btn:hover { color: #fff; background: #41473e; border-color: #41473e; }
main .option { display: flex; flex-direction: column; gap: 12px; }
main .option strong { margin-top: auto; }
html { background: var(--bg); }
body:not(.studio-home) :is(footer, main .feature-list) { color: var(--muted); }
body:not(.studio-home) main > h1 { font-weight: 500; overflow-wrap: anywhere; }
body:not(.studio-home) main .hero h1 { font-weight: 500; overflow-wrap: anywhere; }
body:not(.studio-home) main .panel { border-top-color: var(--coral); }
.uhead { height: auto; }