/* The pages written for one search each (/broken-link-checker, /website-typo-checker,
   /what-does-chatgpt-say-about-my-business): brand.css plus one shared layout, each leading into
   the free check or the dashboard. */
.bar { background: var(--ink); color: var(--on-ink); }
.bar-in { max-width: 1040px; margin-inline: auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px max(20px, env(safe-area-inset-right, 0px)) 14px max(20px, env(safe-area-inset-left, 0px)); }
.bar .wordmark { font-size: 1.15rem; color: var(--on-ink); }
.bar a.label { color: var(--on-ink-muted); text-decoration: none; }
.page { max-width: 1040px; margin-inline: auto; padding: clamp(40px, 7vw, 88px) max(20px, env(safe-area-inset-right, 0px)) 72px max(20px, env(safe-area-inset-left, 0px)); display: grid; gap: clamp(44px, 7vw, 72px); }
.hero { display: grid; gap: 18px; max-width: 760px; }
/* Room between lines, so the highlighter on a second line doesn't cover the first line's letters. */
.hero h1 { margin-top: 4px; line-height: 1.16; }
.lead { color: var(--muted); font-size: 1.1rem; max-width: 60ch; }
.ask { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; max-width: 640px; }
.ask .input { flex: 1 1 260px; min-width: 0; }
.fine { color: var(--faint); font-size: .86rem; }
.fine a { color: var(--muted); }
section h2 { margin-bottom: 18px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.card { background: var(--white); border-radius: var(--radius); padding: 22px; display: grid; gap: 8px; align-content: start; }
.card h3 { margin: 0; }
.card p { color: var(--muted); font-size: .95rem; }
.prose { display: grid; gap: 14px; max-width: 68ch; }
.prose p { color: var(--fg); }
.example { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; display: grid; gap: 10px; max-width: 720px; }
.example .q { font-family: var(--serif); font-size: 1.25rem; line-height: 1.5; }
.example .fix { font-family: var(--serif); font-style: italic; color: var(--pen); }
.example .addr { font-family: var(--mono); font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.compare > div { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; display: grid; gap: 6px; }
.compare .said { border-top: 3px solid var(--pen); }
.compare .site { border-top: 3px solid var(--good); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: step; max-width: 720px; }
.steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; counter-increment: step; }
.steps li::before { content: counter(step); width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-family: var(--mono); font-size: .8rem; display: grid; place-items: center; }
.steps b { display: block; }
.steps span { color: var(--muted); }
.faq { display: grid; gap: 0; max-width: 760px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { color: var(--muted); margin-top: 10px; }
.more { display: flex; flex-wrap: wrap; gap: 10px; }
.more a { text-decoration: none; border: 1px solid var(--line); background: var(--white); border-radius: 99px; padding: 9px 16px; font-size: .92rem; color: var(--fg); }
.more a:hover { border-color: var(--fg); }
.legal-foot { max-width: 1040px; margin-inline: auto; padding: 24px max(20px, env(safe-area-inset-right, 0px)) 40px max(20px, env(safe-area-inset-left, 0px)); border-top: 1px solid var(--line); }
.legal-foot a { color: inherit; }
@media (max-width: 600px) { .compare { grid-template-columns: 1fr; } }