/* V7: readable content, consistent controls and responsive refinements. */
:root { --header-height: clamp(64px, 4.605vw, 88px); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
html { scroll-padding-top: calc(var(--header-height) + 16px); }
.site-header { height: var(--header-height); min-height: 0; }
.main-nav > a { display: inline-flex; align-items: center; min-height: 44px; }
.main-nav .button { min-height: 44px; }
.brand { min-height: 44px; }
.main-nav > a:not(.button):focus-visible { color: var(--wine); }
.button, .text-link, .video-channel, .footer-nav a,
.footer-bottom button, .social-links a, .hero-teacher { min-height: 44px; }
.text-link, .video-channel, .footer-nav a, .footer-bottom button, .hero-teacher { align-items: center; }
.footer-nav a, .footer-bottom button { display: inline-flex; }
.social-links a { min-width: 44px; }
.menu-toggle { width: 44px; height: 44px; }
.catalog-mockups .camp-pink { --camp-tone: #bb0966; }
.catalog-mockups .camp-pink .course-chip { background: linear-gradient(120deg, #c31372, #a9085c); }
.catalog-mockups .course-detail { min-height: 44px; font-weight: 650; }
.camp-arrow { min-width: 44px; min-height: 44px; }
.catalog-mockups .camp-card:focus-within { border-color: var(--camp-tone); }
.catalog-mockups .camp-card p { letter-spacing: -.025em; }
.product-card { display: block; min-width: 0; border-radius: 10px; }
.product-card:focus-visible .product-cover { transform: translateY(-4px); }
.product-meta { display: none; }
.product-format { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--green); }
.product-title { display: block; font-size: 19px; line-height: 1.35; letter-spacing: -.035em; font-weight: 800; }
.product-action { display: inline-flex; align-items: center; gap: 8px; color: var(--green); font-size: 13px; font-weight: 650; }
.product-action svg { width: 17px; height: 17px; }
.lesson-picture { position: relative; }
.note-open-hint { position: absolute; bottom: 16px; right: 16px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border: 1px solid #e0e4d8; border-radius: 999px; background: #fffdf9f5; box-shadow: 0 3px 12px #262d2614; color: #185d27; font-size: 13px; font-weight: 700; }
.note-open-hint svg { width: 17px; height: 17px; }
.content-image { isolation: isolate; }
.content-platform { position: absolute; left: 12px; top: 10px; z-index: 1; border-radius: 999px; padding: 5px 10px; color: #fff; background: #26201ed9; font-size: 11px; font-weight: 650; line-height: 1.4; }
.video-channel { font-size: clamp(12px, 1vw, 17px); }
.faq-list summary { min-height: 48px; gap: 16px; }
.faq-list summary > span { flex-shrink: 0; }
.faq-list details[open] { border-color: #b4c5ad; background: #f6f8f1; }
.faq-list details[open] summary { color: #235f29; font-weight: 700; }
.faq-list summary:focus-visible { outline-offset: -4px; border-radius: 10px; }
.community-note { background: #eee9dd; }
.community-note > img { object-fit: contain; padding: 16px 20px 56px; background: linear-gradient(120deg, #faf8ef, #e8e7d8); }
.community-question > img { object-position: center; }
.sample-badge { color: #51443e; background: #fffaf2f5; font-size: 11px; top: 8px; right: 9px; }
.community-messages { padding-top: 38px; }
.footer-brand p { margin-top: 2px; }
.footer-contact { min-height: 44px; }
.dialog-close, .legal-close, .note-dialog-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; flex-shrink: 0; border-radius: 50%; }
.dialog-close:hover, .legal-close:hover, .note-dialog-close:hover { background: #eaf0e4; }
.zoom-note { min-height: 44px; font-size: 13px; }
.note-scroll { overscroll-behavior: contain; }
.note-scroll:focus-visible { outline-offset: -4px; }
.course-dialog h2:focus, .legal-dialog h2:focus, .note-dialog-toolbar h2:focus,
main:focus, section[tabindex="-1"]:focus { outline: none; }
.course-dialog > .button { white-space: normal; text-align: center; }
.dialog-source { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; }

@media (min-width: 1000px) {
  .notes-section { padding-block: clamp(32px, 2.5vw, 48px); }
  .lesson-section { padding-bottom: clamp(28px, 2.4vw, 44px); }
  .about-section { padding-bottom: clamp(32px, 2.8vw, 52px); }
  .discover-section { padding-bottom: clamp(30px, 2.6vw, 48px); }
  .faq-section { padding-bottom: clamp(30px, 2.6vw, 48px); }
  .section-heading { flex-wrap: wrap; row-gap: 8px; }
  .discover-section h2 { white-space: normal; }
  .footer-nav { justify-content: center; }
  .footer-nav > a { padding-inline: .8vw; }
  .footer-contact { font-size: clamp(12px, 1.05vw, 19px); }
}
@media (min-width: 701px) and (max-width: 999px) {
  .hero h1 { font-size: clamp(32px, 4.6vw, 45px); }
  .hero .eyebrow { font-size: 9px; letter-spacing: .04em; gap: 7px; }
  .hero-copy { width: 46vw; }
  .hero-description { max-width: 95%; }
  .catalog-mockups .course-grid { grid-template-columns: 1fr; gap: 18px; }
  .catalog-mockups .camp-card { aspect-ratio: auto; min-height: 300px; padding: 26px 30px; border-radius: 26px; }
  .camp-background { width: 64%; left: auto; right: 0; object-fit: cover; object-position: right center; }
  .catalog-mockups .camp-card::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, #f4f8ef 32%, #f4f8ef00 70%); }
  .catalog-mockups .camp-rose::after { background: linear-gradient(90deg, #fcf1f5 32%, #fcf1f500 70%); }
  .catalog-mockups .camp-pink::after { background: linear-gradient(90deg, #fff0f6 32%, #fff0f600 70%); }
  .catalog-mockups .course-body { min-height: 246px; }
  .catalog-mockups .course-chip { font-size: 12px; padding: 6px 14px; }
  .catalog-mockups .camp-card h3 { font-size: 30px; margin-top: 16px; }
  .catalog-mockups .camp-card p { font-size: 15px; line-height: 1.55; margin-top: 12px; }
  .catalog-mockups .course-detail { font-size: 14px; bottom: 0; gap: 18px; }
  .camp-accent { display: none; }
  .camp-corner-icon { width: 44px; height: 44px; top: 26px; right: 24px; }
  .camp-arrow { width: 44px; height: 44px; }
  .notes-layout { display: block; }
  .notes-intro h2 { font-size: 44px; }
  .notes-intro h2 br { display: none; }
  .notes-intro > p { font-size: 16px; }
  .notes-intro .text-link { margin-top: 8px; font-size: 14px; }
  .product-grid { margin-top: 20px; gap: 24px; }
  .product-meta { display: grid; gap: 8px; padding: 16px 0 0; }
  .product-title { font-size: 18px; }
  .lesson-grid { grid-template-columns: 1fr; gap: 28px; }
  .lesson-picture { aspect-ratio: 1.89; }
  .lesson-copy h2 { font-size: 38px; }
  .lesson-copy h2 br { display: none; }
  .section-description { font-size: 16px; line-height: 1.5; }
  .learning-steps { gap: 16px; margin: 24px 0; }
  .learning-steps li { gap: 18px; }
  .learning-steps li > span { width: 44px; height: 44px; font-size: 18px; }
  .learning-steps h3 { font-size: 16px; }
  .learning-steps p { font-size: 14px; line-height: 1.5; }
  .lesson-buy { min-height: 48px; font-size: 15px; }
  .about-signature { white-space: normal; max-width: 70%; line-height: 1.2; }
  .about-role { max-width: 74%; }
  .content-card h3 { font-size: 14px; }
  .faq-list summary { font-size: 14px; }
  .community-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .community-card { height: auto; aspect-ratio: 1; }
  .community-messages { grid-column: 1 / -1; width: 100%; min-height: 330px; aspect-ratio: auto; }
  .message-stack { gap: 10px; }
  .bubble { font-size: 13px; padding: 8px 12px; }
  .avatar { width: 32px; height: 32px; }
  .community-heading h2 { font-size: 40px; }
}
@media (max-width: 900px) {
  :root { --header-height: 68px; }
  .menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 6px; border: 1px solid #dbe0d4; border-radius: 11px; padding: 11px; }
  .menu-toggle > span { display: block; height: 2px; width: 20px; background: #17361e; transition: transform .2s; }
  .menu-toggle[aria-expanded=true] > span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded=true] > span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .main-nav { display: none; position: absolute; top: 61px; left: var(--gutter); right: var(--gutter); padding: 14px; background: #fdfbf8; border: 1px solid #e0e7d9; border-radius: 16px; box-shadow: 0 16px 30px #13291817; font-size: 15px; }
  .main-nav.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav > a { padding: 14px 10px; }
  .main-nav .button { width: 100%; margin: 9px 0 0; padding: 13px; }
  .footer-nav { font-size: 13px; }
  .footer-bottom { font-size: 13px; }
}
@media (max-width: 700px) {
  .hero .eyebrow { font-size: clamp(8.5px, 2.5vw, 11px); letter-spacing: .04em; }
  .hero-description { font-size: 16px; }
  .hero-teacher { margin-block: 16px 20px; font-size: 13px; }
  .catalog-mockups { padding-bottom: 10px; }
  .catalog-mockups .camp-card { aspect-ratio: auto; min-height: 310px; padding: 22px; }
  .catalog-mockups .course-body { display: flex; flex-direction: column; align-items: flex-start; height: auto; min-height: 264px; }
  .catalog-mockups .camp-card p { font-size: 14px; line-height: 1.55; }
  .catalog-mockups .course-chip { font-size: 11px; }
  .catalog-mockups .course-detail { position: static; bottom: auto; margin-top: auto; font-size: 14px; }
  .camp-arrow { width: 44px; height: 44px; }
  .notes-section { padding-block: 36px 38px; }
  .notes-intro > p { font-size: 16px; }
  .notes-intro .text-link { margin-top: 8px; }
  .product-grid { grid-template-columns: 1fr; margin-top: 20px; gap: 0; }
  .product-card { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 22px; align-items: center; padding: 20px 0; border-radius: 0; border-top: 1px solid #e3e5da; }
  .product-card:last-child { padding-bottom: 0; }
  .product-meta { display: grid; gap: 9px; }
  .product-cover { aspect-ratio: .75; }
  .product-action { line-height: 1.4; }
  .lesson-section { padding-bottom: 38px; }
  .note-open-hint { right: 10px; bottom: 10px; font-size: 12px; min-height: 36px; padding: 6px 11px; }
  .learning-steps h3 { font-size: 16px; }
  .learning-steps p { font-size: 14px; }
  .about-section { padding-bottom: 38px; }
  .about-role { font-size: 15px; max-width: 66%; line-height: 1.5; }
  .about-experience { font-size: 14px; max-width: 67%; }
  .about-signature { max-width: 70%; }
  .about-notebook-photo { width: 36%; opacity: .8; }
  .discover-section { padding-bottom: 38px; }
  .video-channel { font-size: 12px; }
  .content-platform { font-size: 10px; padding: 4px 8px; }
  .faq-section { padding-bottom: 32px; }
  .faq-list summary { font-size: 14px; padding-block: 12px; }
  .faq-list details p { font-size: 14px; }
  .community-heading > .button { min-height: 44px; }
  .community-messages { min-height: 378px; aspect-ratio: auto; padding: 40px 14px 64px; }
  .bubble { font-size: 12px; }
  .sample-badge { font-size: 11px; }
  .footer-top { gap: 18px; }
  .footer-nav { gap: 0; }
  .footer-bottom { gap: 6px; padding-top: 18px; }
  .note-dialog-toolbar { flex-wrap: wrap; gap: 6px; }
  .note-dialog-toolbar h2 { font-size: 14px; line-height: 1.4; flex: 1 1 150px; }
  .note-dialog-toolbar > div { margin-left: auto; }
  .note-scroll { max-height: 67dvh; }
}
@media (max-width: 360px) {
  .brand > span { font-size: 20px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions > .button { flex: auto; min-height: 48px; font-size: 14px; }
  .hero h1 { font-size: 8.5vw; }
  .catalog-mockups .camp-card { min-height: 310px; padding: 19px; }
  .catalog-mockups .course-body { min-height: 270px; }
  .catalog-mockups .camp-card p { font-size: 13px; }
  .product-card { grid-template-columns: 92px minmax(0, 1fr); gap: 18px; }
  .product-title { font-size: 17px; }
  .product-action { font-size: 12px; gap: 4px; }
  .faq-section h2 { font-size: 32px; white-space: normal; }
  .footer-brand .brand > span { font-size: 23px; }
  .community-messages { min-height: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  .product-card:focus-visible .product-cover { transform: none; }
}

/* Footer refresh based on the approved footer mockup. */
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 0;
  padding: clamp(82px, 8vw, 126px) 0 clamp(72px, 8vw, 112px);
  color: #101a2b;
  background: #fffdfa;
}
.site-footer::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: -7%;
  right: -7%;
  bottom: -106px;
  height: 210px;
  border-radius: 50% 48% 0 0 / 46% 40% 0 0;
  background: linear-gradient(105deg, #f9e7ee 4%, #fff8f8 54%, #f8e5ed 100%);
  opacity: .78;
  transform: rotate(-1.2deg);
  pointer-events: none;
}
.footer-layout { position: relative; z-index: 1; }
.footer-wave { position: absolute; top: 0; left: 0; width: 100%; height: clamp(48px, 5vw, 74px); overflow: visible; pointer-events: none; }
.footer-wave path { fill: none; stroke: #e8b4ca; stroke-width: 3; vector-effect: non-scaling-stroke; }
.footer-art { position: absolute; z-index: 0; color: #ae1a69; pointer-events: none; }
.footer-molecule { left: clamp(-48px, -2.2vw, -24px); bottom: -94px; width: clamp(145px, 15vw, 230px); height: auto; opacity: .28; transform: rotate(-13deg); }
.footer-molecule path { fill: none; stroke: currentColor; stroke-width: 2.2; }
.footer-molecule circle { fill: #cc5791; stroke: #a61b65; stroke-width: 1.2; }
.footer-molecule circle:nth-of-type(2n) { fill: #477c58; stroke: #477c58; }
.footer-flask { right: clamp(-25px, -1vw, -8px); bottom: -110px; width: clamp(90px, 11vw, 158px); height: auto; color: #be367d; opacity: .28; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.footer-flask .flask-liquid { fill: #dc75a6; stroke: none; opacity: .5; }
.footer-brand-center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.footer-logo { display: inline-flex; align-items: center; gap: clamp(12px, 1.25vw, 20px); min-height: 56px; color: #0b1220; text-decoration: none; }
.footer-logo-mark { display: block; flex: 0 0 auto; width: clamp(43px, 5vw, 68px); height: clamp(47px, 5.3vw, 72px); }
.footer-logo-wordmark { font-size: clamp(31px, 4.1vw, 60px); font-weight: 850; line-height: 1; letter-spacing: -.055em; white-space: nowrap; }
.footer-logo-wordmark b { color: #8d0750; }
.footer-brand-center > p { margin: 5px 0 0; color: #586579; font-size: clamp(14px, 1.55vw, 21px); line-height: 1.4; }
.footer-brand-center > p span { text-decoration: underline; text-decoration-color: #e9a9c5; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.footer-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(34px, 4vw, 58px) 0 clamp(38px, 4.5vw, 66px); }
.footer-shortcut { position: relative; display: flex; min-width: 0; min-height: 128px; flex-direction: column; align-items: center; justify-content: flex-start; padding: 0 12px; color: inherit; text-align: center; text-decoration: none; }
.footer-shortcut + .footer-shortcut::before { content: ""; position: absolute; left: 0; top: 8px; width: 1px; height: 104px; background: #dedce0; }
.footer-shortcut-icon { display: grid; place-items: center; width: clamp(52px, 5.8vw, 72px); height: clamp(52px, 5.8vw, 72px); margin-bottom: 11px; border-radius: 50%; color: #8e0751; background: #fff0f6; transition: color .2s ease, background .2s ease, transform .2s ease; }
.footer-shortcut-icon svg { width: 53%; height: 53%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.footer-shortcut strong { font-size: clamp(14px, 1.35vw, 20px); font-weight: 800; line-height: 1.3; letter-spacing: -.025em; }
.footer-shortcut small { margin-top: 4px; color: #727b89; font-size: clamp(12px, 1.15vw, 16px); line-height: 1.4; }
.footer-shortcut:hover .footer-shortcut-icon { color: #fff; background: #8e0751; transform: translateY(-2px); }
.footer-promo { display: grid; grid-template-columns: minmax(240px, 1fr) auto minmax(250px, 295px); align-items: center; gap: clamp(20px, 3vw, 46px); max-width: 1280px; margin: 0 auto clamp(34px, 4.2vw, 60px); padding: clamp(22px, 2.7vw, 38px) clamp(24px, 4vw, 58px); border-radius: clamp(18px, 2.2vw, 30px); background: linear-gradient(110deg, #fff2f6 0%, #faeaf0 100%); }
.footer-promo-copy h2 { margin: 0; font-size: clamp(20px, 2.1vw, 31px); font-weight: 850; line-height: 1.17; letter-spacing: -.045em; }
.footer-promo-copy p { margin: 8px 0 0; color: #6a7587; font-size: clamp(13px, 1.3vw, 18px); line-height: 1.45; }
.footer-promo-socials { display: flex; align-items: center; gap: clamp(13px, 2vw, 28px); }
.footer-promo-socials a { position: relative; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 15px; color: #fff; text-decoration: none; transition: transform .2s ease; }
.footer-promo-socials a:hover { transform: translateY(-3px); }
.footer-promo-socials a + a::before { content: ""; position: absolute; left: calc(clamp(13px, 2vw, 28px) / -2); top: 5px; bottom: 5px; width: 1px; background: #d8c8ce; }
.footer-promo-socials a svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.footer-promo-socials .footer-instagram, .footer-social-icon.footer-instagram { background: linear-gradient(140deg, #ffd04f 4%, #f33769 43%, #c522a5 72%, #7142d6 100%); }
.footer-promo-socials .footer-youtube, .footer-social-icon.footer-youtube { color: #fff; background: #f01920; }
.footer-promo-socials .footer-youtube svg, .footer-social-icon.footer-youtube svg { fill: currentColor; stroke: none; }
.footer-promo-socials .footer-youtube svg { width: 34px; height: 34px; }
.footer-promo-contact { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-width: 0; min-height: 62px; padding: 12px 20px; border-radius: 999px; color: #fff; background: linear-gradient(110deg, #8a064d, #a9005c); box-shadow: 0 8px 18px #8d07501c; font-size: clamp(14px, 1.35vw, 19px); font-weight: 750; text-align: center; text-decoration: none; white-space: nowrap; transition: transform .2s ease, box-shadow .2s ease; }
.footer-promo-contact:hover { transform: translateY(-2px); box-shadow: 0 12px 22px #8d07502c; }
.footer-promo-contact > svg:first-child { width: 25px; height: 25px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; }
.footer-promo-arrow { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; }
.footer-columns { display: grid; grid-template-columns: 1fr 1fr 1.18fr; padding: clamp(25px, 3vw, 42px) 0 clamp(24px, 2.8vw, 38px); border-top: 1px solid #e5c2d0; border-bottom: 1px solid #e5e2e2; }
.footer-column { min-width: 0; padding: 0 clamp(21px, 3vw, 44px); }
.footer-column:first-child { padding-left: 0; }
.footer-column + .footer-column { border-left: 1px solid #e1dfe2; }
.footer-column:last-child { padding-right: 0; }
.footer-column h2 { position: relative; margin: 0 0 16px; padding-bottom: 12px; font-size: clamp(17px, 1.6vw, 23px); font-weight: 800; line-height: 1.25; letter-spacing: -.035em; }
.footer-column h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 42px; height: 3px; border-radius: 9px; background: #9a0758; }
.footer-link-list, .footer-social-list { margin: 0; padding: 0; list-style: none; }
.footer-link-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; color: #697588; font-size: clamp(14px, 1.3vw, 18px); text-decoration: none; transition: color .2s ease; }
.footer-link-list a:hover, .footer-social-list a:hover { color: #8e0751; }
.footer-link-list svg, .footer-row-arrow { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; }
.footer-link-list svg { transform: none; }
.footer-social-list li + li { margin-top: 7px; }
.footer-social-list a { display: grid; grid-template-columns: 48px minmax(0, 1fr) 18px; align-items: center; gap: 13px; min-height: 58px; color: inherit; text-decoration: none; }
.footer-social-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: #fff; }
.footer-social-icon svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 2; }
.footer-social-list strong, .footer-social-list small { display: block; }
.footer-social-list strong { font-size: clamp(14px, 1.25vw, 17px); line-height: 1.35; }
.footer-social-list small { margin-top: 2px; color: #737e8c; font-size: clamp(12px, 1.15vw, 15px); line-height: 1.35; }
.footer-social-list .footer-row-arrow { color: #7b8491; transform: none; }
.footer-contact-link { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 16px; border: 2px solid #4c9071; border-radius: 15px; color: #287653; text-decoration: none; transition: color .2s ease, background .2s ease; }
.footer-contact-link:hover { color: #fff; background: #287653; }
.footer-contact-link > svg:first-child { width: 27px; height: 27px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; }
.footer-contact-link strong { flex: 1; font-size: clamp(14px, 1.25vw, 18px); line-height: 1.3; }
.footer-contact-link .footer-row-arrow { transform: none; }
.footer-contact-column > p { margin: 16px 0 0; color: #737e8c; font-size: clamp(13px, 1.17vw, 16px); line-height: 1.55; }
.footer-legal { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 20px; color: #788292; font-size: clamp(12px, 1.1vw, 16px); }
.footer-legal nav { display: flex; align-items: center; justify-content: flex-end; gap: clamp(9px, 1.3vw, 19px); }
.footer-legal button { min-height: 40px; padding: 5px 0; border: 0; color: inherit; background: transparent; font: inherit; cursor: pointer; }
.footer-legal button:hover { color: #8e0751; }
.site-footer a:focus-visible, .site-footer button:focus-visible { outline: 3px solid #8e0751; outline-offset: 4px; border-radius: 5px; }

@media (max-width: 900px) {
  .footer-promo { grid-template-columns: minmax(205px, 1fr) auto minmax(205px, 250px); gap: 20px; padding-inline: 26px; }
  .footer-promo-contact { gap: 9px; padding-inline: 14px; }
  .footer-column { padding-inline: 22px; }
  .footer-social-list a { grid-template-columns: 42px minmax(0, 1fr) 16px; gap: 9px; }
  .footer-social-icon { width: 40px; height: 40px; border-radius: 12px; }
  .footer-social-icon svg { width: 27px; height: 27px; }
}
@media (max-width: 700px) {
  .site-footer { padding-top: 76px; padding-bottom: 82px; }
  .footer-brand-center { margin-bottom: 0; }
  .footer-logo-mark { width: 41px; height: 47px; }
  .footer-logo-wordmark { font-size: clamp(26px, 7.2vw, 36px); }
  .footer-brand-center > p { font-size: 14px; }
  .footer-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 31px 0 34px; }
  .footer-shortcut { min-height: 118px; padding: 7px 8px 14px; }
  .footer-shortcut + .footer-shortcut::before { display: none; }
  .footer-shortcut:nth-child(odd) { border-right: 1px solid #dedce0; }
  .footer-shortcut:nth-child(-n + 2) { border-bottom: 1px solid #dedce0; }
  .footer-shortcut:nth-child(n + 3) { padding-top: 16px; }
  .footer-shortcut-icon { width: 49px; height: 49px; margin-bottom: 8px; }
  .footer-shortcut strong { font-size: 14px; }
  .footer-shortcut small { font-size: 12px; }
  .footer-promo { grid-template-columns: auto minmax(0, 1fr); gap: 17px 20px; margin-bottom: 30px; padding: 23px 22px; border-radius: 22px; }
  .footer-promo-copy { grid-column: 1 / -1; }
  .footer-promo-copy h2 { font-size: 21px; }
  .footer-promo-copy p { font-size: 13px; }
  .footer-promo-socials { gap: 10px; }
  .footer-promo-socials a { width: 45px; height: 45px; }
  .footer-promo-socials a + a::before { left: -5px; }
  .footer-promo-socials a svg { width: 24px; height: 24px; }
  .footer-promo-socials .footer-youtube svg { width: 30px; height: 30px; }
  .footer-promo-contact { min-height: 48px; gap: 8px; padding: 9px 12px; font-size: 13px; }
  .footer-promo-contact > svg:first-child { width: 20px; height: 20px; }
  .footer-promo-arrow { width: 17px; height: 17px; }
  .footer-columns { grid-template-columns: 1fr; padding: 0; }
  .footer-column, .footer-column:first-child, .footer-column:last-child { padding: 23px 0; }
  .footer-column + .footer-column { border-top: 1px solid #e8e3e5; border-left: 0; }
  .footer-column h2 { margin-bottom: 12px; font-size: 19px; }
  .footer-link-list a { min-height: 42px; font-size: 15px; }
  .footer-social-list li + li { margin-top: 5px; }
  .footer-social-list a { grid-template-columns: 48px minmax(0, 1fr) 18px; gap: 12px; min-height: 58px; }
  .footer-social-icon { width: 44px; height: 44px; }
  .footer-contact-link { min-height: 55px; }
  .footer-contact-column > p { font-size: 14px; }
  .footer-legal { align-items: flex-start; flex-direction: column; gap: 9px; padding-top: 16px; font-size: 12px; }
  .footer-legal nav { justify-content: flex-start; flex-wrap: wrap; gap: 2px 10px; }
  .footer-legal button { min-height: 40px; font-size: 12px; }
  .footer-molecule { left: -72px; bottom: -42px; width: 150px; opacity: .18; }
  .footer-flask { right: -30px; bottom: -44px; width: 86px; opacity: .18; }
}
@media (max-width: 380px) {
  .footer-layout { width: calc(100% - 32px); }
  .footer-logo { gap: 8px; }
  .footer-logo-mark { width: 35px; height: 42px; }
  .footer-logo-wordmark { font-size: 25px; }
  .footer-shortcut { padding-inline: 4px; }
  .footer-shortcut strong { font-size: 13px; }
  .footer-shortcut small { max-width: 145px; font-size: 11px; }
  .footer-promo { gap: 14px 11px; padding: 21px 17px; }
  .footer-promo-contact { gap: 6px; padding-inline: 8px; font-size: 12px; }
  .footer-promo-socials { gap: 7px; }
  .footer-promo-socials a { width: 41px; height: 41px; }
  .footer-promo-contact > svg:first-child { width: 18px; height: 18px; }
  .footer-promo-arrow { width: 15px; height: 15px; }
}