/* ClearlyNamed article styles for the guides; the header and footer are in chrome.css. */
:root { --bg:#f6f6f3; --paper:#fff; --ink:#18181b; --mute:#5f5f66; --line:#e3e3df; --accent:#3d52d5; --accent-ink:#2a3bb0;
        --soft:#eef0fb; color-scheme:light dark; }
@media (prefers-color-scheme:dark) {
  :root { --bg:#141416; --paper:#1f1f23; --ink:#f1f1f3; --mute:#a7a7af; --line:#33333a; --accent:#8e9cff; --accent-ink:#b7c0ff;
          --soft:#262a40; }
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
       font:17px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; }
a { color:var(--accent); text-underline-offset:3px; }
a:focus-visible, summary:focus-visible { outline:3px solid #d88c00; outline-offset:3px; }

.btn { display:inline-block; padding:9px 16px; border-radius:10px; background:var(--accent); color:#fff !important; font-weight:650; text-decoration:none; }
.btn:hover { background:var(--accent-ink); }
@media (prefers-color-scheme:dark) { .btn { color:#141416 !important; } }

/* article */
.article { max-width:740px; margin:auto; padding:22px 22px 0; }
.crumbs { font-size:14px; color:var(--mute); }
.crumbs a { color:var(--mute); }
h1 { font-size:clamp(32px,5.4vw,46px); line-height:1.12; letter-spacing:-.03em; margin:14px 0 12px; }
.dek { font-size:20px; line-height:1.5; color:var(--mute); margin:0 0 14px; }
.byline { font-size:14px; color:var(--mute); border-bottom:1px solid var(--line); padding-bottom:18px; margin:0 0 26px; }
h2 { font-size:25px; line-height:1.25; letter-spacing:-.015em; margin:40px 0 10px; }
h3 { font-size:19px; margin:26px 0 6px; }
p, li { margin:12px 0; }
.takeaways { background:var(--soft); border-radius:16px; padding:18px 22px; margin:0 0 8px; }
.takeaways h2 { font-size:15px; text-transform:uppercase; letter-spacing:.06em; margin:0 0 6px; }
.takeaways ul { margin:0; padding-left:20px; }
.tip { border-left:3px solid var(--accent); padding:2px 0 2px 16px; color:var(--ink); }

/* example names */
.names { list-style:none; padding:0; margin:18px 0 6px; display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); }
.names li { margin:0; background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:14px 16px;
            font-size:15px; line-height:1.5; }
.names b { display:block; font-size:20px; letter-spacing:-.01em; }
.names .dom { display:block; font-size:14px; color:var(--mute); margin-bottom:6px; }
.names .check { display:block; width:max-content; margin-top:10px; font-size:13px; font-weight:600; color:var(--mute);
             background:var(--soft); border-radius:999px; padding:2px 10px; }
.names.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.names b a { text-decoration:none; }
.names b a:hover { text-decoration:underline; }
.toc { font-size:15px; color:var(--mute); margin:22px 0 0; }
.toc b { color:var(--ink); margin-right:6px; }
.fine { font-size:14px; color:var(--mute); }

/* call to action */
.cta { margin:40px 0; padding:26px; border-radius:18px; background:var(--ink); color:var(--bg); text-align:center; }
.cta h2 { margin:0 0 6px; color:var(--bg); }
.cta p { margin:0 0 16px; opacity:.85; }

/* FAQ */
details { border-top:1px solid var(--line); padding:12px 0; }
details:last-of-type { border-bottom:1px solid var(--line); }
summary { cursor:pointer; font-weight:650; }
details p { margin:8px 0 0; color:var(--mute); }

@media (max-width:600px) {
  .dek { font-size:18px; }
  .names, .names.two { grid-template-columns:1fr; }
}