/* SEO pages */
.seo-hero {
    padding-bottom: var(--space-xl);
}

.seo-hero h1 {
    font-size: 2.75rem;
}

/* --- Programmatic SEO landing pages (steps, FAQ, related) --- */
.seo-steps {
    list-style: none;
    counter-reset: seo-step;
    padding: 0;
    margin: var(--space-md) 0 var(--space-lg);
    display: grid;
    gap: var(--space-sm);
}
.seo-steps li {
    counter-increment: seo-step;
    position: relative;
    padding: var(--space-md) var(--space-md) var(--space-md) calc(var(--space-lg) + 1.4rem);
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-secondary);
    line-height: 1.55;
}
.seo-steps li::before {
    content: counter(seo-step);
    position: absolute;
    left: var(--space-md);
    top: var(--space-md);
    width: 1.6rem;
    height: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--primary);
    color: var(--text-inverse);
    font-weight: 700;
    font-size: 0.85rem;
}
.seo-steps li strong { color: var(--text); }

.seo-faq {
    display: grid;
    gap: var(--space-sm);
    margin: var(--space-md) 0 var(--space-lg);
}
.faq-item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    overflow: hidden;
}
.faq-item summary {
    cursor: pointer;
    padding: var(--space-md);
    font-weight: 600;
    color: var(--text);
    list-style: none;
    position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+";
    position: absolute;
    right: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.3rem;
    color: var(--primary);
    line-height: 1;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p {
    padding: 0 var(--space-md) var(--space-md);
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

.seo-related {
    list-style: none;
    padding: 0;
    margin: var(--space-md) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}
.seo-related a {
    display: inline-block;
    padding: 0.5rem 0.9rem;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.92rem;
    transition: var(--transition-slow);
}
.seo-related a:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* --- Target-size + conversion widget controls --- */
.target-size-wrap { margin-bottom: var(--space-md); }
.target-size-wrap > label {
    display: block;
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--space-sm);
}
.target-input-row {
    display: flex;
    gap: var(--space-sm);
    align-items: stretch;
    max-width: 320px;
}
.target-input-row input[type="number"] {
    flex: 1;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    background: var(--bg);
}
.target-input-row input[type="number"]:focus {
    outline: none;
    border-color: var(--border-focus);
}
.target-input-row select {
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-soft);
    color: var(--text);
    font-weight: 600;
    cursor: pointer;
}
.convert-note {
    margin: 0 0 var(--space-md);
    padding: var(--space-md);
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-secondary);
}
.convert-note strong { color: var(--primary); }

/* --- Resize controls --- */
.resize-wrap { margin-bottom: var(--space-md); }
.resize-wrap > label {
    display: block;
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--space-sm);
}
.resize-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    max-width: 360px;
}
.resize-row input[type="number"] {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    background: var(--bg);
}
.resize-row input[type="number"]:focus {
    outline: none;
    border-color: var(--border-focus);
}
.resize-x { color: var(--text-muted); font-weight: 700; }
.resize-lock {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: var(--space-sm);
    color: var(--text-secondary);
    font-size: 0.95rem;
    cursor: pointer;
}
.resize-lock input { cursor: pointer; }