:root {
  color-scheme: light;
  --surface: #f4fafa;
  --ink: #142426;
  --muted: #52686b;
  --line: #c3dadb;
  --soft: #e0f1f1;
  --teal: #62c4c8;
  --accent-text: #176c71;
  --crab-color: #98d2d3;
  --on-accent: #142426;
  --backdrop: #142426cc;
  --gutter: clamp(20px, 4vw, 72px);
  --radius: 24px;
  --space-section: clamp(72px, 8vw, 128px);
  /* Menu jumps: a section lands --nav-offset below the top of the viewport
     (sticky header + gap). --fit-height is what remains under the section
     heading, so the large visuals of a section never exceed one screen. */
  --nav-offset: 110px;
  --section-gap: clamp(36px, 5vw, 72px);
  --section-head: calc(25px + 1.08 * clamp(40px, 4.4vw, 64px));
  --fit-height: calc(100svh - var(--nav-offset) - var(--section-head) - var(--section-gap) - 16px);
}
html[data-theme=dark] {
  color-scheme: dark;
  --surface: #12272b;
  --ink: #edf8f8;
  --muted: #a7c4c5;
  --line: #3a5a5d;
  --soft: #1e3a3d;
  --teal: #73ced0;
  --accent-text: #a7e4e1;
  --crab-color: #599fa1;
  --on-accent: #12272b;
  --backdrop: #081315cc;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-offset); }
body { isolation: isolate; margin: 0; background: var(--surface); color: var(--ink); font: 17px/1.65 Roboto, Arial, sans-serif; font-size-adjust: .528; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; cursor: pointer; }
button, figure, a { touch-action: manipulation; }
img { display: block; max-width: 100%; }
/* Critical geometry of the deferred components: reserving their size here
   keeps CLS at 0 until styles/components/product-jar.css arrives. */
.product-jar { min-width: 0; margin: 0; }
.formula-content .product-jar { max-width: 1100px; margin-inline: auto; }
/* Flavour picker and ingredient map share the left column, centred against
   the jar. The jar column is capped by the screen height minus the controls
   row, so the whole block fits under the section heading after a menu jump. */
.product-jar__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, min(60%, var(--fit-height) - 68px)); grid-template-rows: 1fr auto; grid-template-areas: "aside stage" "aside controls"; align-items: center; gap: 24px clamp(24px, 4vw, 64px); }
.product-jar__aside { grid-area: aside; display: grid; align-content: center; gap: 32px; min-width: 0; }
.product-jar__visual { display: contents; }
/* Space for the controls and the flavour picker is reserved before the 3D
   model is ready, so their appearance does not shift the section. */
.product-jar__visual figcaption { grid-area: controls; min-width: 0; min-height: 44px; }
.product-jar:not(.is-ready) .product-jar__flavors { visibility: hidden; }
/* From 1024px the flavour buttons stay in one row (see product-jar.css). The
   left column is at least as wide as that row (auto minimum), and the jar
   column gives way by a few pixels when both do not fit. Narrower two-column
   screens let the buttons wrap rather than shrink the jar. */
@media (min-width: 1024px) {
  .product-jar__layout { grid-template-columns: minmax(auto, 1fr) minmax(0, min(60%, var(--fit-height) - 68px)); }
  .product-jar__aside { min-width: auto; }
}
/* All ingredient descriptions share one grid cell, so the map always keeps the
   height of the longest of them: opening a description, switching to another
   one and closing it move nothing around them. Their metrics stay here with
   the rest of the reserved geometry; product-jar.css only colours them. */
