:root {
  --ink: #252525;
  --muted: #747474;
  --gold: #af895b;
  --gold-deep: #956f42;
  --line: #e5e5e2;
  --page: #f8f8f8;
  --serif: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --sans: "Noto Sans SC", "PingFang SC", sans-serif;
  --display: "Space Grotesk", "Noto Sans SC", sans-serif;
  --type-label: 12px;
  --type-caption: 14px;
  --type-body: 16px;
  --type-lead: 18px;
  --type-card-title: 22px;
  --type-product-title: 24px;
  --type-eyebrow: 24px;
  --type-feature-title: 28px;
  --type-panel-title: 38px;
  --type-value: 42px;
  --type-section-title: 48px;
  --type-hero-title: 68px;
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --page-gutter: clamp(32px, 6vw, 156px);
  --content-max: 1600px;
  --section-space: var(--space-8);
  --section-content-gap: var(--space-7);
  --grid-gap: var(--space-4);
  --carousel-nav-size: 56px;
  --logo-card-height: 84px;
  --logo-frame-height: 64px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
@font-face {
  font-family: "HeroTitle";
  src: url("assets/hero-title.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "MemberNumbers";
  src: url("assets/d-din-pro-600-semibold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0024-0025, U+002B-0039, U+00A5, U+FF0B-FF0F, U+FFE5;
}
* { box-sizing: border-box; }
*, *::before, *::after { letter-spacing: 0px; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
html { scroll-behavior: smooth; }
html.has-inertial-wheel { scroll-behavior: auto; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--sans); font-size: var(--type-body); line-height: 1.5; letter-spacing: 0; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }
.hero-card p, .section-title > p:not(.section-title__en) { text-wrap: balance; }
a { color: inherit; text-decoration: none; }
button { font: inherit; font-weight: 500; cursor: pointer; border: 0; }

.site-header { position: fixed; z-index: 15; top: 0; left: 0; right: 0; height: 96px; padding: 0 var(--page-gutter); display: flex; align-items: center; gap: clamp(48px, 6vw, 128px); color: #fff; transition: height .42s var(--ease), color .32s ease; }
.site-header::before { content: ""; position: absolute; z-index: -1; inset: 0; border-bottom: 1px solid rgba(37,37,37,.06); background: rgba(255,255,255,.86); box-shadow: 0 8px 28px rgba(35,35,32,.05); backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1); transform: translate3d(0,-105%,0); transition: transform .52s var(--ease); pointer-events: none; }
.site-header.is-scrolled { height: 80px; color: var(--ink); }
.site-header.is-scrolled::before, .site-header.is-menu-open::before { transform: translate3d(0,0,0); }
.logo { position: relative; z-index: 17; width: min(11.45vw, 292px); display: flex; align-items: center; flex: 0 0 auto; transition: width .42s var(--ease); }
.logo img { display: block; width: 100%; height: auto; transition: opacity .32s ease; }
.logo__dark { position: absolute; top: 0; left: 0; opacity: 0; }
.site-header.is-scrolled .logo, .site-header.is-menu-open .logo { width: min(9.4vw, 240px); }
.site-header.is-scrolled .logo__light, .site-header.is-menu-open .logo__light { opacity: 0; }
.site-header.is-scrolled .logo__dark, .site-header.is-menu-open .logo__dark { opacity: 1; }
.site-nav { display: flex; align-items: center; justify-content: flex-end; gap: clamp(24px, 2vw, 56px); flex: 1; font-size: var(--type-body); color: rgba(255,255,255,.84); white-space: nowrap; }
.site-nav a { position: relative; min-height: 44px; padding: 10px 18px; display: flex; align-items: center; transition: color .3s ease, transform .3s var(--ease); }
.site-header.is-intro-playing .site-nav a,
.site-header.is-intro-playing .menu-toggle { transition: none; }
.site-nav a::after { content: ""; position: absolute; right: auto; bottom: 6px; left: 50%; width: 2em; height: 2px; margin-left: -1em; border-radius: 2px; background: currentColor; opacity: .92; transform: scaleX(0); transform-origin: center; transition: transform .32s var(--ease); pointer-events: none; }
.site-nav.is-open a::after { display: none; }
.site-header.is-scrolled .site-nav { color: rgba(37,37,37,.76); }
.menu-toggle { position: relative; z-index: 18; display: none; width: 44px; height: 44px; min-height: 44px; margin-left: auto; align-items: center; justify-content: center; flex-direction: column; gap: 6px; background: transparent; padding: 8px 10px; color: inherit; }
.menu-toggle span { display: block; width: 24px; height: 1.5px; margin: 0; background: currentColor; transform-origin: center; transition: transform .42s var(--ease), opacity .25s ease; }
.menu-toggle:focus { outline: none; }
.menu-toggle:focus-visible { border-radius: 8px; box-shadow: inset 0 0 0 2px rgba(175,137,91,.72); }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
body.is-menu-open { overflow: hidden; }
section[id] { scroll-margin-top: 96px; }

.hero { --hero-header-half-height: 48px; --hero-card-height: min(20.5vh, 295px); --hero-card-half-height: min(10.25vh, 147.5px); position: relative; min-height: 720px; height: 100svh; max-height: none; display: flex; align-items: center; overflow: hidden; color: #fff; }
.hero__image { position: absolute; inset: -4%; transform: scale(1.08); transform-origin: center center; will-change: transform; }
.hero__image-motion { position: absolute; inset: 0; background: url("assets/hero-background-user.png") center / cover no-repeat; transform: translate3d(0,0,0); transform-origin: center center; backface-visibility: hidden; }
.hero.is-pointer-parallax-active .hero__image-motion { will-change: transform; }
.hero__shade { position: absolute; inset: 0; background: rgba(30,27,24,.44); }
.hero__copy { position: absolute; z-index: 1; top: calc(var(--hero-header-half-height) + 48% - var(--hero-card-half-height)); left: var(--page-gutter); margin: 0; transform: translateY(-50%); }
.hero__eyebrow { margin: 0 0 24px; font-size: var(--type-eyebrow); line-height: 1.4; letter-spacing: 0; color: rgba(255,255,255,.86); }
.hero h1 { margin: 0; font-family: "HeroTitle", var(--serif); font-size: var(--type-hero-title); line-height: 1.05; font-weight: 400; letter-spacing: 0; white-space: nowrap; }
.hero h1 em { display: inline-block; font-style: normal; letter-spacing: 0; }
.hero__side-label { position: absolute; z-index: 1; right: 6vw; bottom: 8%; writing-mode: vertical-rl; font-size: var(--type-caption); letter-spacing: 0; color: rgba(255,255,255,.72); }
.hero__cards { position: absolute; z-index: 2; left: var(--page-gutter); right: 36%; bottom: 4%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
.hero-card { --hero-card-inset: var(--space-4); position: relative; min-width: 0; height: var(--hero-card-height); min-height: 0; max-height: 295px; padding: var(--hero-card-inset); display: flex; align-items: flex-start; justify-content: flex-start; border: 1px solid rgba(255,255,255,.58); border-radius: 22px; overflow: hidden; color: #fff; background: rgba(58,52,47,.22); backdrop-filter: blur(14px) saturate(.82); -webkit-backdrop-filter: blur(14px) saturate(.82); }
.hero-card::before { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.13); pointer-events: none; }
.hero-card > * { position: relative; z-index: 1; }
.hero-card__copy { display: grid; gap: 8px; }
.hero-card h2 { margin: 0; font-family: var(--serif); font-size: var(--type-feature-title); line-height: 1.25; letter-spacing: 0; font-weight: 600; }
.hero-card p { margin: 0; color: rgba(255,255,255,.82); font-size: var(--type-lead); line-height: 1.4; }
.hero-card__icon { position: absolute !important; right: var(--hero-card-inset); bottom: var(--hero-card-inset); display: block; width: 64px; height: 64px; object-fit: contain; pointer-events: none; }
.hero__scroll { display: none; }

@media (min-width: 961px) and (hover: hover) and (pointer: fine) {
  .hero__cards { perspective: 1200px; }
  .hero-card { --card-tilt-x: 0deg; --card-tilt-y: 0deg; --card-tilt-scale: 1; transform: perspective(900px) rotateX(var(--card-tilt-x)) rotateY(var(--card-tilt-y)) scale(var(--card-tilt-scale)); transform-style: preserve-3d; backface-visibility: hidden; transition: box-shadow .34s ease, border-color .34s ease; }
  .hero-card.is-tilting { border-color: rgba(255,255,255,.78); box-shadow: 0 18px 42px rgba(24,20,17,.15); will-change: transform; }
  .hero-card__copy, .hero-card__icon { transform: translateZ(24px); backface-visibility: hidden; }
}

.section { position: relative; padding: var(--section-space) max(var(--page-gutter), calc((100% - var(--content-max)) / 2)) 0; }
.section > * { width: 100%; max-width: var(--content-max); margin-inline: auto; }
.section-title { position: relative; isolation: isolate; text-align: center; }
.section-title__en { position: absolute; z-index: 0; top: 20px; left: 50%; width: max-content; max-width: 100%; margin: 0; transform: translateX(-50%); font: 600 var(--type-caption) var(--display); letter-spacing: clamp(1em, 1vw, 1.2em); white-space: nowrap; color: var(--gold); }
.section-title__en-letter { display: inline-block; transform-origin: 50% 100%; }
.section-title h2 { position: relative; z-index: 1; margin: 0; font-family: "HeroTitle", var(--serif); font-size: var(--type-section-title); line-height: 1.25; letter-spacing: 0; font-weight: 400; }
.section-title > p:not(.section-title__en) { margin: var(--space-3) auto 0; color: var(--muted); font-size: var(--type-body); }
.tea { padding-top: var(--section-space); padding-bottom: 0; background: #fff; }
.carousel-wrap, .water-products { position: relative; margin-top: var(--section-content-gap); }
.tea-track, .water-track { display: flex; gap: var(--space-5); overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; padding: 0 44px var(--space-3); }
.tea-track::-webkit-scrollbar, .water-track::-webkit-scrollbar { display: none; }
.tea-carousel { --tea-track-bottom-space: var(--space-6); width: 100%; margin-top: var(--section-content-gap); }
.tea-track { --tea-gap: var(--space-4); --tea-item-width: calc((100% - (4 * var(--tea-gap))) / 5); gap: var(--tea-gap); padding: 0 0 var(--tea-track-bottom-space); scroll-padding-inline: 0; }
.tea-item { position: relative; flex: 0 0 var(--tea-item-width); min-width: 0; text-align: center; }
.tea-item__name, .tea-item__tag, .tea-item__media { position: relative; z-index: 1; }
.tea-item__name { height: 200px; margin: 0 auto; font-family: var(--serif); font-size: var(--type-product-title); line-height: 1.55; letter-spacing: .45em; white-space: nowrap; writing-mode: vertical-rl; }
.tea-item__tag { position: absolute; top: var(--space-1); left: calc(50% + 14px + var(--space-2)); padding: 10px 7px; border-radius: 8px; background: var(--gold); color: #fff; font-family: var(--serif); font-size: var(--type-body); line-height: 1.35; letter-spacing: .12em; writing-mode: vertical-rl; }
.tea-item__media { height: 220px; margin-top: var(--space-3); display: flex; align-items: flex-end; justify-content: center; }
.tea-item__media::before { content: ""; position: absolute; z-index: 0; left: 50%; bottom: -36px; width: 150px; height: 150px; transform: translateX(-50%) scale(.88); transform-origin: center; border-radius: 50%; background: #fff3e3; opacity: 0; pointer-events: none; transition: opacity .36s var(--ease), transform .52s var(--ease); }
.tea-item__media > img { position: relative; z-index: 1; display: block; width: auto; max-width: 100%; height: 184px; max-height: 100%; object-fit: contain; object-position: center bottom; }
.carousel-arrow { position: absolute; z-index: 2; top: 50%; width: var(--carousel-nav-size); height: var(--carousel-nav-size); padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; outline: none; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.09); color: #3f3f3d; font-size: 32px; font-weight: 300; line-height: 1; transform: translateY(-50%); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.tea-carousel .carousel-arrow { top: calc((100% - var(--tea-track-bottom-space)) / 2); }
.carousel-arrow span { display: block; width: 1em; line-height: 1; text-align: center; }
.carousel-arrow .material-symbols-outlined { font-size: 32px; }
.tea-carousel .carousel-arrow--prev { left: calc((var(--carousel-nav-size) / -2) - var(--space-2)); }
.tea-carousel .carousel-arrow--next { right: calc((var(--carousel-nav-size) / -2) - var(--space-2)); }
.carousel-arrow--prev { left: -24px; }
.carousel-arrow--next { right: -24px; }

.robot { background: var(--page); }
.robot-layout { --robot-card-gap: var(--grid-gap); display: grid; grid-template-columns: minmax(360px, 32.2%) minmax(0, 1fr); gap: var(--robot-card-gap); align-items: stretch; margin-top: var(--section-content-gap); }
.robot-visual { position: relative; isolation: isolate; min-width: 0; width: 100%; max-width: 100%; aspect-ratio: 512 / 740; overflow: hidden; border-radius: 20px; background: #f5f6f6; outline: none; touch-action: pan-y pinch-zoom; }
.robot-carousel__background { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; }
.robot-carousel__viewport { position: absolute; z-index: 1; inset: 0; overflow: hidden; cursor: pointer; }
.robot-carousel__track { width: 100%; height: 100%; display: flex; transform: translate3d(var(--robot-offset, 0%), 0, 0); transition: transform 1000ms cubic-bezier(.23, 1, .32, 1); will-change: transform; }
.robot-carousel__track.is-jumping { transition: none; }
.robot-carousel__slide { position: relative; flex: 0 0 100%; width: 100%; height: 100%; overflow: hidden; }
.robot-carousel__copy { position: absolute; z-index: 2; top: 9.5%; left: 50%; width: 88%; transform: translateX(-50%); text-align: center; color: var(--ink); }
.robot-carousel__copy p { margin: 0; color: var(--muted); font-family: var(--display); font-size: clamp(16px, 1.45vw, 22px); font-weight: 400; line-height: 1; }
.robot-carousel__copy h3 { margin: var(--space-2) 0 0; color: var(--ink); font-family: var(--sans); font-size: clamp(30px, 2.5vw, 40px); font-weight: 600; line-height: 1.12; }
.robot-carousel__product { position: absolute; z-index: 1; left: 47%; bottom: 8.5%; display: block; width: auto; max-width: none; height: auto; object-fit: contain; transform: translateX(-50%); pointer-events: none; }
.robot-carousel__product--extractor { width: auto; height: 58%; }
.robot-carousel__product--tea-bar { left: 50%; bottom: 7.25%; width: auto; height: 66%; }
.robot-carousel__arrow { position: absolute; z-index: 3; top: 50%; width: var(--carousel-nav-size); height: var(--carousel-nav-size); padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; outline: none; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.09); color: #3f3f3d; transform: translateY(-50%); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.robot-carousel__arrow--prev { left: var(--space-3); }
.robot-carousel__arrow--next { right: var(--space-3); }
.robot-carousel__arrow svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.carousel-arrow:focus-visible,
.robot-carousel__arrow:focus-visible { box-shadow: 0 8px 24px rgba(0,0,0,.09), inset 0 0 0 2px rgba(175,137,91,.72); }
.robot-carousel__dots { position: absolute; z-index: 3; left: 50%; bottom: var(--space-3); display: flex; align-items: center; gap: var(--space-2); transform: translateX(-50%); }
.robot-carousel__dots button { width: 8px; height: 8px; min-height: 0; padding: 0; border-radius: 50%; background: rgba(67,67,64,.28); transition: width .36s var(--ease), border-radius .36s var(--ease), background-color .3s ease; }
.robot-carousel__dots button.is-active { width: 24px; border-radius: 100px; background: var(--gold); }
.material-symbols-outlined { font-family: "Material Symbols Outlined"; font-weight: 300; font-style: normal; font-size: 1em; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; font-feature-settings: "liga"; -webkit-font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; }
.robot-panel { min-width: 0; display: grid; grid-template-rows: minmax(188px, 32%) minmax(0, 1fr); gap: var(--robot-card-gap); }
.robot-features { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: center; padding: var(--space-5) var(--space-4); border-radius: 20px; background: #fff; }
.robot-features div { min-width: 0; display: grid; justify-items: center; gap: var(--space-3); color: #4e4e4c; }
.robot-features img { display: block; width: clamp(34px, 2.25vw, 46px); height: clamp(34px, 2.25vw, 46px); object-fit: contain; }
.robot-features b { font-size: var(--type-lead); line-height: 1.4; font-weight: 400; white-space: nowrap; }
.robot-features.is-updating-forward { --robot-feature-enter-x: 20px; }
.robot-features.is-updating-backward { --robot-feature-enter-x: -20px; }
.robot-features.is-updating > div { animation: robot-feature-item-in 440ms cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--robot-feature-index, 0) * 24ms); will-change: opacity, transform; }
.robot-features.is-updating > div:nth-child(1) { --robot-feature-index: 1; }
.robot-features.is-updating > div:nth-child(2) { --robot-feature-index: 2; }
.robot-features.is-updating > div:nth-child(3) { --robot-feature-index: 3; }
.robot-features.is-updating > div:nth-child(4) { --robot-feature-index: 4; }
.robot-features.is-updating > div:nth-child(5) { --robot-feature-index: 5; }
.robot-features.is-updating > div:nth-child(6) { --robot-feature-index: 6; }
@keyframes robot-feature-item-in {
  from { opacity: 0; transform: translate3d(calc(var(--robot-feature-enter-x) * .5), 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.robot-offer-card { min-height: 0; align-self: start; display: grid; grid-template-columns: 18% minmax(0, 1fr); overflow: hidden; border-radius: 20px; background: #fff; }
.robot-offer-tabs { --offer-index: 0; position: relative; isolation: isolate; display: grid; grid-template-rows: repeat(3, 1fr); overflow: hidden; background: #f1f1f1; }
.robot-offer-tabs::before { content: ""; position: absolute; z-index: 0; inset: 0 0 auto; width: 100%; height: calc(100% / 3); background: #fff; transform: translateY(calc(var(--offer-index) * 100%)); transition: transform .48s cubic-bezier(.4, 0, .2, 1); will-change: transform; pointer-events: none; }
.robot-offer-tab { position: relative; z-index: 1; width: 100%; height: 100%; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: var(--space-3) var(--space-1); background: transparent; color: #4c4c4a; transition: color .35s var(--ease); }
.robot-offer-tab.is-selected { background: transparent; }
.robot-offer-tab:focus { outline: none; }
.robot-offer-tab:focus-visible { box-shadow: inset 0 0 0 2px rgba(175,137,91,.72); }
.robot-offer-tab > img { display: block; width: clamp(32px, 2.2vw, 44px); height: clamp(32px, 2.2vw, 44px); object-fit: contain; pointer-events: none; }
.robot-offer-tab b { font-size: var(--type-lead); line-height: 1.4; font-weight: 500; white-space: nowrap; }
.robot-offer-details { min-width: 0; min-height: 0; display: grid; }
.robot-offer-detail { --robot-detail-inset: 48px; --robot-detail-section-gap: var(--space-4); height: 100%; padding: var(--robot-detail-inset); display: grid; grid-template-rows: auto var(--robot-detail-section-gap) 1px var(--robot-detail-section-gap) auto minmax(var(--robot-detail-section-gap), 1fr) 48px; }
.robot-offer-detail[hidden] { display: none; }
.robot-offer-detail::before { content: ""; grid-row: 3; background: var(--line); }
.robot-offer-detail.is-entering-forward { --offer-enter-x: 0px; --offer-enter-y: 18px; --offer-child-x: 0px; --offer-child-y: 10px; }
.robot-offer-detail.is-entering-backward { --offer-enter-x: 0px; --offer-enter-y: -18px; --offer-child-x: 0px; --offer-child-y: -10px; }
.robot-offer-detail.is-entering { animation: robot-offer-panel-in 560ms cubic-bezier(.22, 1, .36, 1) both; will-change: opacity, transform; }
.robot-offer-detail.is-entering > .robot-offer-primary,
.robot-offer-detail.is-entering > .robot-offer-secondary,
.robot-offer-detail.is-entering > .gold-button { animation: robot-offer-content-in 440ms cubic-bezier(.22, 1, .36, 1) both; will-change: opacity, transform; }
.robot-offer-detail.is-entering > .robot-offer-primary { animation-delay: 40ms; }
.robot-offer-detail.is-entering > .robot-offer-secondary { animation-delay: 90ms; }
.robot-offer-detail.is-entering > .gold-button { animation-delay: 140ms; }
@keyframes robot-offer-panel-in {
  from { opacity: 0; transform: translate3d(var(--offer-enter-x), var(--offer-enter-y), 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes robot-offer-content-in {
  from { opacity: 0; transform: translate3d(var(--offer-child-x), var(--offer-child-y), 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.robot-offer-primary { grid-row: 1; padding-bottom: 0; border-bottom: 0; }
.robot-offer-primary h3, .robot-offer-secondary h4 { margin: 0; font-family: var(--serif); color: #353533; font-weight: 600; }
.robot-offer-primary h3 { font-size: var(--type-card-title); line-height: 1.35; }
.robot-offer-primary p, .robot-offer-secondary p { margin: var(--space-3) 0 0; color: #252523; font-size: var(--type-lead); line-height: 1.7; }
.robot-offer-secondary { grid-row: 5; padding-top: 0; }
.robot-offer-secondary h4 { font-size: var(--type-card-title); line-height: 1.35; }
.robot-offer-accent { color: var(--gold); }
.robot-offer-detail > .gold-button { grid-row: 7; align-self: stretch; justify-self: start; margin-top: 0; }
.gold-button, .dark-button { min-height: 44px; display: inline-flex; align-items: center; gap: var(--space-4); overflow: hidden; padding: 10px var(--space-4); border-radius: 6px; font-size: var(--type-caption); font-weight: 500; transition: transform .3s ease, background-color .3s ease; }
.gold-button { background: var(--gold); color: #fff; }
.dark-button { background: #3f3f3d; color: #fff; }
.button-roll { display: inline-flex; overflow: hidden; white-space: nowrap; line-height: 1.2; }
.button-roll__letter { position: relative; display: inline-block; transform: translate3d(0, 0, 0); text-shadow: 0 1.2em 0 currentColor; transition: transform .4s cubic-bezier(.25, .46, .45, .94); transition-delay: calc(var(--button-letter-index) * 7ms); }

.water { --water-module-gap: var(--space-7); background: var(--page); }
.water-hero-shell { position: relative; margin-top: var(--section-content-gap); }
.water-brand-carousel { --water-brand-gap: clamp(32px, 2vw, 44px); --water-brand-peek: clamp(112px, 8.5vw, 180px); --water-background-y: 0%; --water-background-scale: 1; position: relative; width: calc(100% + (var(--page-gutter) * 2)); max-width: none; margin-left: calc(var(--page-gutter) * -1); outline: none; touch-action: pan-y pinch-zoom; }
.water-brand-carousel:focus-visible { border-radius: 20px; box-shadow: 0 0 0 2px rgba(175,137,91,.72); }
.water-brand-viewport { overflow: hidden; }
.water-brand-track { display: flex; gap: var(--water-brand-gap); transform: translate3d(var(--water-brand-offset, 0px), 0, 0); transition: transform 920ms var(--ease); will-change: transform; }
.water-brand-track.is-jumping { transition: none; }
.water-hero { position: relative; flex: 0 0 calc(100% - (var(--water-brand-peek) * 2)); min-width: 0; aspect-ratio: 1600 / 499; overflow: hidden; border-radius: 20px; color: #fff; }
.water-hero__background, .water-hero__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.water-hero__background { display: block; object-fit: cover; object-position: center 36%; transform: translate3d(0, var(--water-background-y), 0) scale(var(--water-background-scale)); transform-origin: center; will-change: transform; }
.water-hero__shade { z-index: 1; background: rgba(0, 0, 0, .44); }
.water-hero__copy { --water-logo-slot-height: clamp(82px, 6.48vw, 113px); position: absolute; z-index: 2; top: 12%; bottom: 12%; left: 6%; display: grid; grid-template-rows: var(--water-logo-slot-height) auto auto; align-content: space-between; justify-items: start; }
.water-hero__copy > img { align-self: end; display: block; width: clamp(190px, 15vw, 260px); height: auto; }
.water-hero__copy h3 { margin: 0; font-family: var(--serif); font-size: var(--type-section-title); line-height: 1.2; font-weight: 500; }
.water-hero__copy p { margin: 0; font-size: var(--type-product-title); line-height: 1.5; }
.water-hero__vertical { position: absolute; z-index: 2; top: 14%; right: 4%; display: flex; align-items: flex-start; gap: var(--space-2); font-family: var(--serif); font-size: var(--type-product-title); line-height: 1.45; }
.water-hero__vertical span { writing-mode: vertical-rl; letter-spacing: .2em; }
.water-hero__vertical img { position: absolute; right: -8px; bottom: -30px; width: 46px; height: auto; }
.water-hero--quanyangquan .water-hero__copy > img,
.water-hero--lanlan .water-hero__copy > img { width: auto; max-height: none; object-fit: contain; object-position: left center; filter: drop-shadow(0 2px 8px rgba(0,0,0,.12)); }
.water-hero--quanyangquan .water-hero__copy > img { height: clamp(64px, 5vw, 88px); }
.water-hero--lanlan .water-hero__copy > img { height: clamp(68px, 5.3vw, 93px); }
.water-hero--quanyangquan .water-hero__copy h3,
.water-hero--lanlan .water-hero__copy h3 { margin-top: 0; }
.water-brand-arrow { top: 50%; }
.water-brand-arrow--prev { left: calc((var(--water-brand-peek) - var(--carousel-nav-size)) / 2); }
.water-brand-arrow--next { right: calc((var(--water-brand-peek) - var(--carousel-nav-size)) / 2); }
.water-tabs { --water-tab-index: 0; --water-tab-padding: var(--space-1); position: relative; isolation: isolate; display: flex; justify-content: center; gap: 0; width: min(1024px, 68%); min-height: 72px; margin: var(--water-module-gap) auto 0; padding: var(--water-tab-padding); border-radius: 100px; background: #fff; }
.water-tabs::before { content: ""; position: absolute; z-index: 0; top: var(--water-tab-padding); bottom: var(--water-tab-padding); left: var(--water-tab-padding); width: calc((100% - (var(--water-tab-padding) * 2)) / 5); border-radius: 100px; background: #3f3f3d; transform: translateX(calc(var(--water-tab-index) * 100%)); transition: transform .55s var(--ease); will-change: transform; pointer-events: none; }
.water-tabs button { position: relative; z-index: 1; min-height: 56px; flex: 1; padding: var(--space-2); border-radius: 100px; background: transparent; color: #4a4a48; font-size: var(--type-lead); transition: color .35s var(--ease); }
.water-tabs button.is-active { background: transparent; color: #fff; }
.water-tabs button:focus { outline: none; }
.water-tabs button:focus-visible { box-shadow: inset 0 0 0 2px rgba(175,137,91,.72); }
.water-products { margin-top: var(--water-module-gap); }
.water-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: var(--grid-gap); padding: 0; overflow: visible; }
.water-product { --water-card-inner-gap: var(--space-4); position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: var(--space-3) var(--space-3) var(--water-card-inner-gap); border: 0; border-radius: 18px; background: #fff; transform: translateZ(0); transition: transform .42s var(--ease), box-shadow .42s var(--ease); }
.water-product__media { position: relative; aspect-ratio: 382 / 332; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: var(--page); }
.water-product__media > img { width: 92%; height: 92%; object-fit: contain; }
.water-product__labels { position: absolute; z-index: 2; top: calc(var(--space-3) + var(--space-2)); left: calc(var(--space-3) + var(--space-2)); max-width: calc(100% - (var(--space-3) * 2) - (var(--space-2) * 2)); display: inline-flex; align-items: stretch; overflow: hidden; border-radius: 7px; white-space: nowrap; }
.water-product__badge { flex: 0 0 auto; min-height: 32px; padding: 6px; display: inline-flex; align-items: center; border-radius: 7px; background: #f4e5cd; color: #775c32; font-size: var(--type-caption); line-height: 20px; font-weight: 600; }
.water-product__badge--hot { gap: 4px; border-radius: 7px 0 0 7px; background: #ad8958; color: #fff; }
.water-product__labels > :only-child { border-radius: 7px; }
.water-product__badge-icon { flex: 0 0 auto; display: block; width: 18px; height: 18px; object-fit: contain; }
.water-product__saving { flex: 1 1 auto; min-width: 0; min-height: 32px; padding: 6px; display: inline-flex; align-items: center; justify-content: space-between; gap: 4px; border-radius: 0 7px 7px 0; background: #f5e6cd; color: #a17c48; line-height: 20px; }
.water-product__saving b { font-size: var(--type-caption); font-weight: 500; }
.water-product__saving small { min-width: 0; color: #9b8769; font-size: 12px; }
.water-product h3,
.member-card h3 { font-family: var(--serif); font-size: var(--type-card-title); line-height: 1.35; font-weight: 600; }
.water-product h3 { margin: var(--water-card-inner-gap) 0 var(--space-2); }
.water-product__description { margin: 0 0 var(--space-2); color: #92928e; font-size: var(--type-body); line-height: 1.5; }
.water-product__chips { min-height: 29px; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.water-product__chips span { padding: 4px 8px; border-radius: 5px; background: var(--page); color: #777773; font-size: var(--type-caption); }
.water-product__chips .water-product__chip--gold { background: #f5e6cd; color: #a27c45; }
.water-product__footer { margin-top: auto; padding-top: var(--water-card-inner-gap); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-2); }
.water-product__price p { margin: 0 0 2px; color: #9d9d97; font-size: var(--type-caption); }
.water-product__price strong { white-space: nowrap; color: var(--gold); font-size: var(--type-feature-title); line-height: 1.2; font-weight: 500; }
.water-product__price-label { margin-right: .35em; font-size: var(--type-caption); font-weight: 400; }
.water-product__price-value { display: inline-flex; align-items: baseline; gap: .16em; font-family: "MemberNumbers", var(--display); font-weight: 600; font-variant-numeric: tabular-nums; }
.water-product__currency { font-size: max(.6em, 12px); line-height: 1; }
.water-product__amount { font-size: 1em; line-height: 1; }
.water-product .dark-button,
.robot-offer-detail > .gold-button { min-width: 120px; height: 48px; min-height: 48px; align-items: center; justify-content: center; padding: 0 var(--space-4); border-radius: 100px; font-size: var(--type-lead); line-height: 1; }
@keyframes water-product-enter-forward { from { opacity: 0; transform: translate3d(28px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes water-product-enter-backward { from { opacity: 0; transform: translate3d(-28px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
.water-track.is-switching-forward .water-product { animation: water-product-enter-forward .62s var(--ease) both; }
.water-track.is-switching-backward .water-product { animation: water-product-enter-backward .62s var(--ease) both; }
.water-track.is-switching-forward .water-product:nth-child(2), .water-track.is-switching-backward .water-product:nth-child(2) { animation-delay: .04s; }
.water-track.is-switching-forward .water-product:nth-child(3), .water-track.is-switching-backward .water-product:nth-child(3) { animation-delay: .08s; }
.water-track.is-switching-forward .water-product:nth-child(4), .water-track.is-switching-backward .water-product:nth-child(4) { animation-delay: .12s; }
.service-assurance { min-height: 80px; margin-top: var(--water-module-gap); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; overflow: hidden; border-radius: 18px; background: #fff; }
.service-assurance__item { position: relative; min-width: 0; padding: var(--space-3) var(--space-4); display: flex; align-items: center; justify-content: center; gap: var(--space-2); color: #3f3f3d; font-size: var(--type-lead); line-height: 1.35; white-space: nowrap; }
.service-assurance__item + .service-assurance__item::before { content: ""; position: absolute; top: 50%; left: 0; width: 2px; height: 24px; background: rgba(175, 137, 91, .2); transform: translateY(-50%); }
.service-assurance__item img { flex: 0 0 auto; display: block; width: 32px; height: 32px; object-fit: contain; }

.member { background: #fff; }
.member-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); margin-top: var(--section-content-gap); }
.member-card { --member-accent: var(--gold); --member-card-inset: 40px; --member-visible-gap: calc(88px - clamp(24px, 2vw, 36px)); position: relative; min-width: 0; min-height: 0; padding: var(--member-card-inset); display: flex; flex-direction: column; overflow: hidden; border: 1px solid #dededb; border-radius: 18px; background: #fff; transition: transform .42s var(--ease), box-shadow .42s var(--ease), border-color .42s var(--ease); }
.member-card--young { --member-accent: #8da331; }
@media (min-width: 961px) and (hover: hover) and (pointer: fine) {
  .site-nav a:hover, .site-nav a:focus-visible { color: #fff; transform: translateY(-2px); }
  .site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); }
  .site-header.is-scrolled .site-nav a:hover, .site-header.is-scrolled .site-nav a:focus-visible,
  .site-nav.is-open a:hover, .site-nav.is-open a:focus-visible { color: var(--gold-deep); }
  .carousel-arrow:hover { transform: translateY(-50%) scale(1.06); box-shadow: 0 12px 30px rgba(0,0,0,.13); }
  .robot-carousel__arrow:hover { background: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.13); transform: translateY(-50%) scale(1.06); }
  .robot-offer-tab:not(.is-selected):hover { color: #252523; }
  .tea-item:hover .tea-item__media::before { opacity: 1; transform: translateX(-50%) scale(1); }
  .dark-button:hover { transform: translateY(-2px); background-color: #555552; }
  .gold-button:hover { transform: translateY(-2px); background-color: var(--gold-deep); }
  .dark-button:hover .button-roll__letter,
  .gold-button:hover .button-roll__letter { transform: translate3d(0, -1.2em, 0); }
  .water-product:hover, .water-product:focus-within { z-index: 1; transform: translate3d(0, -12px, 0); box-shadow: 0 16px 40px rgba(48, 43, 36, .07); }
  .member-card:hover { transform: none; border-color: #dededb; box-shadow: none; }
  .member-card:focus-within { transform: none; border-color: #dededb; box-shadow: none; }
  .member-card--young:hover { border-color: #dededb; }
  .member-card--young:focus-within { border-color: #dededb; box-shadow: none; }
  .partner-wall__row:hover .partner-wall__track { animation-play-state: paused; }
}
.member-card__tag { position: absolute; z-index: 2; top: var(--member-card-inset); right: var(--member-card-inset); padding: 12px 24px; border-radius: 12px; background: var(--member-accent); color: #fff; font-family: var(--sans); font-size: var(--type-lead); line-height: 1.35; white-space: nowrap; }
.member-card--young .member-card__tag { background: #86a63d; }
.member-card__header { position: relative; z-index: 1; max-width: 58%; }
.member-card h3 { margin: 0; letter-spacing: 0; }
.member-card__eyebrow { margin: var(--space-1) 0 0; font: var(--type-lead)/1.35 var(--display); letter-spacing: 0; }
.member-card__offer { min-width: 0; height: 128px; min-height: 128px; margin-top: var(--space-4); display: grid; grid-template-columns: 34% minmax(0, 1fr); align-items: center; gap: var(--space-3); }
.member-card__offer strong { position: relative; z-index: 1; display: inline-flex; align-items: baseline; gap: .16em; white-space: nowrap; color: #3f3f3d; font: 600 clamp(48px, 4vw, 72px)/1 "MemberNumbers", var(--display); font-variant-numeric: tabular-nums; }
.member-card__currency { font-size: .6em; line-height: 1; }
.member-card__amount { font-size: 1em; line-height: 1; }
.member-card__offer img { display: block; width: 100%; max-height: 100%; object-fit: contain; object-position: right center; }
.member-card--young .member-card__offer img { width: 72%; justify-self: end; }
.member-card ul { margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); list-style: none; color: #555552; font-family: var(--sans); font-size: var(--type-lead); line-height: 1.45; }
.member-card li { display: flex; align-items: center; gap: var(--space-2); }
.member-card li > img { flex: 0 0 auto; width: 28px; height: 28px; display: block; object-fit: contain; }
.member-card .dark-button { width: 100%; height: 56px; min-height: 56px; margin-top: var(--member-visible-gap); padding-block: 0; justify-content: center; border-radius: 100px; font-size: var(--type-lead); }

.points-card { min-height: clamp(280px, 18vw, 340px); margin-top: var(--section-content-gap); padding: clamp(32px, 3vw, 48px); display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(230px, .7fr); align-items: center; gap: var(--space-6); overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.points-card .section-title { width: auto; margin: 0; text-align: left; }
.points-card .section-title h2 { font-family: var(--sans); font-size: var(--type-section-title); font-weight: 600; }
.points-card .section-title > p { max-width: none; margin: var(--space-4) 0 var(--space-5); color: #555552; font-size: var(--type-lead); line-height: 1.6; }
.points-card__visual { position: relative; top: -5px; width: min(100%, 260px); margin-right: var(--space-4); justify-self: end; }
.points-card__visual img { display: block; width: 100%; height: auto; object-fit: contain; }
@media (min-width: 961px) {
  .points-card__visual img { transform: scale(1.08); transform-origin: center; }
}
.points-card .gold-button,
.partner-recruit-card .gold-button { width: 164px; height: 52px; min-width: 164px; min-height: 52px; padding: 0 var(--space-4); justify-content: center; border-radius: 100px; font-size: var(--type-lead); font-weight: 600; line-height: 1.2; }

.partner-actions { padding-right: 0; padding-left: 0; background: var(--page); }
.partner-actions__grid { width: 100%; max-width: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--section-space); align-items: stretch; }
.partner-recruit,
.group-purchase { min-width: 0; scroll-margin-top: 96px; }
.partner-recruit { width: min(calc(100% - (var(--page-gutter) * 2)), var(--content-max)); margin-inline: auto; }
.partner-recruit-card { min-height: clamp(360px, 26vw, 464px); height: 100%; overflow: hidden; border-radius: 18px; background: #fff; }
.partner-recruit-card { padding: clamp(32px, 2.8vw, 48px); display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(230px, .78fr); align-items: center; gap: var(--space-3); }
.partner-recruit__copy { min-width: 0; }
.partner-recruit__eyebrow { margin: 0 0 var(--space-2); color: var(--gold); font: 500 var(--type-lead)/1.2 var(--display); }
.partner-recruit__copy h2 { margin: 0; font-family: var(--sans); font-size: var(--type-section-title); line-height: 1.25; font-weight: 600; white-space: nowrap; }
.partner-recruit__list { max-width: 420px; margin: var(--space-5) 0 var(--space-6); padding: 0; display: grid; grid-template-columns: repeat(2, max-content); gap: var(--space-3) var(--space-4); list-style: none; color: #555552; font-size: var(--type-body); }
.partner-recruit__list li { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
.partner-recruit__list .material-symbols-outlined { color: var(--gold); font-size: 20px; font-variation-settings: "wght" 400; }
.partner-recruit__visual { width: clamp(230px, 17vw, 280px); max-width: none; justify-self: end; }
.partner-recruit__visual img { display: block; width: 100%; height: auto; object-fit: contain; }

.group-purchase { position: relative; z-index: 0; width: 100%; max-width: none; }
.group-banner { position: relative; width: 100%; min-height: 0; aspect-ratio: 2560 / 667; overflow: hidden; background: #fff3db; }
.group-banner__media,
.group-banner__media img { display: block; width: 100%; height: 100%; }
.group-banner__media img { object-fit: cover; object-position: center; }

@media (min-width: 1181px) {
  .partner-recruit-card { min-height: clamp(400px, 28vw, 460px); height: auto; padding: clamp(32px, 2.5vw, 44px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .56fr); align-items: center; gap: var(--space-6); }
  .points-card,
  .partner-recruit-card { padding-left: var(--space-7); }
  .partner-recruit__copy { position: relative; z-index: 2; width: auto; height: auto; display: block; }
  .partner-recruit__list { margin: var(--space-4) 0 var(--space-5); }
  .partner-recruit-card .gold-button { margin-top: 0; }
  .partner-recruit__visual { position: static; z-index: 1; width: min(100%, 380px); max-width: none; justify-self: end; transform: none; }
}

@media (min-width: 961px) {
  .partner-recruit__copy { height: 100%; display: flex; flex-direction: column; align-items: flex-start; }
  .partner-recruit-card .gold-button { margin-top: auto; }
  .partner-recruit__list { min-height: 64px; }
}

@media (min-width: 1181px) {
  .partner-recruit__copy { height: auto; }
  .partner-recruit__list { margin: var(--space-5) 0 var(--space-6); }
  .partner-recruit-card .gold-button { margin-top: 0; }
}

.story { z-index: 1; margin-top: var(--section-space); padding-top: 0; padding-bottom: 0; background: transparent; }
.story-card { --story-outer-gap: 80px; --story-content-gap: var(--space-6); min-height: 0; padding: var(--story-outer-gap) clamp(32px, 6vw, 96px); border-radius: 24px; background: #fff; }
.story-card .section-title { max-width: 1100px; margin: 0 auto; }
.story-card .section-title > .story-intro { max-width: 1040px; margin-top: var(--story-content-gap); color: #3f3c39; font-size: 20px; line-height: 2.4; }
.story-card .section-title em { color: var(--gold); font-style: normal; }
.story-logos { width: min(100%, 720px); min-height: 84px; margin: var(--story-content-gap) auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 20px; }
.story-logo { position: relative; width: 100%; min-width: 0; height: var(--logo-card-height); min-height: var(--logo-card-height); padding: 14px 18px; display: grid; place-items: center; overflow: hidden; border: 1px solid #e6e6e4; border-radius: 12px; background: #fff; }
.story-logo img { position: absolute; top: 50%; left: 50%; display: block; width: auto; max-width: none; height: var(--logo-frame-height); max-height: none; object-fit: contain; transform: translate(-50%, -50%); }
@media (min-width: 1181px) {
  .story-logo img { height: 68px; }
}
.partner-wall.section { padding: 0; overflow: hidden; background: var(--page); }
.partner-wall.section > .partner-wall__inner { --partner-logo-gap: var(--grid-gap); width: 100%; max-width: none; min-height: 384px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--partner-logo-gap); overflow: hidden; }
.partner-wall__row { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%); }
.partner-wall__row--secondary { display: block; }
.partner-wall__track { width: max-content; display: flex; flex-wrap: nowrap; animation: partner-wall-left 180s linear infinite; animation-delay: -34s; will-change: transform; }
.partner-wall__row--secondary .partner-wall__track { animation-direction: reverse; animation-delay: -92s; }
.partner-wall__group { flex: 0 0 auto; display: flex; align-items: center; gap: var(--partner-logo-gap); padding-right: var(--partner-logo-gap); }
.partner-wall__item { position: relative; flex: 0 0 auto; width: clamp(260px, 18vw, 300px); height: var(--logo-card-height); padding: 12px 10px; display: grid; place-items: center; overflow: hidden; border: 0; border-radius: 12px; background: #fff; }
.partner-wall__row--primary .partner-wall__group > .partner-wall__item:nth-child(n + 7),
.partner-wall__row--secondary .partner-wall__group > .partner-wall__item:nth-child(-n + 6) { display: none; }
.partner-wall__item { --partner-logo-frame-height: var(--logo-frame-height); }
.partner-wall__item img { position: absolute; top: 50%; left: 50%; display: block; width: auto; max-width: none; height: var(--partner-logo-frame-height); max-height: none; object-fit: contain; transform: translate(-50%, -50%); filter: none; opacity: 1; }
@keyframes partner-wall-left { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--page-gutter); background: #2d2d2a; color: rgba(255,255,255,.65); font: var(--type-caption) var(--display); letter-spacing: 0; }
.site-footer a { color: #fff; }

@media (min-width: 961px) {
  .tea-item__name { height: 184px; }
  .tea-item__media { height: 204px; }
  .tea-carousel { --tea-track-bottom-space: calc(var(--space-8) + 36px); }
  .water { padding-bottom: var(--space-8); }
  .robot-offer-card { align-self: stretch; }
}

@media (min-width: 961px) and (max-width: 1180px) {
  .partner-recruit-card { position: relative; min-height: 400px; padding: var(--space-5); display: block; }
  .partner-recruit__copy { position: relative; z-index: 2; }
  .partner-recruit__copy h2 { font-size: var(--type-section-title); }
  .partner-recruit__list { max-width: 230px; grid-template-columns: 1fr; gap: var(--space-2); margin: var(--space-4) 0; }
  .partner-recruit__visual { position: absolute; z-index: 1; right: var(--space-3); bottom: var(--space-4); width: 180px; }
}

.reveal-up { opacity: 0; backface-visibility: hidden; }
.section-title h2, .hero h1 { overflow: visible; text-wrap: balance; }
.hero__image, .hero__image-motion, .water-hero__background, .robot-visual img, .water-product__media img, .member-card__offer img { backface-visibility: hidden; }

@media (max-width: 1180px) {
  :root { --type-eyebrow: 20px; --type-feature-title: 24px; --type-panel-title: 34px; --type-value: 38px; --type-section-title: 40px; --type-hero-title: 60px; }
  .section-title__en { top: 16px; }
  .site-header { gap: 4vw; }.site-nav { gap: 14px; font-size: var(--type-body); }.hero__copy, .hero__cards { margin-left: 0; }.hero__cards { right: 28%; }.robot-layout { grid-template-columns: minmax(330px, 37%) minmax(0, 1fr); }.robot-features { padding-inline: var(--space-2); }.robot-features b, .robot-offer-tab b { font-size: var(--type-caption); }.robot-offer-detail { --robot-detail-inset: var(--space-4); }
  .member-grid { grid-template-columns: 1fr; }
  .member-card { min-height: 0; }
  .story-logos { gap: 16px; }
  .story-logo img { height: 48px; }
}
@media (min-width: 1181px) and (max-width: 1400px) {
  .robot-offer-detail { --robot-detail-inset: var(--space-6); }
}
@media (min-width: 961px) {
  .water-hero__copy { top: 14%; bottom: 15%; left: 5.5%; width: 70%; display: block; }
  .water-hero__copy > img { position: absolute; top: 0; left: 0; }
  .water-hero__copy h3 { position: absolute; top: 42%; left: 0; }
  .water-hero__copy p { position: absolute; bottom: 0; left: 0; }
  .water-hero { transform: scale(.92); transform-origin: center; backface-visibility: hidden; transition: transform 920ms var(--ease); will-change: transform; }
  .water-hero.is-before { transform-origin: right center; }
  .water-hero.is-after { transform-origin: left center; }
  .water-hero.is-active { transform: scale(1); }
}
@media (max-width: 1280px) and (min-width: 821px) {
  .water-hero__copy > img { width: clamp(150px, 18vw, 190px); }
  .water-hero__copy h3 { margin: 0; font-size: var(--type-panel-title); }
  .water-hero__copy p, .water-hero__vertical { font-size: var(--type-lead); }
  .water-track { display: flex; overflow-x: auto; padding-bottom: var(--space-3); scroll-padding-inline: 0; }
  .water-product { flex: 0 0 min(320px, 42%); }
}
@media (min-width: 1281px) and (max-width: 1440px) {
  .water-product__price strong { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
}
@media (max-width: 1600px) and (min-width: 821px) {
  .site-header { gap: 8vw; }
  .site-nav { font-size: var(--type-body); }
  .site-nav a { padding: 8px 10px; }
}
@media (max-width: 1240px) and (min-width: 821px) {
  .site-header { gap: 0; }
  .site-nav { position: fixed; z-index: 16; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 112px 8vw 56px; background: rgba(255,255,255,.96); color: var(--ink); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); opacity: 0; visibility: hidden; transform: translate3d(100%,0,0); transition: transform .5s var(--ease), opacity .3s ease, visibility 0s linear .5s; pointer-events: none; }
  .site-nav.is-open { opacity: 1; visibility: visible; transform: translate3d(0,0,0); transition-delay: 0s; pointer-events: auto; }
  .site-nav.is-open a { width: 100%; min-height: 56px; padding: 8px 0; font-size: 24px; }
  .menu-toggle { display: flex; margin-left: auto; }
  .site-header.is-menu-open { color: var(--ink); }
}
@media (max-width: 960px) {
  :root {
    /* Mobile type roles: label → caption → body → lead → title → display. */
    --mobile-type-label: 12px;
    --mobile-type-caption: 14px;
    --mobile-type-body: 16px;
    --mobile-type-lead: 18px;
    --mobile-type-card-title: 18px;
    --mobile-type-panel-title: 22px;
    --mobile-type-section-title: 28px;
    --mobile-type-display: 36px;
    --mobile-type-price: 36px;
    --type-label: var(--mobile-type-label);
    --type-caption: var(--mobile-type-caption);
    --type-body: var(--mobile-type-body);
    --type-lead: var(--mobile-type-lead);
    --type-card-title: var(--mobile-type-card-title);
    --type-product-title: var(--mobile-type-card-title);
    --type-eyebrow: var(--mobile-type-caption);
    --type-feature-title: var(--mobile-type-lead);
    --type-panel-title: var(--mobile-type-panel-title);
    --type-value: 30px;
    --type-section-title: var(--mobile-type-section-title);
    --type-hero-title: var(--mobile-type-display);

    /* Mobile spacing roles: related → group → component → content → section. */
    --mobile-gap-related: 6px;
    --mobile-gap-supporting: 10px;
    --mobile-gap-group: 14px;
    --mobile-gap-component: 20px;
    --mobile-gap-content: 28px;
    --mobile-gap-section: 56px;
    --page-gutter: 32px;
    --section-space: var(--mobile-gap-section);
    --section-content-gap: var(--mobile-gap-content);
    --grid-gap: var(--mobile-gap-group);
    --carousel-nav-size: 48px;
    --logo-card-height: 52px;
    --logo-frame-height: 38px;
  }
  body { line-height: 1.6; }
  button, a { touch-action: manipulation; }
  .gold-button, .dark-button { font-weight: 600; }
  .site-header, .site-header.is-scrolled { height: 64px; padding: 0 var(--page-gutter); gap: 0; }.logo, .site-header.is-scrolled .logo, .site-header.is-menu-open .logo { width: clamp(128px, 38vw, 146px); min-height: 44px; }.logo__dark { top: 50%; transform: translateY(-50%); }.menu-toggle { display: flex; }
  .site-nav { position: fixed; z-index: 16; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--mobile-gap-related); padding: 96px var(--page-gutter) 48px; background: rgba(255,255,255,.96); color: var(--ink); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); opacity: 0; visibility: hidden; transform: translate3d(100%,0,0); transition: transform .5s var(--ease), opacity .3s ease, visibility 0s linear .5s; pointer-events: none; }
  .site-nav.is-open { opacity: 1; visibility: visible; transform: translate3d(0,0,0); transition-delay: 0s; pointer-events: auto; }
  .site-nav.is-open a { width: 100%; min-height: 52px; padding: 8px 0; font-size: 20px; }
  .site-nav.is-open a:hover { color: inherit; transform: none; }
  .site-nav.is-open a:hover::after { transform: scaleX(0); }
  .site-header.is-menu-open { color: var(--ink); }
  section[id] { scroll-margin-top: 72px; }
  .hero { min-height: 0; height: clamp(480px, 68svh, 640px); padding: 88px var(--page-gutter) var(--space-4); display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-content: normal; align-items: stretch; gap: var(--space-4); }.hero__image { inset: -2px; transform: scale(1.04); }.hero__image-motion { background-size: cover; background-position: center 48%; transform: none; }.hero__copy { position: relative; top: auto; left: auto; width: 100%; align-self: center; transform: translateY(-8px); }.hero__eyebrow { margin-bottom: var(--space-1); line-height: 1.6; }.hero h1 { white-space: normal; }.hero__cards { position: relative; left: auto; right: auto; bottom: auto; width: 100%; align-self: end; gap: var(--grid-gap); }.hero-card { --hero-card-inset: var(--space-3); height: 144px; min-height: 0; padding: var(--hero-card-inset); padding-bottom: calc(var(--hero-card-inset) + 40px + var(--space-2)); border-radius: 12px; }.hero-card__copy { gap: var(--space-1); }.hero-card p { font-size: var(--type-caption); }.hero-card__icon { right: var(--hero-card-inset); bottom: var(--hero-card-inset); width: 40px; height: 40px; }.hero__side-label { display: none; }.hero__scroll { display: none; }
  .section-title__en { top: 12px; font-size: var(--type-label); line-height: 1.4; letter-spacing: .56em; }.robot .section-title__en { letter-spacing: .43em; }.section-title > p:not(.section-title__en) { margin-top: var(--mobile-gap-supporting); line-height: 1.7; }
  .carousel-wrap { margin-top: var(--section-content-gap); }.tea-track, .water-track { gap: var(--space-3); padding: 0 var(--space-4) var(--space-3); }.tea-item { flex-basis: 44%; min-width: 145px; }.carousel-arrow { width: 44px; height: 44px; font-size: 30px; }.carousel-arrow .material-symbols-outlined { font-size: 30px; }.carousel-arrow--prev { left: -8px; }.carousel-arrow--next { right: -8px; }
  .tea { padding-bottom: var(--section-space); }.tea-carousel { --tea-track-bottom-space: calc(var(--section-space) + 24px); width: calc(100% + (var(--page-gutter) * 2)); max-width: none; margin-top: var(--section-content-gap); margin-right: calc(var(--page-gutter) * -1); margin-left: calc(var(--page-gutter) * -1); }.tea-item__name { height: 136px; letter-spacing: .08em; }.tea-item__tag { top: 14px; left: calc(50% + 8px + var(--space-2)); padding: 6px 4px; font-size: var(--type-label); }.tea-item__media { height: 144px; margin-top: 0; }.tea-item__media::before { bottom: -24px; width: 100px; height: 100px; }.tea-item__media > img { height: 128px; }.tea-carousel .carousel-arrow { display: none; }
  .water, .member { padding-bottom: var(--section-space); }
  .robot-layout { display: block; margin-top: var(--section-content-gap); }.robot-visual { width: min(100%, 430px); margin-inline: auto; border-radius: 16px; }.robot-panel { grid-template-rows: auto auto; margin-top: var(--mobile-gap-group); gap: var(--mobile-gap-group); }.robot-features { grid-template-columns: repeat(3, 1fr); gap: var(--mobile-gap-component) 0; min-height: 210px; padding: var(--mobile-gap-component) var(--mobile-gap-supporting); border-radius: 16px; }.robot-features div { gap: var(--mobile-gap-related); }.robot-features img { width: 28px; height: 28px; }.robot-features b { font-size: var(--type-caption); }.robot-offer-card { --robot-offer-radius: 16px; display: block; isolation: isolate; overflow: hidden; border-radius: var(--robot-offer-radius); clip-path: inset(0 round var(--robot-offer-radius)); }.robot-offer-tabs { grid-template-columns: repeat(3, 1fr); grid-template-rows: none; min-height: 106px; border-radius: var(--robot-offer-radius) var(--robot-offer-radius) 0 0; }.robot-offer-tabs::before { width: calc(100% / 3); height: 100%; transform: translateX(calc(var(--offer-index) * 100%)); }.robot-offer-tab { padding: var(--mobile-gap-group) 4px; gap: 4px; }.robot-offer-tab > img { width: 28px; height: 28px; }.robot-offer-tab b { font-size: var(--type-caption); white-space: normal; }.robot-offer-details { overflow: hidden; border-radius: 0 0 var(--robot-offer-radius) var(--robot-offer-radius); background: #fff; }.robot-offer-detail { min-height: 0; }.robot-offer-detail.is-entering-forward { --offer-enter-x: 18px; --offer-enter-y: 0px; --offer-child-x: 10px; --offer-child-y: 0px; }.robot-offer-detail.is-entering-backward { --offer-enter-x: -18px; --offer-enter-y: 0px; --offer-child-x: -10px; --offer-child-y: 0px; }.robot-offer-primary h3 { font-size: var(--type-card-title); }.robot-offer-primary p, .robot-offer-secondary p { font-size: var(--type-body); line-height: 1.7; }.robot-offer-secondary h4 { font-size: var(--type-card-title); }
  .robot-offer-primary p, .robot-offer-secondary p { margin-top: var(--mobile-gap-supporting); }
  .water-product__currency { font-size: 18px; }
  .water-product__amount { font-size: var(--mobile-type-price); }
  .member-grid { width: calc(100% + var(--page-gutter)); max-width: none; margin-top: var(--section-content-gap); margin-right: calc(var(--page-gutter) * -1); margin-left: 0; padding: 0 var(--page-gutter) var(--mobile-gap-supporting) 0; display: flex; align-items: stretch; gap: var(--mobile-gap-group); overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 0 var(--page-gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }.member-grid::-webkit-scrollbar { display: none; }.member-card { --member-card-inset: var(--mobile-gap-component); --member-visible-gap: var(--mobile-gap-content); flex: 0 0 min(82vw, 360px); min-height: 0; padding: var(--member-card-inset); scroll-snap-align: start; scroll-snap-stop: always; }.member-card__header { max-width: 66%; }.member-card__eyebrow { margin-top: 4px; font-size: var(--type-caption); }.member-card__tag { top: var(--member-card-inset); right: var(--member-card-inset); padding: var(--mobile-gap-related) var(--mobile-gap-supporting); border-radius: var(--mobile-gap-related); font-size: var(--type-caption); }.member-card__offer { height: var(--space-8); min-height: var(--space-8); margin-top: var(--mobile-gap-group); }.member-card__offer strong { font-size: var(--mobile-type-price); }.member-card__offer img { max-height: 100%; }.member-card--young .member-card__offer img { width: 72%; justify-self: end; }.member-card ul { margin-top: var(--mobile-gap-group); gap: var(--mobile-gap-supporting); font-size: var(--type-body); line-height: 1.6; }.member-card li > img { width: 24px; height: 24px; display: block; object-fit: contain; }.member-card .dark-button { min-width: 0; min-height: 56px; font-size: var(--type-body); font-weight: 600; }.member { padding-bottom: 0; }.partner-actions { padding-top: var(--section-space); }.partner-actions__grid { grid-template-columns: minmax(0, 1fr); gap: var(--section-space); }.group-banner { min-height: 0; padding: var(--mobile-gap-content) var(--mobile-gap-component); grid-template-columns: minmax(0, 1fr); gap: var(--mobile-gap-component); border-radius: 16px; }.group-banner__eyebrow { margin-bottom: var(--mobile-gap-related); font-size: var(--type-caption); }.group-banner__copy h2 { font-size: var(--type-section-title); white-space: normal; }.group-banner__copy > p:not(.group-banner__eyebrow) { margin: var(--mobile-gap-supporting) 0 var(--mobile-gap-component); font-size: var(--type-body); line-height: 1.7; white-space: normal; }.group-banner .gold-button { width: 100%; height: 48px; min-width: 0; min-height: 48px; }.group-banner__visual { width: min(100%, 290px); justify-self: center; }.story { margin-top: var(--section-space); }.story-card { --story-outer-gap: var(--mobile-gap-content); --story-content-gap: var(--mobile-gap-component); padding-inline: var(--mobile-gap-component); border-radius: 18px; }.story-card .section-title > .story-intro { margin-top: var(--mobile-gap-component); font-size: var(--type-body); line-height: 1.8; }.story-intro__break { display: none; }.story-logos { width: min(100%, 520px); min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mobile-gap-supporting); }.story-logo { width: 100%; height: var(--logo-card-height); min-height: var(--logo-card-height); padding: var(--mobile-gap-supporting); border-width: 1px; border-radius: 12px; }.story-logo img { width: auto; max-width: none; height: var(--logo-frame-height); }.story-logo--bucm { grid-column: 1 / -1; width: min(100%, 326px); justify-self: center; }.partner-wall.section > .partner-wall__inner { min-height: 248px; flex-direction: column; gap: var(--mobile-gap-supporting); }.partner-wall__row { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%); }.partner-wall__row--secondary { display: block; }.partner-wall__track { animation-duration: 180s; }.partner-wall__row--secondary .partner-wall__track { animation-direction: reverse; animation-delay: -92s; }.partner-wall__group { --partner-logo-gap: var(--mobile-gap-component); gap: var(--partner-logo-gap); padding-right: var(--partner-logo-gap); }.partner-wall__item, .partner-wall__row--secondary .partner-wall__item { flex-basis: auto; width: max-content; height: var(--logo-card-height); }.partner-wall__item img, .partner-wall__row--secondary .partner-wall__item img { width: auto; max-width: none; height: 22px; max-height: none; }.site-footer { padding: var(--mobile-gap-component) var(--page-gutter); gap: var(--mobile-gap-group); flex-wrap: wrap; }.site-footer > span { font-size: var(--type-label); line-height: 1.5; }.site-footer a { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 960px) {
  .member-card__offer img { max-height: var(--space-8); }
  .story-logo img { height: 48px; }
  .story-logo--lanlan { grid-column: 1 / -1; width: calc((100% - var(--mobile-gap-supporting)) / 2); justify-self: center; }
  .points-card,
  .partner-recruit-card { min-height: 0; padding: var(--mobile-gap-content) var(--mobile-gap-component); grid-template-columns: minmax(0, 1fr); gap: var(--mobile-gap-component); border-radius: 16px; }
  .points-card .section-title h2,
  .partner-recruit__copy h2 { font-size: var(--type-section-title); }
  .points-card .section-title > p { margin: var(--mobile-gap-supporting) 0 var(--mobile-gap-component); font-size: var(--type-body); line-height: 1.7; }
  .points-card__visual { top: 0; width: min(78%, 220px); margin-right: 0; justify-self: center; }
  .points-card .gold-button,
  .partner-recruit-card .gold-button { width: 100%; height: 48px; min-width: 0; min-height: 48px; }
  .partner-recruit__eyebrow { margin-bottom: var(--mobile-gap-related); font-size: var(--type-caption); }
  .partner-recruit__list { margin: var(--mobile-gap-component) 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--mobile-gap-supporting); font-size: var(--type-caption); }
  .partner-recruit__list li { gap: 4px; white-space: normal; }
  .partner-recruit__list .material-symbols-outlined { font-size: 18px; }
  .partner-recruit__visual { width: min(100%, 290px); justify-self: center; }
  .partner-wall.section > .partner-wall__inner { --partner-logo-gap: var(--mobile-gap-group); gap: var(--partner-logo-gap); }
  .partner-wall__group { --partner-logo-gap: var(--mobile-gap-group); }
  .partner-wall__item,
  .partner-wall__row--secondary .partner-wall__item { width: 120px; height: var(--logo-card-height); padding: 6px; background: #fff; border: 0; border-radius: 12px; }
  .partner-wall__item,
  .partner-wall__row--secondary .partner-wall__item { --partner-logo-frame-height: var(--logo-frame-height); }
  .partner-wall__item img,
  .partner-wall__row--secondary .partner-wall__item img { width: auto; max-width: none; height: var(--partner-logo-frame-height); max-height: none; }
}
@media (max-width: 960px) and (orientation: landscape) {
  .hero { height: clamp(300px, 74svh, 360px); padding-top: 72px; padding-bottom: var(--space-3); gap: var(--space-3); }
  .hero-card { height: 88px; }
  .hero__image-motion { background-position: center 45%; }
}
@media (max-width: 960px) {
  .water { --water-module-gap: var(--section-content-gap); }
  .water-hero-shell { margin-top: var(--section-content-gap); }
  .water-brand-carousel { --water-brand-gap: var(--space-3); --water-brand-peek: 0px; width: 100%; margin-left: 0; }
  .water-brand-arrow { display: none; }
  .water-hero { height: 210px; aspect-ratio: auto; margin-top: 0; border-radius: 16px; }
  .water-hero__background { object-position: 62% 40%; }
  .water-hero__copy { --water-logo-slot-height: 52px; top: var(--space-4); bottom: var(--space-4); left: var(--space-4); padding: 0; }
  .water-hero__copy > img { width: 120px; }
  .water-hero__copy h3 { margin: 0; font-size: var(--type-card-title); }
  .water-hero__copy p { font-size: var(--type-caption); }
  .water-hero--quanyangquan .water-hero__copy > img { width: auto; height: 41px; max-height: none; }
  .water-hero--lanlan .water-hero__copy > img { width: auto; height: 43px; max-height: none; }
  .water-hero--quanyangquan .water-hero__copy h3,
  .water-hero--lanlan .water-hero__copy h3 { margin-top: 0; }
  .water-hero__vertical { top: var(--space-4); right: var(--space-3); gap: 4px; font-size: var(--type-caption); }
  .water-hero__vertical img { right: -4px; bottom: -20px; width: 28px; }
  .water-tabs { --water-tab-padding: 4px; width: 100%; min-height: 56px; margin-top: var(--water-module-gap); padding: var(--water-tab-padding); }
  .water-tabs button { min-height: 48px; padding: var(--space-1) 4px; font-size: var(--type-caption); }
  .water-products { margin-top: var(--water-module-gap); }
  .water-track { display: flex; gap: var(--grid-gap); overflow-x: auto; padding: 0 0 var(--space-3); scroll-padding-inline: 0; }
  .water-product { flex: 0 0 min(82vw, 320px); min-width: 0; min-height: 0; }
  .water-product h3 { font-size: var(--type-card-title); }
  .water-product__footer { padding-top: var(--water-card-inner-gap); }
  .service-assurance { min-height: 56px; margin-top: var(--water-module-gap); border-radius: 14px; }
  .service-assurance__item { padding: var(--mobile-gap-related) 4px; gap: 6px; font-size: var(--type-caption); }
  .service-assurance__item + .service-assurance__item::before { height: 18px; }
  .service-assurance__item img { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .water-brand-track { transition: none; }
  .water-track.is-switching-forward .water-product,
  .water-track.is-switching-backward .water-product { animation: none; }
}
@media (max-width: 960px) and (orientation: landscape) and (max-height: 600px) {
  .site-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 44px;
    align-content: center;
    align-items: stretch;
    column-gap: var(--mobile-gap-content);
    row-gap: var(--mobile-gap-related);
    padding: 72px var(--page-gutter) 24px;
  }
  .site-nav.is-open a { min-height: 44px; padding: 6px 0; font-size: var(--type-body); }
}
@media (max-width: 960px) {
  button { -webkit-tap-highlight-color: transparent; }
  .gold-button, .dark-button { transition: transform .14s ease, filter .14s ease, background-color .3s ease; }
  .menu-toggle { transition: transform .14s ease, filter .14s ease; }
  .robot-offer-tab { transition: color .35s var(--ease), transform .14s ease, filter .14s ease; }
  .water-tabs button { transition: color .35s var(--ease), transform .14s ease, filter .14s ease; }
  .robot-carousel__dots button { transition: width .36s var(--ease), border-radius .36s var(--ease), background-color .3s ease, transform .14s ease, filter .14s ease; }
  .gold-button:active,
  .dark-button:active,
  .menu-toggle:active,
  .robot-offer-tab:active,
  .water-tabs button:active,
  .robot-carousel__dots button:active { transform: scale(.96); filter: brightness(.94); }
  .robot-carousel__copy { top: 9%; }
  .robot-carousel__copy p { font-size: 14px; }
  .robot-carousel__copy h3 { margin-top: var(--mobile-gap-related); font-size: var(--type-section-title); }
  .robot-carousel__product--extractor { width: auto; height: 62%; }
  .robot-carousel__arrow { display: none; }
  .robot-carousel__dots { bottom: var(--mobile-gap-supporting); gap: var(--mobile-gap-related); }
  .robot-carousel__dots button { width: 7px; height: 7px; }
  .robot-carousel__dots button.is-active { width: 21px; }
}
@media (max-width: 600px) {
  :root { --page-gutter: 20px; }
  .group-banner { aspect-ratio: 1280 / 740; }
}

@media (max-width: 960px) {
  .group-banner { padding: 0; border-radius: 0; }
}
@media (max-width: 360px) {
  :root { --page-gutter: 16px; --section-space: 52px; --section-content-gap: 22px; --type-section-title: 28px; --type-hero-title: 36px; }
  .section-title__en { font-size: var(--type-label); letter-spacing: .42em; }
  .robot .section-title__en { top: 6px; letter-spacing: .34em; }
  .water-product__footer { gap: 3px; }
  .water-product__currency { font-size: 16px; }
  .water-product__amount { font-size: 34px; }
}

/* Keep one standard white section gap between the points card and group banner. */
.member { padding-bottom: var(--section-space); }
.partner-actions { padding-top: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal-up { opacity: 1 !important; }
  .button-roll__letter { transform: none !important; transition: none !important; }
  .water-product:hover, .water-product:focus-within { transform: none; }
  .member-card:hover, .member-card:focus-within { transform: none; }
  .partner-wall__track { animation: none !important; transform: translateX(-12%); }
}