.seo-guide { padding-bottom: 56px; }
.seo-breadcrumbs { margin: 0 0 20px; color: var(--color-muted, #626b78); font-size: .9rem; }
.seo-intro { max-width: 860px; margin: 30px 0 38px; }
.seo-intro h1 { margin: 12px 0 20px; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.12; }
.seo-lead { font-size: 1.15rem; line-height: 1.7; }
.seo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.seo-guide .contest-panel, .seo-content { line-height: 1.7; }
.seo-guide .contest-panel { margin-top: 0; margin-bottom: 24px; }
.seo-guide li + li { margin-top: 8px; }
.seo-content { margin-top: 32px; }
.seo-content h2 { line-height: 1.25; }
.seo-faq { padding: 16px 0; border-top: 1px solid #e2e5e9; }
.seo-faq summary { cursor: pointer; font-weight: 700; }
.seo-faq summary:focus-visible { outline: 3px solid #cca100; outline-offset: 4px; }
.seo-faq p { margin-bottom: 0; }
.seo-subjects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; padding-left: 22px; }
.seo-subjects li { padding-right: 8px; }
.seo-subjects span { display: block; font-size: .9rem; color: #626b78; }
.seo-topic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.seo-topic-card { min-width: 0; padding: 20px; border: 1px solid #e2e5e9; border-radius: 16px; background: #fffdf6; }
.seo-topic-card h3 { margin-top: 0; }
.seo-topic-card ul { padding-left: 20px; }
.seo-topic-card p { color: #626b78; font-size: .9rem; }
.seo-topic-card a { overflow-wrap: anywhere; }

.teacher-guide a:not(.button) {
    color: var(--section-deep);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.teacher-guide a:not(.button):hover { text-decoration-thickness: 2px; }
.teacher-guide a:focus-visible { outline: 3px solid var(--section-deep); outline-offset: 4px; }
.teacher-guide__grid { margin-bottom: clamp(24px, 4vw, 40px); }
.teacher-guide #for-class { margin: 0 0 16px; scroll-margin-top: 100px; }

.seo-guide .teacher-guide__card {
    --teacher-card-tint: var(--section-soft);
    --teacher-card-accent: var(--section-deep);
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    margin: 0;
    padding: clamp(20px, 3vw, 32px);
    background: linear-gradient(160deg, var(--teacher-card-tint), #fff 52%);
    color: #324b48;
    box-shadow: 0 10px 24px #163e340d;
}

.seo-guide .teacher-guide__card--contest {
    --teacher-card-tint: #fff2d9;
    --teacher-card-accent: #80511f;
    border-color: #e8d6b4;
}

.teacher-guide__card > :is(h2, h3, p, ul, ol) { margin: 0; }
.teacher-guide__card > :is(h2, h3) { color: #193e39; font-size: clamp(23px, 2.4vw, 30px); line-height: 1.2; }
.teacher-guide__card > :is(ul, ol) { padding-inline-start: 1.45em; }
.teacher-guide__card li::marker { color: var(--teacher-card-accent); font-weight: 750; }

.teacher-guide__label {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--teacher-card-accent);
    font-size: .78rem;
    font-weight: 750;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.teacher-guide__icon {
    flex: none;
    width: clamp(50px, 5vw, 62px);
    height: auto;
    aspect-ratio: 1;
    padding: 7px;
    border: 1px solid color-mix(in srgb, var(--teacher-card-accent) 25%, #fff);
    border-radius: 16px;
    background: linear-gradient(145deg, #fff, var(--teacher-card-tint));
    box-shadow: inset 0 1px #fff, 0 4px 10px #294b3912;
}

.teacher-guide__action {
    align-self: flex-start;
    justify-content: space-between;
    max-width: 100%;
    margin-top: auto;
    padding: 10px 16px;
    line-height: 1.35;
}

.teacher-guide__action > svg { flex: none; }

@media (max-width: 760px) {
    .seo-grid, .seo-subjects, .seo-topic-grid { grid-template-columns: 1fr; }
    .teacher-guide__action { width: 100%; }
    .seo-intro { margin-top: 20px; }
    .page-seo .online-hero { display: block; }
    .page-seo .online-trophy { display: none; }
    .page-seo .achievement-hero h1 { font-size: clamp(30px, 8vw, 48px); }
}