/* Public generator and feature pages (SEO). Built from the sales page components (marketing.css) and the editor
   components (application.css); this file only adds the article layout and the editor grid outside the app shell. */

.seo-hero { display: flex; flex-direction: column; gap: var(--space-20); padding-top: var(--space-32); padding-bottom: var(--space-24); }
.seo-h1 { font-size: var(--text-fluid-lg-34); max-width: 960px; text-wrap: balance; }
.seo-hero .m-lead { max-width: 760px; }

.seo-crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-4) 0; list-style: none; margin: 0; padding: 0; font-size: var(--text-md); color: var(--muted); }
.seo-crumbs li + li::before { content: "/"; margin: 0 var(--space-8); color: var(--edge); }
.seo-crumbs a { color: var(--muted); text-decoration: none; }
.seo-crumbs a:hover { color: var(--accent-text); text-decoration: underline; }
.seo-crumbs [aria-current] { color: var(--text); font-weight: var(--weight-semibold); }

/* The editor outside the signed-in shell: same two columns as `.content main`. */
.seo-tool { padding-bottom: var(--space-24); }
.seo-tool-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: var(--space-24); align-items: start; }
.seo-tool-grid > div { display: grid; gap: var(--space-24); min-width: 0; }
@media (max-width: 960px) { .seo-tool-grid { grid-template-columns: 1fr; } }
/* The public header is sticky too, so the preview stops below it instead of sliding under it. */
.seo-tool-grid .preview { top: 100px; }
/* A slider is shorter than a select; at full field height its label lines up with the one beside it. */
.seo-tool-grid .grid input[type='range'] { min-height: 44px; }
.seo-tool-grid .grid + .fold { margin-top: var(--space-24); }
/* Size on its own row, the four formats in equal columns below, instead of SVG wrapping alone. */
.seo-tool-grid .downloads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.seo-tool-grid .downloads label { grid-column: 1 / -1; }
.seo-tool-grid .downloads button { padding: 0 var(--space-8); }
.seo-save p { margin: 0; color: var(--muted); }
.seo-save a { justify-self: start; }

.seo-article { display: flex; flex-direction: column; gap: var(--space-72); padding-top: var(--space-56); padding-bottom: var(--space-24); max-width: 920px; }
.seo-block { display: flex; flex-direction: column; gap: var(--space-16); }
.seo-block h2 { font-size: var(--text-fluid-sm); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
.seo-block > p { margin: 0; font-size: var(--text-xl); line-height: 1.65; color: var(--text); max-width: 72ch; }

.seo-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-16); counter-reset: none; }
.seo-steps .m-card { padding: var(--space-24) var(--space-28); display: grid; gap: var(--space-6); }
.seo-steps .m-card h3, .seo-cards .m-card h3 { font-size: var(--text-3xl); }
.seo-steps .m-num { font: var(--weight-bold) var(--text-sm) var(--font-mono); color: var(--accent-text); }
.seo-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-16); }
.seo-cards .m-card { padding: var(--space-24); display: grid; gap: var(--space-8); align-content: start; }

.seo-tips { margin: 0; display: grid; gap: var(--space-14); }
.seo-tips > div { padding: var(--space-16) var(--space-24); border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 var(--radius-2xl) var(--radius-2xl) 0; border-top: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.seo-tips dt { font-weight: var(--weight-bold); margin-bottom: var(--space-4); }
.seo-tips dd { margin: 0; color: var(--muted); }

.seo-faq { border-top: 1px solid var(--line); }
.seo-faq details { border-bottom: 1px solid var(--line); }
.seo-faq summary { min-height: 64px; display: flex; align-items: center; cursor: pointer; font: var(--weight-semibold) var(--text-2xl) var(--font-body); list-style: none; padding: var(--space-8) 0; }
.seo-faq summary::-webkit-details-marker { display: none; }
.seo-faq summary::after { content: "+"; margin-left: auto; padding-left: var(--space-16); font-size: var(--text-4xl); color: var(--accent-text); }
.seo-faq details[open] summary::after { content: "−"; }
.seo-faq p { margin: 0; padding: 0 var(--space-40) var(--space-24) 0; color: var(--muted); font-size: var(--text-xl); line-height: 1.6; }

.seo-related { padding-top: var(--space-64); padding-bottom: var(--space-24); }
.seo-related h2 { font-size: var(--text-fluid-xs); margin-bottom: var(--space-20); }
.seo-related ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-14); }
.seo-related a.m-card { display: grid; gap: var(--space-6); padding: var(--space-16) var(--space-20); height: 100%; text-decoration: none; color: var(--text); }
.seo-related a.m-card span { color: var(--muted); font-size: var(--text-base); }

.seo-cta { margin-top: var(--space-72); }

/* Extras used on the sales page */
.seo-prose { margin: 0; font-size: var(--text-xl); line-height: 1.65; max-width: 72ch; }
.seo-more { margin-top: auto; font-weight: var(--weight-bold); color: var(--accent-text); text-decoration: none; }
.seo-more:hover { text-decoration: underline; }
.m-ink .seo-more { color: var(--ink-accent); }
.m-section .seo-related { padding-top: 0; padding-bottom: 0; }
.m-section .seo-related h2 { margin-top: 0; }

/* Language links of the public pages: same look as the cookie buttons in the app (application.css). */
.locales a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 var(--space-12); border-radius: var(--radius-lg); color: var(--muted); font-weight: var(--weight-medium); text-decoration: none; }
.locales a:hover { color: var(--text); }

/* Type icons (qr_type_icon): a soft accent tile in the cards and above the page title. */
.type-badge, .seo-related a.m-card span.type-badge { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-xl); background: var(--accent-soft); color: var(--accent-text); }
.type-badge-lg { width: 56px; height: 56px; border-radius: var(--radius-3xl); align-self: flex-start; }
.seo-related a.m-card { align-content: start; }
.seo-related a.m-card .type-badge { justify-self: start; margin-bottom: var(--space-4); }
/* Phones: the icon beside the name and blurb, so 23 types do not stack into a column of tall cards. */
@media (max-width: 560px) {
  .seo-related a.m-card:has(.type-badge) { grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--space-14); row-gap: var(--space-2); padding: var(--space-14) var(--space-16); }
  .seo-related a.m-card .type-badge { grid-row: span 2; margin-bottom: 0; }
  .seo-related ul { gap: var(--space-10); }
}