.ingredient-map { display: grid; gap: 12px; min-width: 0; }
.ingredient-map__list { display: grid; gap: 12px; min-width: 0; }
.ingredient-map__panels { display: grid; min-width: 0; }
.ingredient-panel { box-sizing: border-box; grid-area: 1 / 1; margin: 0; padding: 16px 20px; border: 1px solid transparent; border-radius: var(--radius); font-size: 15px; line-height: 1.55; visibility: hidden; }
.ingredient-panel.is-active { visibility: visible; }
.product-jar__stage { grid-area: stage; position: relative; width: 100%; aspect-ratio: 1 / 1; }
.product-jar__fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 700px) {
  .product-jar__layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "flavors" "stage" "controls" "ingredients"; gap: 40px; }
  .product-jar__aside { display: contents; }
  .product-jar__flavors { grid-area: flavors; }
  .ingredient-map { grid-area: ingredients; }
  .product-jar__visual figcaption { min-height: 68px; padding-top: 24px; }
}
/* Decorative canvas stays behind content and never intercepts interaction. */
.background-crab { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: .62; }
html[data-theme=dark] .background-crab { opacity: .2; }
@media (max-width: 850px), (max-width: 1200px) and (max-height: 600px) {
  .background-crab { display: none; }
}
:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 5px; }
.shell { width: min(1440px, calc(100% - var(--gutter) * 2)); margin-inline: auto; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2 { font-weight: 500; letter-spacing: -.06em; text-wrap: balance; }
h2 { font-size: clamp(40px, 5.2vw, 76px); line-height: 1.08; }
h1 i, h2 i { font-style: normal; color: var(--accent-text); }
.icon, .footer-icon { display: inline-block; flex-shrink: 0; width: 24px; height: 24px; background: currentColor; mask: var(--icon) center / contain no-repeat; }
.icon-arrow { --icon: url('../assets/icons/arrow-right.svg'); }
.icon-external { --icon: url('../assets/icons/arrow-up-right.svg'); }
.icon-close { --icon: url('../assets/icons/xmark.svg'); }
.icon-zoom { --icon: url('../assets/icons/magnifier-plus.svg'); }
.icon-rotate-left { --icon: url('../assets/icons/rotate-left.svg'); }
.benefit-shield { --icon: url('../assets/icons/shield-check.svg'); }
.benefit-fresh { --icon: url('../assets/icons/sparkles.svg'); }
.benefit-tooth { --icon: url('../assets/icons/benefit-tooth.svg'); }
.benefit-heart { --icon: url('../assets/icons/heart-pulse.svg'); }
.site-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 88px; padding-inline: max(var(--gutter), calc((100% - 1440px) / 2)); border-bottom: 1px solid var(--line); background: var(--surface); }
.brand { font-size: 36px; font-weight: 900; letter-spacing: -.055em; line-height: 1; }
.brand span { color: var(--teal); }
.site-nav { display: flex; align-items: center; gap: clamp(4px, .7vw, 12px); font-size: 13px; font-weight: 500; }
.site-nav a { position: relative; padding: 12px; border-radius: 100px; transition: color .2s, background .2s; }
.site-nav a:hover, .site-nav a.is-current { background: var(--soft); }
.site-nav a.is-current::after { content: ''; position: absolute; bottom: 6px; left: calc(50% - 2px); width: 4px; height: 4px; border-radius: 50%; background: var(--accent-text); }
.site-nav a:hover, .site-nav a.is-current, .company-link:hover { color: var(--accent-text); }
.header-actions { display: flex; align-items: center; gap: 16px; }
.header-phone { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; white-space: nowrap; }
.theme-toggle, .menu-toggle, .back-to-top, .carousel-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); }
.theme-toggle::before, .menu-toggle::before, .back-to-top::before, .carousel-button::before { content: ''; width: 20px; height: 20px; background: currentColor; mask: var(--icon) center / contain no-repeat; }
.theme-toggle { --icon: url('../assets/icons/moon.svg'); }
html[data-theme=dark] .theme-toggle { --icon: url('../assets/icons/sun.svg'); }
.menu-toggle { display: none; --icon: url('../assets/icons/menu.svg'); }
.menu-toggle[aria-expanded=true] { --icon: url('../assets/icons/xmark.svg'); }
.hero { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 4vw, 64px); align-items: center; padding-block: clamp(36px, 4vw, 64px) var(--space-section); }
.hero-copy { padding-block: 20px; min-width: 0; }
.eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .13em; font-weight: 600; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 100px; margin-bottom: 32px; font-size: 10px; letter-spacing: .12em; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
/* 6.2vw keeps "замена жвачке!" on one line in the half-width hero column. */
h1 { font-size: clamp(52px, 6.2vw, 96px); line-height: 1.02; }
h1 i { display: inline-block; font-weight: 400; }
.hero-tagline { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.45; letter-spacing: -.025em; margin-top: 32px; max-width: 400px; }
.hero-lead { font-size: 15px; color: var(--muted); max-width: 440px; margin-top: 20px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 32px; padding: 8px 8px 8px 24px; min-height: 60px; border-radius: 100px; font-size: 15px; font-weight: 500; transition: background .2s, color .2s; }
.button-primary { background: var(--ink); color: var(--surface); }
.button-primary .icon { width: 42px; height: 42px; padding: 11px; border-radius: 50%; background: var(--surface); color: var(--ink); mask: none; }
.button-primary .icon::before { content: ''; display: block; width: 20px; height: 20px; background: currentColor; mask: var(--icon) center / contain no-repeat; }
.button-primary:hover { background: var(--teal); color: var(--on-accent); }
.company-link { font-size: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 100px; }
.company-link .icon { width: 18px; height: 18px; }
.hero-image { min-width: 0; }
.carousel { position: relative; isolation: isolate; aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden; touch-action: pan-y pinch-zoom; }
.carousel-track { position: relative; width: 100%; height: 100%; }
.carousel-slide { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.carousel-slide.is-active { opacity: 1; visibility: visible; }
.carousel-slide picture, .video-cover picture { display: block; width: 100%; height: 100%; }
.carousel-slide img { display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: contain; border-radius: inherit; }
.carousel-button { position: absolute; bottom: 20px; z-index: 2; opacity: 0; transition: opacity .2s; --icon: url('../assets/icons/arrow-up.svg'); }
.carousel-prev { left: 20px; }
.carousel-next { right: 20px; }
.carousel-prev::before { transform: rotate(-90deg); }
.carousel-next::before { transform: rotate(90deg); }
.carousel:hover .carousel-button, .carousel:focus-within .carousel-button { opacity: 1; }
.carousel-dots { position: absolute; bottom: 18px; left: 76px; right: 76px; display: flex; justify-content: stretch; gap: 4px; }
.carousel-dots button { flex: 1 1 0; min-width: 0; border: 0; background: transparent; padding: 0; height: 48px; display: grid; place-items: center; }
.carousel-dots button::before { content: ''; width: 14px; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--surface) 60%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); }
.carousel-dots button.is-active::before { background: var(--ink); border-color: color-mix(in srgb, var(--surface) 80%, transparent); }
.carousel-dots button:disabled { cursor: default; }
.section, .formula-section { padding-block: 0 var(--space-section); }
.section-top { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding-top: 24px; margin-bottom: var(--section-gap); }
/* As a section heading comes up to the sticky header, its top rule fades out
   over the last 600px, so the header border and the section rule never show as
   a double line (e.g. right after a menu jump, which lands the heading at
   --nav-offset). Scroll-driven, no JavaScript; browsers without support keep
   the rule. */
