/* Guides — shares the privacy page's standalone design system. */
:root {  /* dark is the house default */
  --bg: #000; --surface: #1c1c1e; --text: #f5f5f7; --text-2: #c7c7cc;
  --text-3: #98989d; --border: #38383a; --accent: #0a84ff; --green: #2aa745;
}
:root[data-theme="light"] {
  --bg: #fbfbfd; --surface: #fff; --text: #1d1d1f; --text-2: #424245;
  --text-3: #6e6e73; --border: #e3e3e6; --accent: #0071e3;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  line-height: 1.65; font-size: 16px;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 56px 24px 96px; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 18px;
         margin-bottom: 38px; cursor: pointer; width: fit-content; }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block;
       background: linear-gradient(135deg, #0a84ff, #2aa745);
       -webkit-mask: radial-gradient(circle, transparent 31%, #000 32%);
               mask: radial-gradient(circle, transparent 31%, #000 32%); }
.crumb { font-size: 14px; color: var(--text-3); margin: 0 0 18px; }
.crumb a { color: var(--text-3); text-decoration: none; }
.crumb a:hover { color: var(--accent); }
h1 { font-size: 32px; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 10px; }
.dek { font-size: 18px; color: var(--text-3); margin: 0 0 34px; line-height: 1.5; }
h2 { font-size: 20px; margin: 40px 0 10px; letter-spacing: -0.01em; }
p, li { color: var(--text-2); }
a { color: var(--accent); }
ul, ol { padding-left: 22px; }
li { margin: 6px 0; }
.note { background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
        padding: 14px 18px; font-size: 14.5px; color: var(--text-3); margin: 24px 0; }
.cta { background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
       padding: 22px; margin-top: 48px; }
.cta h2 { margin: 0 0 8px; font-size: 18px; }
.cta p { margin: 0 0 14px; font-size: 15px; }
.cta a.btn { display: inline-block; background: var(--accent); color: #fff; text-decoration: none;
             border-radius: 999px; padding: 10px 22px; font-size: 15px; font-weight: 600; }
footer { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--border);
         color: var(--text-3); font-size: 14px; }
footer a { color: var(--text-3); }
/* Index cards */
/* Stacked cards size to their own content (7/31 card doctrine: equal heights
   only matter for cards sharing a row; a vertical stack morphs to fit). */
.guide-list { display: grid; gap: 14px; margin-top: 30px; }
.guide-card { display: block; background: var(--surface); border: 1px solid var(--border);
              border-radius: 14px; padding: 20px 22px; text-decoration: none; }
.guide-card:hover { border-color: var(--accent); }
.guide-card h2 { margin: 0 0 6px; font-size: 18px; color: var(--text); }
.guide-card p { margin: 0; font-size: 14.5px; color: var(--text-3); }