/* =========================================================
   Phone app layout (html.m-app, set by js/mobile-boot.js).
   Home, all machines, category and product pages render as app
   screens on phones; desktop and tablet layouts are untouched.

   Idea: the Photonik prism splits light into a spectrum. Each machine
   carries the colour of its own laser (UV violet, fiber crimson,
   CO2 amber) and one spectral beam marks what is active.
   Every class is m- prefixed so the site's own .btn/.tabs/.hero rules
   never reach these screens.
   ========================================================= */
/* hide the desktop markup until the app screen is in place (shown anyway after 2.5 s if the script fails) */
html.m-app:not(.m-ready) body { visibility: hidden; animation: m-reveal 0s 2.5s forwards; }
@keyframes m-reveal { to { visibility: visible; } }
html.m-app {--paper: #f2f5f9;
  --card: #ffffff;
  --ink: #0b1f3a;
  --ink-2: #435a78;
  --ink-3: #8094ad;
  --line: #e2e9f2;
  --blue: #0a6fd0;
  --blue-tint: #e7f1fc;
  --night: #0a1a33;
  --wa: #1fa855;
  --uv: #7b4dff;
  --ir: #e23a55;
  --co2: #ef8a1f;
  --vis: #18b07a;
  --beam: linear-gradient(90deg, var(--uv), #3d8bff 30%, var(--vis) 48%, var(--co2) 70%, var(--ir));
  --r-lg: 22px;
  --r-md: 16px;
  --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --dock: 66px;
  color-scheme: light; }
html.m-app * {box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html.m-app {background: #d9e1eb; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.m-app body {margin: 0 auto; max-width: 460px; min-height: 100vh; min-height: 100dvh;
  background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  padding: 0 var(--sar) calc(var(--dock) + 28px + var(--sab)) var(--sal);
  overflow-x: hidden; }
@media (min-width: 461px) { html.m-app body {box-shadow: 0 0 0 1px rgba(11, 31, 58, .06), 0 24px 70px rgba(11, 31, 58, .16); } }
html.m-app body.is-locked {overflow: hidden; }
html.m-app img {max-width: 100%; display: block; -webkit-user-drag: none; }
html.m-app a {color: inherit; text-decoration: none; }
html.m-app a, html.m-app button, html.m-app summary, html.m-app label {touch-action: manipulation; }
html.m-app button {font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
html.m-app :focus-visible {outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 8px; }
html.m-app h1, html.m-app h2, html.m-app h3, html.m-app h4 {font-family: var(--font-display); margin: 0; letter-spacing: -0.02em; line-height: 1.18; font-weight: 700; }
html.m-app .m-svg {width: 22px; height: 22px; flex: none; }
html.m-app .m-press {transition: transform .12s ease; }
html.m-app .m-press:active {transform: scale(.97); }
html.m-app .m-appbar {position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 6px;
  height: 58px; padding: 0 8px 0 14px;
  background: rgba(242, 245, 249, .86); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .2s, background .2s; }
html.m-app .m-appbar.is-stuck {border-bottom-color: var(--line); background: rgba(255, 255, 255, .9); }
html.m-app .m-appbar__logo {height: 30px; width: auto; }
html.m-app .m-appbar__title {flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.m-app .m-appbar__sp {flex: 1; }
html.m-app .m-iconbtn {width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; color: var(--ink); transition: background .15s; }
html.m-app .m-iconbtn:active {background: rgba(11, 31, 58, .07); }
html.m-app .m-hero {position: relative; margin: 6px 14px 0; padding: 22px 20px 20px; border-radius: var(--r-lg); overflow: hidden; color: #fff; isolation: isolate;
  background: radial-gradient(120% 90% at 85% 15%, #1d4f8f 0%, rgba(29, 79, 143, 0) 60%), var(--night); }
html.m-app .m-hero__img {position: absolute; right: -6px; top: 16px; bottom: 74px; width: 40%; z-index: -1; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .45)); }
html.m-app .m-hero__img img {width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }
html.m-app .m-hero__beam {position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; z-index: -1; background: var(--beam); opacity: .9;
  transform-origin: left; animation: beam 1.4s cubic-bezier(.2, .7, .2, 1) .25s both; box-shadow: 0 0 14px rgba(123, 77, 255, .6); }
@keyframes beam { from { transform: scaleX(0); } to { transform: scaleX(1); } }
html.m-app .m-hero h1 {font-size: clamp(22px, 6.4vw, 26px); line-height: 1.12; max-width: 58%; font-weight: 800; }
html.m-app .m-hero p {margin: 10px 0 18px; max-width: 56%; font-size: 13.5px; color: rgba(255, 255, 255, .78); }
html.m-app .m-hero__ctas .m-btn {height: 42px; padding: 0 14px; }
html.m-app .m-hero__ctas {display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
html.m-app .m-btn {display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 13px; font-weight: 800; font-size: 14px; }
html.m-app .m-btn--light {background: #fff; color: var(--night); }
html.m-app .m-btn--glass {background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .22); }
html.m-app .m-search {margin: 14px 14px 0; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink-3); }
html.m-app .m-search:focus-within {border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-tint); }
html.m-app .m-search input {flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 16px; color: var(--ink); -webkit-appearance: none; appearance: none; }
html.m-app .m-search input::-webkit-search-cancel-button {-webkit-appearance: none; }
html.m-app .m-search input::placeholder {color: var(--ink-3); }
html.m-app .m-sec {padding: 24px 0 0; }
html.m-app .m-sec__head {display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 16px 12px; }
html.m-app .m-sec__head h2 {font-size: 18px; }
html.m-app .m-sec__head a {color: var(--blue); font-weight: 800; font-size: 13px; white-space: nowrap; padding: 6px 0; }
html.m-app .m-sec__sub {padding: 0 16px 12px; margin: -6px 0 0; color: var(--ink-2); font-size: 13.5px; }
html.m-app .m-cats {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0 14px; }
html.m-app .m-cat {display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--ink-2); min-width: 0; }
html.m-app .m-cat__i {position: relative; width: 100%; aspect-ratio: 1; border-radius: 20px; display: grid; place-items: center; padding: 9px; overflow: hidden; min-height: 0;
  background: linear-gradient(160deg, #fff 30%, var(--tone, #eef3f9)); border: 1px solid var(--line); }
html.m-app .m-cat__i img {width: 100%; height: 100%; min-height: 0; object-fit: contain; }
html.m-app .m-cat--marking {--tone: #efe9ff; }
html.m-app .m-cat--cutting {--tone: #ffe9e4; }
html.m-app .m-cat--welding {--tone: #fff0de; }
html.m-app .m-cat--processing {--tone: #e2f6ee; }
html.m-app .m-cat.is-active {color: var(--ink); }
html.m-app .m-cat.is-active .m-cat__i {border-color: transparent; box-shadow: 0 0 0 2px var(--ink); }
html.m-app .m-promo {margin: 16px 14px 0; padding: 14px 14px 14px 16px; border-radius: var(--r-md); display: flex; gap: 12px; align-items: center;
  background: var(--card); border: 1px solid var(--line); }
html.m-app .m-promo__ic {flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: #e6f6ec; color: var(--wa); }
html.m-app .m-promo h3 {font-size: 14.5px; }
html.m-app .m-promo p {margin: 2px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
html.m-app .m-promo__go {margin-left: auto; flex: none; color: var(--ink-3); }
html.m-app .m-rail {display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 16px; padding: 2px 16px 14px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
html.m-app .m-rail::-webkit-scrollbar {display: none; }
html.m-app .m-rail > * {scroll-snap-align: start; flex: none; }
html.m-app .m-wave {display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; color: var(--ink); white-space: nowrap; }
html.m-app .m-wave::before {content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--wc, var(--ir)); box-shadow: 0 0 0 3px var(--wh, rgba(226, 58, 85, .18)); }
html.m-app .w-uv {--wc: var(--uv); --wh: rgba(123, 77, 255, .18); }
html.m-app .w-ir {--wc: var(--ir); --wh: rgba(226, 58, 85, .18); }
html.m-app .w-co2 {--wc: var(--co2); --wh: rgba(239, 138, 31, .2); }
html.m-app .w-mix.m-wave::before {background: var(--beam); box-shadow: none; width: 16px; border-radius: 4px; }
html.m-app .m-mcard {width: 178px; background: var(--card); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--line); }
html.m-app .m-grid2 .m-mcard {width: auto; }
html.m-app .m-mcard__img {position: relative; aspect-ratio: 1 / .9; padding: 12px 12px 16px; display: grid; place-items: center; overflow: hidden; min-height: 0;
  background: radial-gradient(70% 42% at 50% 92%, rgba(11, 31, 58, .10), rgba(11, 31, 58, 0) 70%), linear-gradient(180deg, #fff, #f5f8fc); }
html.m-app .m-mcard__img img {width: 100%; height: 100%; min-height: 0; object-fit: contain; }
html.m-app .m-mcard__img::after {content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--wc, var(--ir)); opacity: .85; }
html.m-app .m-mcard__img.w-mix::after {background: var(--beam); }
html.m-app .m-mcard__b {padding: 11px 13px 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
html.m-app .m-mcard__b h3 {font-size: 14px; line-height: 1.25; letter-spacing: -0.01em; }
html.m-app .m-mcard__spec {font-size: 12px; color: var(--ink-2); }
html.m-app .m-mcard__spec b {color: var(--ink); font-weight: 800; }
html.m-app .m-grid2 {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 14px; }
html.m-app .m-chips {display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 14px; scrollbar-width: none; overscroll-behavior-x: contain; }
html.m-app .m-chips::-webkit-scrollbar {display: none; }
html.m-app .m-chip {flex: none; height: 38px; padding: 0 15px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 13.5px; font-weight: 700; color: var(--ink-2); transition: background .15s, color .15s; }
html.m-app .m-chip.is-on {background: var(--ink); border-color: var(--ink); color: #fff; }
html.m-app .m-tags {display: flex; flex-wrap: wrap; gap: 6px; }
html.m-app .m-tag {font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 999px; background: var(--paper); color: var(--ink-2); }
html.m-app .m-sample {position: relative; display: block; width: 148px; aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden; background: #dfe6ee; margin: 0; }
html.m-app .m-sample img {width: 100%; height: 100%; object-fit: cover; }
html.m-app .m-sample__cap {position: absolute; inset: auto 0 0 0; padding: 30px 11px 10px; color: #fff; font-size: 12px; font-weight: 700; line-height: 1.3;
  background: linear-gradient(180deg, rgba(11, 26, 51, 0), rgba(11, 26, 51, .82)); }
html.m-app .m-sample small {display: block; font-weight: 600; opacity: .8; font-size: 11px; margin-top: 2px; }
html.m-app .m-trust {margin: 0 14px; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
html.m-app .m-trust__top {display: flex; align-items: center; gap: 14px; }
html.m-app .m-trust__score {font-family: var(--font-display); font-weight: 800; font-size: 38px; line-height: 1; letter-spacing: -0.04em; }
html.m-app .m-stars {color: #f3a712; letter-spacing: 1.5px; font-size: 15px; line-height: 1; }
html.m-app .m-trust__meta {font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }
html.m-app .m-facts {display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
html.m-app .m-logos {display: flex; gap: 10px; overflow-x: auto; margin: 14px -16px 0; padding: 0 16px; scrollbar-width: none; }
html.m-app .m-logos::-webkit-scrollbar {display: none; }
html.m-app .m-logos span {flex: none; width: 82px; height: 50px; border-radius: 12px; background: var(--paper); display: grid; place-items: center; padding: 7px; }
html.m-app .m-logos img {max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; }
html.m-app .m-quote {margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
html.m-app .m-quote p {margin: 0 0 6px; }
html.m-app .m-quote b {color: var(--ink); font-size: 12.5px; }
html.m-app .m-acc {margin: 0 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
html.m-app .m-acc details + details {border-top: 1px solid var(--line); }
html.m-app .m-acc summary {list-style: none; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px; font-weight: 700; font-size: 14.5px; cursor: pointer; }
html.m-app .m-acc summary::-webkit-details-marker {display: none; }
html.m-app .m-acc summary .m-svg {color: var(--blue); }
html.m-app .m-acc summary::after {content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg) translateY(-2px); transition: transform .2s; flex: none; }
html.m-app .m-acc details[open] summary::after {transform: rotate(-135deg); }
html.m-app .m-acc__body {padding: 0 16px 16px; color: var(--ink-2); font-size: 14px; }
html.m-app .m-acc__body p {margin: 0 0 8px; }
html.m-app .m-acc__body ul {margin: 0; padding-left: 18px; }
html.m-app .m-acc__body li {margin-bottom: 7px; }
html.m-app .m-acc__body b {color: var(--ink); }
html.m-app .m-dl {display: flex; align-items: center; gap: 12px; min-height: 48px; border-top: 1px solid var(--line); font-weight: 700; color: var(--ink); font-size: 13.5px; }
html.m-app .m-dl:first-child {border-top: 0; }
html.m-app .m-dl i {font-style: normal; font-size: 10px; font-weight: 800; color: #fff; background: #d8433a; border-radius: 6px; padding: 4px 6px; }
html.m-app .m-foot {padding: 26px 16px 8px; font-size: 12px; color: var(--ink-3); text-align: center; line-height: 1.6; }
html.m-app .m-foot b {color: var(--ink-2); }
html.m-app .m-dock {position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); bottom: calc(10px + var(--sab));
  width: calc(100% - 20px - var(--sal) - var(--sar)); max-width: 440px; height: var(--dock);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; padding: 0 4px;
  background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: saturate(1.8) blur(18px); backdrop-filter: saturate(1.8) blur(18px);
  border: 1px solid rgba(226, 233, 242, .9); border-radius: 24px; box-shadow: 0 12px 34px rgba(11, 31, 58, .16); }
html.m-app .m-dock a, html.m-app .m-dock button {position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10.5px; font-weight: 800; color: var(--ink-3); }
html.m-app .m-dock .is-active {color: var(--ink); }
html.m-app .m-dock .is-active::before {content: ''; position: absolute; top: 7px; width: 22px; height: 3px; border-radius: 2px; background: var(--beam); }
html.m-app .m-dock__wa .m-bubble {width: 50px; height: 50px; border-radius: 18px; display: grid; place-items: center; background: var(--wa); color: #fff; box-shadow: 0 8px 18px rgba(31, 168, 85, .38); }
html.m-app .m-abar {position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); bottom: calc(10px + var(--sab));
  width: calc(100% - 20px - var(--sal) - var(--sar)); max-width: 440px;
  display: grid; grid-template-columns: 50px 1fr 1.3fr; gap: 8px; padding: 8px;
  background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(1.8) blur(18px); backdrop-filter: saturate(1.8) blur(18px);
  border: 1px solid rgba(226, 233, 242, .9); border-radius: 24px; box-shadow: 0 12px 34px rgba(11, 31, 58, .16); }
html.m-app .m-abar a, html.m-app .m-abar button {height: 50px; border-radius: 17px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; font-size: 14.5px; }
html.m-app .m-abar__call {background: var(--paper); color: var(--ink); }
html.m-app .m-abar__wa {background: #e6f6ec; color: #11743a; }
html.m-app .m-abar__quote {background: var(--ink); color: #fff; }
html.m-app .m-gal {position: relative; margin: 4px 14px 0; border-radius: var(--r-lg); overflow: hidden;
  background: radial-gradient(60% 30% at 50% 94%, rgba(11, 31, 58, .12), rgba(11, 31, 58, 0) 70%), linear-gradient(180deg, #fff, #eef3f9); }
html.m-app .m-gal__track {display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
html.m-app .m-gal__track::-webkit-scrollbar {display: none; }
html.m-app .m-gal__s {flex: none; width: 100%; scroll-snap-align: center; scroll-snap-stop: always; aspect-ratio: 1 / .86; display: grid; place-items: center; padding: 22px; min-height: 0; overflow: hidden; }
html.m-app .m-gal__s img {width: 100%; height: 100%; min-height: 0; object-fit: contain; }
html.m-app .m-gal__s--photo {padding: 0; }
html.m-app .m-gal__s--photo img {object-fit: cover; }
html.m-app .m-gal__dots {position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
html.m-app .m-gal__dots i {width: 6px; height: 6px; border-radius: 3px; background: rgba(11, 31, 58, .22); transition: width .25s, background .25s; }
html.m-app .m-gal__dots i.on {width: 20px; background: var(--ink); }
html.m-app .m-gal__zoom {position: absolute; right: 10px; top: 10px; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .85); color: var(--ink); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html.m-app .m-pinfo {padding: 16px 16px 4px; }
html.m-app .m-pinfo__row {display: flex; gap: 14px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
html.m-app .m-pinfo h1 {font-size: 23px; margin-bottom: 8px; font-weight: 800; }
html.m-app .m-pinfo p {margin: 0; color: var(--ink-2); font-size: 14px; }
html.m-app .m-rate {display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; color: var(--ink); }
html.m-app .m-rate .m-stars {font-size: 12px; letter-spacing: 0; }
html.m-app .m-kspecs {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 16px 14px 0; border-radius: var(--r-md); overflow: hidden; background: var(--line); border: 1px solid var(--line); }
html.m-app .m-kspecs div {background: var(--card); padding: 11px 13px; }
html.m-app .m-kspecs small {display: block; font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
html.m-app .m-kspecs b {font-family: var(--font-display); font-size: 15px; letter-spacing: -0.01em; }
html.m-app .m-fmt {width: 104px; text-align: center; }
html.m-app .m-fmt__img {aspect-ratio: 1; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px; display: grid; place-items: center; overflow: hidden; min-height: 0; }
html.m-app .m-fmt__img img {width: 100%; height: 100%; min-height: 0; object-fit: contain; }
html.m-app .m-fmt b {display: block; margin-top: 7px; font-size: 12.5px; }
html.m-app .m-tabs {position: sticky; top: 58px; z-index: 20; display: flex; gap: 2px; overflow-x: auto; margin-top: 18px; padding: 0 10px;
  background: rgba(242, 245, 249, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); scrollbar-width: none; }
html.m-app .m-tabs::-webkit-scrollbar {display: none; }
html.m-app .m-tabs button {position: relative; flex: none; height: 48px; padding: 0 12px; font-size: 14px; font-weight: 700; color: var(--ink-3); }
html.m-app .m-tabs button.is-on {color: var(--ink); }
html.m-app .m-tabs button.is-on::after {content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--beam); }
html.m-app .m-pane {display: none; padding: 16px 0 0; }
html.m-app .m-pane.is-on {display: block; animation: paneIn .22s ease-out; }
@keyframes paneIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
html.m-app .m-block {margin: 0 14px 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; }
html.m-app .m-block h3 {font-size: 15px; margin-bottom: 10px; }
html.m-app .m-block p {margin: 0; color: var(--ink-2); font-size: 14px; }
html.m-app .m-works {list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
html.m-app .m-works li {display: flex; gap: 12px; font-size: 13.5px; color: var(--ink-2); }
html.m-app .m-works li b {display: block; color: var(--ink); font-size: 14px; }
html.m-app .m-works .m-tick {flex: none; width: 24px; height: 24px; border-radius: 8px; background: var(--blue-tint); color: var(--blue); display: grid; place-items: center; margin-top: 1px; }
html.m-app .m-spec {width: 100%; border-collapse: collapse; font-size: 13.5px; }
html.m-app .m-spec td {padding: 11px 0; border-top: 1px solid var(--line); vertical-align: top; }
html.m-app .m-spec tr:first-child td {border-top: 0; padding-top: 0; }
html.m-app .m-spec td:first-child {color: var(--ink-3); width: 42%; padding-right: 12px; font-weight: 600; }
html.m-app .m-spec td:last-child {font-weight: 700; }
html.m-app .m-spec small {display: block; font-weight: 500; color: var(--ink-3); font-size: 12px; margin-top: 2px; }
html.m-app .m-btn-out {display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; margin: 4px 14px 12px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line); font-weight: 800; font-size: 14px; color: var(--ink); }
html.m-app .m-btn-out--wa {background: #e6f6ec; border-color: transparent; color: #11743a; }
html.m-app .m-sgrid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 14px 12px; }
html.m-app .m-sgrid .m-sample {width: auto; }
html.m-app .m-accrow h4 {font-size: 14px; padding: 4px 16px 10px; }
html.m-app .m-acci {width: 98px; text-align: center; }
html.m-app .m-acci span {display: block; margin-top: 6px; font-size: 12px; font-weight: 700; line-height: 1.25; }
html.m-app .m-sheet {position: fixed; inset: 0; z-index: 60; visibility: hidden; transition: visibility 0s .32s; }
html.m-app .m-sheet.is-open {visibility: visible; transition: none; }
html.m-app .m-sheet__bg {position: absolute; inset: 0; background: rgba(10, 26, 51, .5); opacity: 0; transition: opacity .25s; }
html.m-app .m-sheet.is-open .m-sheet__bg {opacity: 1; }
html.m-app .m-sheet__p {position: absolute; left: 50%; bottom: 0; width: 100%; max-width: 460px; max-height: 88vh; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border-radius: 26px 26px 0 0; padding: 10px calc(18px + var(--sar)) calc(20px + var(--sab)) calc(18px + var(--sal));
  transform: translate(-50%, 100%); transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
html.m-app .m-sheet.is-open .m-sheet__p {transform: translate(-50%, 0); }
html.m-app .m-sheet__grip {width: 40px; height: 5px; border-radius: 3px; background: #d5deea; margin: 0 auto 14px; }
html.m-app .m-sheet h3 {font-size: 20px; }
html.m-app .m-sheet p.m-sub {margin: 4px 0 16px; color: var(--ink-2); font-size: 13.5px; }
html.m-app .m-field {display: block; margin-bottom: 12px; }
html.m-app .m-field span {display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 5px; }
html.m-app .m-field input, html.m-app .m-field select {width: 100%; height: 50px; border: 1px solid var(--line); border-radius: 14px; padding: 0 14px; font: inherit; font-size: 16px; background-color: var(--paper); color: var(--ink); -webkit-appearance: none; appearance: none; }
html.m-app .m-field select {background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
html.m-app .m-field input:focus, html.m-app .m-field select:focus {outline: 0; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-tint); background-color: #fff; }
html.m-app .m-sheet__send {width: 100%; height: 54px; margin-top: 6px; border-radius: 16px; background: var(--wa); color: #fff; font-weight: 800; font-size: 15.5px; display: flex; align-items: center; justify-content: center; gap: 8px; }
html.m-app .m-viewer {position: fixed; inset: 0; z-index: 70; background: #050b16; display: none; flex-direction: column; }
html.m-app .m-viewer.is-open {display: flex; }
html.m-app .m-viewer__top {display: flex; align-items: center; justify-content: space-between; padding: calc(8px + var(--sat)) 10px 8px 16px; color: #fff; font-size: 13px; font-weight: 700; }
html.m-app .m-viewer__top .m-iconbtn {color: #fff; }
html.m-app .m-viewer__track {flex: 1; min-height: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
html.m-app .m-viewer__track::-webkit-scrollbar {display: none; }
html.m-app .m-viewer__track div {flex: none; width: 100%; height: 100%; scroll-snap-align: center; display: grid; place-items: center; padding: 12px 12px calc(24px + var(--sab)); }
html.m-app .m-viewer__track img {max-height: 100%; object-fit: contain; }
html.m-app .m-viewer__track .is-cut {background: #fff; border-radius: 18px; padding: 16px; }
html.m-app .m-toast {position: fixed; z-index: 80; left: 50%; bottom: calc(var(--dock) + 26px + var(--sab)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; padding: 10px 16px; border-radius: 12px; transition: opacity .25s, transform .25s; }
html.m-app .m-toast.is-on {opacity: 1; transform: translate(-50%, 0); }
html.m-app .m-empty {padding: 20px 16px; color: var(--ink-3); text-align: center; font-size: 14px; }
html.m-app .m-hide {display: none !important; }
@media (prefers-reduced-motion: reduce) {
html.m-app *, html.m-app *::before, html.m-app *::after {animation: none !important; transition: none !important; }
}

/* ---- menu sheet (all other pages) ---- */
html.m-app .m-menu + .m-menu { margin-top: 14px; }
html.m-app .m-menu h4 { font-size: 12.5px; font-weight: 700; color: var(--ink-3); padding: 0 2px 4px; letter-spacing: 0; }
html.m-app .m-menu__a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 2px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 15px; color: var(--ink); }
html.m-app .m-menu__a .m-svg { color: var(--ink-3); }
html.m-app .m-menu__a:active { background: var(--paper); }
html.m-app .m-link { color: var(--blue); font-weight: 800; }
html.m-app .m-foot a { color: var(--ink-2); }

/* photos with the background removed (…-cutout.webp) are shown whole on white */
html.m-app .m-sample img[src*="-cutout"], html.m-app .m-gal__s--photo img[src*="-cutout"] { object-fit: contain; padding: 12px; background: #fff; }

/* ---- "talk to an engineer" sheet ---- */
html.m-app .m-eng__ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 12px; color: #fff; background: var(--night); box-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, .0); position: relative; overflow: hidden; }
html.m-app .m-eng__ic::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--beam); }
html.m-app .m-eng__acts { display: grid; gap: 10px; }
html.m-app .m-eng__acts .m-sheet__send { margin-top: 0; }
html.m-app .m-eng__btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border-radius: 16px; background: var(--paper); color: var(--ink); font-weight: 800; font-size: 15px; }
html.m-app .m-eng__later { height: 44px; color: var(--ink-3); font-weight: 700; font-size: 14px; }