@supports (animation-timeline: view()) {
  .section-top {
    animation: section-rule-fade linear both;
    animation-timeline: view(block calc(var(--nav-offset) + 10px) 0px);
    animation-range: contain calc(100% - 500px) contain 100%;
  }
}
@keyframes section-rule-fade { to { border-top-color: transparent; } }
.section-top h2 { font-size: clamp(40px, 4.4vw, 64px); }
.section-index { padding: 5px 11px; border: 1px solid var(--line); border-radius: 100px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
#about .about-details__intro > div { max-width: 620px; }
.big-copy { font-size: 20px; line-height: 1.6; }
.muted { color: var(--muted); font-size: 15px; margin-top: 20px; }
/* The square video is capped by the screen height; the text column takes
   the freed width and gets shorter, so the section fits one screen. */
.about-details { display: grid; grid-template-columns: minmax(0, min(46%, var(--fit-height))) minmax(0, 1fr); gap: clamp(40px, 5vw, 96px); align-items: center; }
.about-details__aside { min-width: 0; display: grid; gap: clamp(40px, 5vw, 72px); align-content: start; }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 36px; }
.feature-grid article { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; align-content: start; gap: 16px; }
.feature-grid h3 { min-height: 28px; display: flex; align-items: center; font-weight: 500; font-size: 17px; line-height: 1.6; }
.feature-grid article p { grid-column: 1 / -1; color: var(--muted); font-size: 15px; line-height: 1.65; margin-top: 4px; }
.feature-grid .icon { color: var(--accent-text); width: 28px; height: 28px; }
.diploma-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.diploma-grid figure { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; cursor: zoom-in; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 2.5vw, 36px); transition: border-color .2s; }
.diploma-grid figure:hover { border-color: var(--accent-text); }
.diploma-grid img { width: auto; height: auto; max-height: 240px; max-width: 160px; border-radius: 4px; }
.diploma-grid figcaption { font-size: 16px; line-height: 1.6; }
.diploma-grid figure:hover figcaption { color: var(--accent-text); }
.document-zoom { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--accent-text); font-size: 14px; font-weight: 500; }
.document-zoom .icon { width: 18px; height: 18px; }
.buy-section { padding-bottom: var(--space-section); }
.buy-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8%; align-items: start; }
.buy-lead { max-width: 680px; color: var(--muted); font-size: 20px; }
.marketplaces { display: grid; grid-template-columns: 1fr; gap: 0; }
.marketplace-coming { display: flex; align-items: center; gap: 20px; color: var(--ink); cursor: default; min-height: 96px; border-bottom: 1px solid var(--line); font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -.035em; }
.marketplace-link { cursor: pointer; transition: color .2s, border-color .2s; }
.marketplace-link:hover, .marketplace-link:focus-visible { color: var(--accent-text); border-color: var(--accent-text); }
.marketplace-coming:first-child { padding-top: 0; }
.marketplace-coming > span { width: 44px; height: 44px; flex-shrink: 0; background: center / contain no-repeat; opacity: 1; }
.marketplace-coming:nth-child(1) > span { background-image: url('../assets/icons/wildberries-sign-logo.svg'); }
.marketplace-coming:nth-child(2) > span { background-image: url('../assets/icons/ozon-icon-logo.svg'); }
.marketplace-coming:nth-child(3) > span { background-image: url('../assets/icons/yandex-market-sign-logo.svg'); }
.marketplace-coming small { margin-left: auto; color: var(--accent-text); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.site-footer { width: 100%; background: var(--soft); display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 72px max(var(--gutter), calc((100% - 1440px) / 2)); }
.site-footer .brand { display: inline-block; margin-bottom: 20px; font-size: clamp(64px, 8vw, 128px); line-height: .9; }
.site-footer p { font-size: 14px; color: var(--muted); }
/* Contact lines never break; when the two groups do not fit side by side,
   the address group moves below the phone and email. */
.footer-contacts { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px 36px; padding-top: 8px; }
.footer-label { font-size: 11px !important; letter-spacing: .12em; margin-bottom: 20px; }
.footer-contact { display: flex; align-items: center; gap: 12px; font-size: 15px; margin-bottom: 12px; white-space: nowrap; }
.footer-address { align-items: flex-start; }
.footer-icon { width: 18px; height: 18px; margin-top: 2px; }
.footer-icon--phone { --icon: url('../assets/icons/footer-phone.svg'); }
.footer-icon--email { --icon: url('../assets/icons/footer-email.svg'); }
.footer-icon--address { --icon: url('../assets/icons/footer-address.svg'); }
.video-frame { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius); background: var(--soft); }
.video-cover { position: absolute; inset: 0; z-index: 1; padding: 0; border: 0; width: 100%; background: var(--soft); color: var(--surface); cursor: pointer; }
.video-cover[hidden] { display: none; }
.video-cover img { width: 100%; height: 100%; object-fit: contain; }
.video-launch { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; white-space: nowrap; padding: 14px 22px; border-radius: 99px; background: var(--ink); font-size: 14px; font-weight: 500; }
.video-cover:hover .video-launch { background: var(--accent-text); }
.video-cover:focus-visible { outline-offset: -5px; }
.icon-play { --icon: url('../assets/icons/video-play.svg'); width: 24px; height: 24px; }
.mux-video { display: block; width: 100%; height: 100%; border: 0; }
.image-modal { max-width: 95vw; max-height: 94dvh; padding: 48px 16px 16px; border: 0; border-radius: 16px; background: var(--surface); color: var(--ink); }
.image-modal::backdrop { background: var(--backdrop); }
html:has(.image-modal[open]) { overflow: hidden; }
.image-modal img { max-height: calc(94dvh - 64px); width: auto; object-fit: contain; }
.image-modal button { position: absolute; right: 8px; top: 4px; border: 0; background: transparent; display: grid; place-items: center; width: 44px; height: 44px; }
.back-to-top { position: fixed; right: 20px; bottom: 20px; z-index: 5; background: var(--ink); color: var(--surface); visibility: hidden; opacity: 0; transition: opacity .2s, visibility .2s; --icon: url('../assets/icons/arrow-up.svg'); }
.back-to-top.is-visible { visibility: visible; opacity: 1; }
.skip-link { position: fixed; top: 10px; left: 10px; transform: translateY(-160%); z-index: 30; background: var(--surface); padding: 12px 20px; border: 1px solid var(--ink); border-radius: 8px; }
.skip-link:focus { transform: none; }
@media (max-width: 1150px) {
  .header-phone { display: none; }
  .hero { gap: 32px; }
  .hero-actions { gap: 16px; }
  .diploma-grid figure { grid-template-columns: 1fr; align-content: start; }
  .footer-contacts { column-gap: 32px; }
}
@media (max-width: 850px) {
  :root { --nav-offset: 92px; --section-gap: 32px; }
  .site-header { min-height: 76px; }
  .menu-toggle { display: grid; }
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 16px var(--gutter) 24px; border-bottom: 1px solid var(--line); background: var(--surface); }
  .site-nav.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav a { min-height: 48px; display: flex; align-items: center; font-size: 17px; }
  /* The drop-down rows are full width, so a dot under the middle of a row
     hangs in empty space: on phones it marks the end of the row instead. */
  .site-nav a.is-current::after { inset: 50% 16px auto auto; transform: translateY(-50%); }
  .hero { padding-block: 48px 64px; }
  h1 { font-size: clamp(42px, 6.2vw, 64px); }
  .hero-lead { font-size: 14px; }
  .hero-tagline { font-size: 22px; }
  .about-details { gap: 32px; }
  .feature-grid { grid-template-columns: 1fr; gap: 28px; }
  .section, .formula-section, .buy-section { padding-bottom: 64px; }
  .buy-grid { grid-template-columns: 1fr; gap: 32px; }
  .marketplace-coming { gap: 10px; font-size: 17px; }
  .marketplace-coming > span { width: 32px; height: 32px; }
  .site-footer { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .hero { grid-template-columns: 1fr; gap: 36px; }
  h1 { font-size: clamp(40px, 12vw, 68px); }
  .hero-copy { padding-block: 0; }
  .hero-lead { font-size: 15px; }
  .hero-tagline { margin-top: 24px; max-width: 350px; }
  .hero-tagline br { display: none; }
  .hero-eyebrow { margin-bottom: 22px; }
  .hero-actions { gap: 18px; }
  .button { padding-inline: 22px; }
  .carousel { border-radius: 20px; }
  .big-copy { font-size: 18px; }
  .about-details { grid-template-columns: 1fr; gap: 32px; align-items: start; }
  .about-details__aside { gap: 32px; }
  .about-details .feature-grid { gap: 20px; }
  .about-details .feature-grid article { gap: 8px; }
  .about-details .feature-grid h3 { font-size: 16px; }
  .about-details .feature-grid article p { font-size: 14px; line-height: 1.55; }
  .diploma-grid { grid-template-columns: 1fr; gap: 36px; }
  .diploma-grid figure { grid-template-columns: 92px minmax(0, 1fr); gap: 18px; padding: 20px; }
  .diploma-grid img { max-width: 92px; }
  .diploma-grid figcaption { font-size: 14px; }
  .buy-lead { font-size: 18px; }
  .marketplaces { gap: 20px; }
  .marketplace-coming { font-size: 23px; min-height: 88px; gap: 18px; }
  .marketplace-coming > span { width: 40px; height: 40px; }
  .footer-contacts { flex-direction: column; gap: 28px; }
  /* The address stays on one line: on phones narrower than ~380px its size
     follows the available width (22.5em is the text width in em). */
  .site-footer .footer-address { font-size: min(14px, (100vw - var(--gutter) * 2 - 30px) / 22.5); }
  .site-footer { padding-block: 40px 72px; }
  .header-actions { gap: 8px; }
}
/* Narrow two-column screens: a smaller video leaves the text column wide
   enough to fit the section into one screen. */
@media (min-width: 601px) and (max-width: 1150px) {
  .about-details { grid-template-columns: minmax(0, min(36%, var(--fit-height))) minmax(0, 1fr); }
  .about-details .feature-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 851px) and (max-width: 1150px) and (max-height: 900px) {
  .about-details { grid-template-columns: minmax(0, min(32%, var(--fit-height))) minmax(0, 1fr); }
}
/* Laptop screens: tighter vertical rhythm so a section still fits one screen. */
@media (min-width: 851px) and (max-height: 900px) {
  :root { --section-gap: 28px; }
  .about-details__aside { gap: 28px; }
  .feature-grid { row-gap: 28px; }
}
@media (hover: none) { .carousel-button { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* The section rule fade is tied to the scroll position, not to time, so it
     is kept: it adds no motion. */
  *:not(.section-top), *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}