/* SmartContact Cards design system: colors, type, buttons, top bar and switches. Used by every page.
   "Midnight Silk" design (2026-10-29), from artsilk.us. */
/* Bricolage Grotesque (SIL Open Font License, assets/fonts/OFL.txt), served from this site. */
@font-face { font-family:"Bricolage Grotesque"; font-style:normal; font-weight:300 800; font-stretch:75% 100%; font-display:swap;
  src:url(/assets/fonts/bricolage-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"Bricolage Grotesque"; font-style:normal; font-weight:300 800; font-stretch:75% 100%; font-display:swap;
  src:url(/assets/fonts/bricolage-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

  /* Palette "Midnight Silk", taken from artsilk.us (css/refresh.css) so SmartContact reads as part of ArtSilk.
     Periwinkle is always your details going out; champagne silk is always their details coming back. */
  :root {
    --paper:#0b1120; --surface:#111a2e; --surface-2:#17223b; --line:rgba(201,214,240,.13); --rule:rgba(143,176,240,.45);
    --ink:#eef1f7; --muted:#aab3c7;
    --you:#4a6cd6; --you-text:#8fb0f0; --you-fill:linear-gradient(135deg,#4070c8,#1a1a5e); --you-glow:rgba(64,112,200,.28);
    --them:#e3c995; --them-text:#e3c995; --on-them:#0b1120;
    --ghost:rgba(255,255,255,.06); --ghost-line:rgba(255,255,255,.22);
    --bezel:#1b2338; --bezel-edge:rgba(255,255,255,.12);
    --ok:#6fd39a; --ok-soft:rgba(111,211,154,.12); --err:#ff8b80; --err-soft:rgba(255,139,128,.12); --warn:#f2b866; --warn-soft:rgba(242,184,102,.14);
    --field:#0d1527; --field-line:rgba(201,214,240,.2);
    --font:"Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --wrap:1120px;
    color-scheme:dark;
  }
  /* Light version of the same palette (the sun/moon switch; saved as mcc-theme). */
  :root[data-palette=light] {
    --paper:#f4f5f9; --surface:#fff; --surface-2:#fff; --line:#dfe3ec; --rule:#0b1120;
    --ink:#0b1120; --muted:#4d5872;
    --you:#3a5fc4; --you-text:#3557b8; --you-glow:rgba(64,112,200,.22);
    --them-text:#8a6a2c;
    --ghost:#fff; --ghost-line:#cfd5e2;
    --bezel:#0d1018; --bezel-edge:transparent;
    --ok:#1d7a45; --ok-soft:rgba(29,122,69,.1); --err:#c0392b; --err-soft:rgba(192,57,43,.08); --warn:#9a5b00; --warn-soft:rgba(154,91,0,.1);
    --field:#f7f8fb; --field-line:#cfd5e2;
    color-scheme:light;
  }

  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
  body { margin:0; font-family:var(--font); font-size:18px; line-height:1.55; color:var(--ink); background:var(--paper);
    font-optical-sizing:auto; -webkit-font-smoothing:antialiased; }
  @media (max-width:640px) { body { font-size:16px; } }
  a { color:var(--you-text); }
  :focus-visible { outline:3px solid var(--you-text); outline-offset:3px; border-radius:6px; }
  .wrap { max-width:var(--wrap); margin:0 auto; padding:0 24px; }
  h1, h2, h3 { margin:0; font-weight:700; letter-spacing:-.015em; }
  h2 { font-size:36px; line-height:1.1; font-stretch:88%; }
  h3 { font-size:21px; line-height:1.25; }
  p { margin:0; }
  @media (max-width:640px) { h2 { font-size:28px; } h3 { font-size:18px; } }

  /* Buttons */
  .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:12px 26px; border-radius:999px;
    font:inherit; font-size:17px; font-weight:600; text-decoration:none; white-space:nowrap; cursor:pointer; border:1px solid transparent;
    transition:box-shadow .2s, border-color .2s, background-color .2s, color .2s; }
  .btn svg { width:18px; height:18px; flex:0 0 18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .btn-you { background:var(--you-fill); color:#fff; border-color:rgba(143,176,240,.35); box-shadow:0 6px 20px var(--you-glow); }
  .btn-you:hover { box-shadow:0 10px 28px rgba(64,112,200,.45); }
  .btn-line { background:var(--ghost); border-color:var(--ghost-line); color:var(--ink); }
  .btn-line:hover { border-color:var(--ink); }

  /* Nav */
  .nav { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--paper) 86%, transparent);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
  .nav .wrap { display:flex; align-items:center; gap:24px; height:64px; }
  .brand { display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; font-weight:700; font-size:17px; }
  .brand img { height:15px; width:auto; }
  :root[data-palette=light] .brand img { filter:invert(1); }
  .brand span { padding-left:12px; border-left:1px solid var(--line); white-space:nowrap; }
  .nav-links { display:flex; gap:24px; margin-left:auto; }
  .nav-links a { color:var(--ink); text-decoration:none; font-size:16px; white-space:nowrap; }
  .nav-links a:hover { color:var(--you-text); }
  .nav-actions { display:flex; align-items:center; gap:8px; }
  .nav-actions .btn { min-height:40px; padding:8px 16px; font-size:15px; }
  /* Language and color switches */
  .tool { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:40px; min-height:40px; padding:8px 14px; border-radius:999px;
    border:1px solid var(--ghost-line); background:var(--ghost); color:var(--ink); font:inherit; font-size:15px; font-weight:600; text-decoration:none; cursor:pointer;
    transition:border-color .2s; }
  .tool:hover { border-color:var(--ink); }
  .tool svg { width:18px; height:18px; flex:0 0 18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .theme { width:40px; padding:0; }
  .theme .moon, :root[data-palette=light] .theme .sun { display:none; }
  :root[data-palette=light] .theme .moon { display:block; }
  @media (max-width:1180px) { .nav-links { display:none; } .nav-actions { margin-left:auto; } }
  @media (max-width:520px) { .brand span { display:none; } .nav .wrap { gap:12px; } .nav-actions .btn { padding:8px 12px; } }
  @media (max-width:430px) {
    .nav .wrap { padding:0 16px; gap:10px; }
    .brand img { height:11px; }
    .nav-actions { gap:6px; }
    .nav-actions .nav-login { display:none; }
    .nav-actions .btn { font-size:14px; }
    .tool { padding:8px 10px; }
  }
  @media (max-width:380px) { .lang svg { display:none; } }