/* Guide pages (/networking-event-ideas, /smart-badges-vs-apps): long-form articles on top of styles.css */
.guide { max-width: 760px; margin: 0 auto; padding: 140px var(--gutter) 96px; }
.guide h1 { margin-top: 18px; }
.guide .updated { color: var(--ink-3); margin-top: 14px; }
.guide h2 { font-size: 26px; line-height: 1.25; margin: 64px 0 0; color: var(--ink); letter-spacing: -.01em; }
.guide p { color: var(--ink-2); font-size: 17px; line-height: 1.65; margin: 14px 0 0; }
.guide a:not(.btn) { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.guide .lede a { color: inherit; }
.ideas { list-style: none; margin: 20px 0 0; padding: 0; counter-reset: idea var(--start, 0); }
.idea { counter-increment: idea; position: relative; padding: 22px 24px 22px 70px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-2); }
.idea + .idea { margin-top: 12px; }
.idea::before { content: counter(idea, decimal-leading-zero); position: absolute; left: 24px; top: 24px; font: 500 13px var(--mono); color: var(--ink-3); }
.idea h3 { font-size: 19px; line-height: 1.3; color: var(--ink); font-weight: 600; }
.idea p { margin-top: 8px; font-size: 16px; }
.idea .meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.idea .meta dt { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.idea .meta dd { margin: 5px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink); }
.idea .meta div:first-child dt { color: var(--pink); }
.idea .meta div:last-child dt { color: var(--amber); }
.idea.ours { border-color: rgba(155, 61, 255, .45); }
.fit { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 15px; }
.fit th, .fit td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.fit th { font: 500 12px var(--mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.fit td { color: var(--ink-2); }
.fit td:first-child { color: var(--ink); white-space: nowrap; }
.src { font-size: 14px !important; color: var(--ink-3) !important; }
.guide details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.guide summary { cursor: pointer; color: var(--ink); font-size: 17px; }
.guide details p { margin-top: 10px; }
.cta-box { margin-top: 64px; padding: 32px; border-radius: 22px; border: 1px solid var(--line); background: radial-gradient(80% 140% at 50% 0%, rgba(155,61,255,.16), transparent 70%), var(--bg-2); text-align: center; }
.cta-box h2 { margin: 0; }
.cta-box .btn { margin-top: 22px; text-decoration: none; }
.answer { margin-top: 32px; padding: 22px 24px; border-radius: 18px; border: 1px solid rgba(255, 94, 168, .35); background: var(--bg-2); }
.answer-k { font: 500 11px var(--mono) !important; text-transform: uppercase; letter-spacing: .08em; color: var(--pink) !important; margin: 0 !important; }
.answer p + p { margin-top: 8px; }
.answer b { color: var(--ink); font-weight: 600; }
.scroll-x { overflow-x: auto; margin-top: 20px; width: min(1040px, calc(100vw - 2 * var(--gutter))); position: relative; left: 50%; translate: -50% 0; }
.compare { margin-top: 0; }
.compare td:first-child { white-space: normal; font-weight: 500; }
.compare tr.ours td { background: rgba(155, 61, 255, .1); }
.lv { display: inline-block; padding: 3px 10px; border-radius: 999px; font: 500 12px var(--mono); white-space: nowrap; }
.lv.mid { color: var(--amber); box-shadow: inset 0 0 0 1px rgba(255, 197, 107, .35); }
.lv.yes { color: var(--pink); box-shadow: inset 0 0 0 1px rgba(255, 94, 168, .5); }
.guide ul.plain { margin: 14px 0 0; padding-left: 22px; }
.guide ul.plain li { color: var(--ink-2); font-size: 17px; line-height: 1.65; }
.guide ul.plain li + li { margin-top: 6px; }
.guide ul.plain b { color: var(--ink); font-weight: 600; }
.guide a.see { color: var(--pink); text-decoration: none; white-space: nowrap; }
.guide a.see:hover { text-decoration: underline; }
/* Use-case pages (/for-socials-and-mixers, /for-singles-nights) */
.shot { margin: 28px 0 0; }
.shot img { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--line); }
.shot figcaption { margin-top: 10px; font: 400 12px var(--mono); color: var(--ink-3); }
.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.shots .shot { margin: 0; }
.shots img { border-radius: 12px; border: 6px solid #1c1a24; }
.steps { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-2); }
.steps li::before { content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font: 500 14px var(--mono); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.steps h3 { font-size: 19px; line-height: 1.3; color: var(--ink); font-weight: 600; }
.steps p { margin: 0; font-size: 16px; }
.addons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.addon { padding: 20px 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-2); }
.addon h3 { font-size: 17px; color: var(--ink); font-weight: 600; }
.addon p { margin-top: 6px; font-size: 15px; }
.addon a.see { display: inline-block; margin-top: 10px; font-size: 15px; }
.nav .btn-sm { margin-left: auto; } /* no section links on this page */
@media (max-width: 640px) {
  /* the comparison table becomes one card per tool */
  .compare thead { display: none; }
  .compare, .compare tbody, .compare tr, .compare td { display: block; }
  .compare tr { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; background: var(--bg-2); }
  .compare tr + tr { margin-top: 10px; }
  .compare tr.ours { border-color: rgba(155, 61, 255, .45); }
  .compare tr.ours td { background: none; }
  .compare td { border: 0; padding: 4px 0; }
  .compare td:first-child { font-size: 17px; padding-bottom: 8px; }
  .compare td:not(:first-child)::before { content: attr(data-label); display: block; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 2px; }
  .idea { padding: 20px 20px 20px 56px; }
  .idea::before { left: 18px; }
  .fit td:first-child { white-space: normal; }
  .idea .meta { grid-template-columns: 1fr; }
  .shots, .addons { grid-template-columns: 1fr; }
  .shots { max-width: 360px; }
}