/* ============================================================
   OrgKit — tool-page content block ("what this does" + FAQ)
   Static, crawlable copy that lives on the pre-connect screen of
   each tool. Purely presentational: no tool JS reads these
   classes, and nothing here changes app layout — the block is a
   normal-flow child of the existing landing/auth container, so it
   disappears with that container when the app view takes over.
   ============================================================ */

/* --ok-label: AA-passing muted label colour. The shared --tx3 is 3.53:1 on --s1,
   which fails AA for the 10-11px labels below. See orgkit-guide.css for the maths.
   760px matches .gd-main on /guides/ so every content column on the site lines up. */
:root { --ok-label: #868b96 }

.ok-seo { width: 100%; max-width: 760px; margin: 56px auto 0; text-align: left;
  border-top: 1px solid var(--b1); padding-top: 34px }

/* Keyboard focus indicator for the links in this block */
.ok-seo a:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 2px }

.ok-seo h2 { font-family: var(--display); font-size: 19px; font-weight: 700;
  letter-spacing: -.01em; color: var(--tx); margin: 0 0 10px }
.ok-seo h3 { font-family: var(--display); font-size: 14px; font-weight: 600;
  color: var(--tx); margin: 26px 0 8px }
.ok-seo p { font-size: 14px; line-height: 1.75; color: var(--tx2); margin: 0 0 12px }
.ok-seo a { color: var(--acc); text-decoration: none }
.ok-seo a:hover { text-decoration: underline }
.ok-seo strong { color: var(--tx); font-weight: 600 }
.ok-seo code { font-family: var(--mono); font-size: 12px; background: var(--s2);
  border: 1px solid var(--b1); padding: 1px 5px; border-radius: 4px; color: var(--tx);
  word-break: break-word }

.ok-seo-feat { list-style: none; margin: 6px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 22px }
.ok-seo-feat li { font-size: 13.5px; line-height: 1.7; color: var(--tx2);
  padding: 5px 0 5px 20px; position: relative }
.ok-seo-feat li::before { content: "→"; position: absolute; left: 0; color: var(--acc);
  font-family: var(--mono); font-size: 12px }
.ok-seo-feat li strong { color: var(--tx) }

.ok-seo-faq { margin: 4px 0 0 }
.ok-seo-faq .q { font-size: 14px; font-weight: 600; color: var(--tx); margin: 20px 0 5px }
.ok-seo-faq .a { font-size: 13.5px; line-height: 1.75; color: var(--tx2); margin: 0 }

.ok-seo-links { margin: 30px 0 0; border-top: 1px solid var(--b1); padding-top: 18px }
.ok-seo-links .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ok-label); margin-bottom: 9px }
.ok-seo-links ul { list-style: none; margin: 0; padding: 0 }
.ok-seo-links li { font-size: 13.5px; line-height: 1.9 }

@media (max-width: 640px) {
  .ok-seo { margin-top: 40px; padding-top: 26px }
  .ok-seo-feat { grid-template-columns: 1fr }
  .ok-seo h2 { font-size: 17px }
  .ok-seo-faq .q { margin-top: 18px }
}