: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 500px, 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; }
/* The four footer groups (flavours, customers, contacts, address) stay in one
   row. Their row is as wide as its content (max-content columns, lines never
   break), so it sits next to the logo when both fit (about 1400px and wider)
   and wraps under the logo otherwise; spare width goes between the columns. */
.site-footer { width: 100%; background: var(--soft); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 48px 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); }
.footer-contacts { flex: 1 0 auto; display: grid; grid-template-columns: repeat(4, max-content); justify-content: space-between; gap: 28px clamp(24px, 3vw, 48px); 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; }
}
/* Below ~960px the four footer columns no longer fit one row: two rows of two,
   then (up to 700px) one column. */
@media (max-width: 959px) {
  .footer-contacts { grid-template-columns: repeat(2, max-content); justify-content: start; column-gap: clamp(48px, 10vw, 96px); }
}
@media (max-width: 700px) {
  .footer-contacts { grid-template-columns: minmax(0, 1fr); }
}
@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; }
}
@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; }
  /* 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; }
  /* The flavour picker and the five-item ingredient map are taller than the
     jar column on 720-768px high screens; tighter gaps keep them within it. */
  .product-jar__aside { gap: 20px; }
  .ingredient-map, .ingredient-map__list { gap: 8px; }
}
@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; }
}