/* Language switcher (Claude, 28 Oct 2026). Native <details>, so it opens without JavaScript. */
.s-lang { position: relative; display: inline-flex; align-items: center; z-index: 70; }
.s-lang > summary { list-style: none; }
.s-lang > summary::-webkit-details-marker { display: none; }
.s-lang__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px 0 10px; border: 1px solid rgba(16, 34, 27, .16);
  border-radius: 999px; background: #fff; color: #10221B; font-size: 13px; font-weight: 650; line-height: 1; cursor: pointer; white-space: nowrap; }
.s-lang__btn:hover { border-color: rgba(16, 34, 27, .34); }
.s-lang__btn:focus-visible { outline: 2px solid #138A43; outline-offset: 2px; }
.s-lang__menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 168px; padding: 6px; border-radius: 14px; background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 34, 27, .08), 0 18px 40px rgba(16, 34, 27, .16); display: grid; gap: 2px; }
.s-lang__opt { display: block; padding: 10px 12px; border-radius: 10px; color: #10221B; font-size: 15px; line-height: 20px; text-decoration: none; }
.s-lang__opt:hover, .s-lang__opt:focus-visible { background: #EEF6F1; outline: none; }
.s-lang__opt.is-active { font-weight: 700; color: #0E6B34; }
.nav-actions .s-lang { margin-right: 4px; }
@media (max-width: 960px) {
  .nav > .s-lang { margin-left: auto; margin-right: 8px; }
  .s-lang__btn { min-height: 34px; padding: 0 10px; }
}
/* 404 */
.s-404-page main { padding-block: 48px 80px; display: grid; gap: 28px; max-width: 760px; }
.s-404 h2 { font-size: 28px; line-height: 34px; margin: 0 0 6px; }
.s-404 p { margin: 0 0 10px; color: #3E5248; }
/* phones: the language list lives in the menu panel; the top bar keeps logo, sign-up button and menu */
@media (max-width: 520px) { html body .site-header .nav > .s-lang.lang-switcher, html body .site-header .nav-actions .s-lang { display: none !important; } }
/* same place on every page: before "Sign in" (the homepage's older stylesheet pushes .lang-switcher to the end) */
html body .site-header .nav-actions > .s-lang.lang-switcher { order: 0 !important; margin-left: 0 !important; margin-right: 4px !important; }
/* Chinese and Japanese: the inherited stylesheet sets word-break: keep-all on all text, which forbids breaks between
   characters, so a clause with no punctuation becomes one unbreakable line and pushes the page sideways. Inner pages and
   the sections below the homepage hero break normally (the hero keeps its hand-set phrase breaks). */
html[lang="zh-Hant"] body.s-page *, html[lang="ja"] body.s-page *,
html[lang="zh-Hant"] main > section:not(.hero) *, html[lang="ja"] main > section:not(.hero) * { word-break: normal; line-break: strict; }
.s-beliefs, .s-promise { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s-beliefs--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .s-beliefs--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .s-beliefs, .s-promise, .s-beliefs--4 { grid-template-columns: minmax(0, 1fr); } }
.s-contact, .s-contact > * { min-width: 0; }

/* ===== deep check, 28 Oct ===== */
/* words that must not break: CTA domains everywhere; heading words in Chinese, Japanese and Thai (see typeset.py) */
.nw, .w { white-space: nowrap; }
html[lang="zh-Hant"] body:is(.s-page, .home52) :is(h1, h2, h3, h4, summary, th, figcaption, b),
html[lang="ja"] body:is(.s-page, .home52) :is(h1, h2, h3, h4, summary, th, figcaption, b) { word-break: keep-all; overflow-wrap: anywhere; }
/* Korean breaks at spaces only, tables included */
html[lang="ko"] .s-tbl :is(th, td) { word-break: keep-all; }
/* tracking pulls Thai letters apart; capitals do not exist in CJK or Thai, and "QR code" must not turn into "QR CODE" */
html[lang="th"] body * { letter-spacing: normal !important; }
html:is([lang="zh-Hant"], [lang="ja"], [lang="ko"], [lang="th"]) body * { text-transform: none !important; }
/* side navigation never taller than the screen */
@media (min-width: 901px) { .s-toc { max-height: calc(100vh - 124px); overflow-y: auto; overscroll-behavior: contain; } }
/* legal pages on phones: the other legal pages as a compact row; the long "on this page" list is dropped */
@media (max-width: 900px) {
  .s-legal-nav > p:nth-of-type(n+2), .s-legal-nav > ol:nth-of-type(n+2) { display: none; }
  .s-legal-nav ol { display: flex; flex-wrap: wrap; gap: 6px 14px; border-left: 0; }
  .s-legal-nav a { padding: 4px 0; border-left: 0; margin: 0; }
}
/* inline links in body text look like links */
.s-page main :is(p, li, td, dd) a:not(.btn):not(.x-arrow-link) { color: var(--s-link, #0a6b3d); text-decoration: underline; text-underline-offset: 2px; }
/* tables on phones scroll sideways: first column stays put, and a shadow shows there is more */
@media (max-width: 600px) {
  html body main .s-tbl :is(th, td) { overflow-wrap: normal; }
  .s-tbl table { background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left / 28px 100% no-repeat local,
    linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(16,34,27,.22), rgba(16,34,27,0)) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(16,34,27,.22), rgba(16,34,27,0)) right / 12px 100% no-repeat scroll; }
  .s-tbl tbody th[scope="row"], .s-tbl thead th:first-child { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 1px 0 0 var(--s-line, #e3e8e5); }
}
/* small grey text reaches 4.5:1 */
.s-crumbs, .s-crumbs a, .s-reviewed, .s-tbl thead th, .s-fine { color: #55625b; }
.s-tbl td.n { color: #6b756f; }
/* footer legal links: separators never start a line */
.x-foot__links { column-gap: 8px; }

/* phone menu: do not lock the page (locking html/body broke the sticky header when scrolled); the panel scrolls on its own */
html.m52-lock, html.m52-lock body { overflow: visible !important; }
/* Back restores the scroll position at once instead of gliding there */
html { scroll-behavior: auto !important; }
/* homepage story cards: headline stays readable over light illustrations */
.x-story--wide::after { background: linear-gradient(180deg, rgba(8,17,13,0) 15%, rgba(8,17,13,.72) 48%, rgba(8,17,13,.93)); }

/* very long unbreakable chunks must never push the page wider on phones */
@media (max-width:520px){h1 .w,h2 .w,h3 .w{white-space:normal;overflow-wrap:anywhere}}

/* Home hero: the white-to-lilac background runs the full width of the window (it used to stop at 1160px and show the page colour at both sides). Content keeps the same 1160px column: the old side margins become padding. */
body.home52 .hero--stitch.wrap { width: 100%; max-width: none; margin-inline: 0; padding-inline: max(32px, calc((100% - 1160px) / 2)); box-sizing: border-box; }
/* Japanese hero heading: two lines on desktop (the column was 640px; the first line needs about 770px). */
@media (min-width: 900px) { html[lang="ja"] body main .hero--stitch .hero-copy { width: min(100%, 52rem); } }
.product-tile[data-tint="tide"] { --tile-background: var(--tile-tide); }
.product-tile[data-tint="sky"] { --tile-background: var(--tile-sky); }
.product-tile[data-tint="plum"] { --tile-background: var(--tile-plum); }
.product-tile[data-tint="jade"] { --tile-background: var(--tile-jade); }

.product-tile {
  display: grid;
  place-items: center;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  box-sizing: border-box;
  aspect-ratio: 13 / 9;
  padding: var(--tile-padding);
  border-radius: var(--tile-radius);
  background: var(--tile-background);
  box-shadow: var(--tile-shadow);
}

.product-tile > picture { display: block; width: 100%; height: 100%; }
.product-tile img {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center;
}

.x-crop:has(> .product-tile),
.x-shot__frame:has(> .product-tile) {
  aspect-ratio: 13 / 9;
  background: transparent;
}

.x-shot__frame > .product-tile {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
}

.x-shot__frame > .product-tile:has(.x-is-on) {
  opacity: 1;
  visibility: visible;
}

.x-shot__frame .product-tile img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.x-shot--dark:has(.product-tile) {
  display: flex;
  flex-direction: column-reverse;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.x-shot--dark:has(.product-tile) > .x-win__bar {
  background: transparent;
  border: 0;
}

.x-shot--dark:has(.product-tile) > .x-win__bar > :is(i, .x-win__url) {
  display: none;
}

/* Keep the existing width and reduce intermediate-ratio scene boxes. */
.s-photo:has(> img.scene-short),
img.scene-short {
  aspect-ratio: 1600 / 838;
}
.s-photo > img.scene-short {
  height: 100%;
}
img[data-final-scene] {
  object-fit: cover;
  object-position: center;
}