@keyframes link-arrow-line-next { 
  0% { opacity: 1; transform: translate(0px, -50%); }
  42% { opacity: 0; transform: translate(11px, -50%); }
  43% { opacity: 0; transform: translate(-11px, -50%); }
  100% { opacity: 1; transform: translate(0px, -50%); }
}
@keyframes link-arrow-head-next { 
  0% { opacity: 1; transform: translate(0px, -50%) rotate(45deg); }
  42% { opacity: 0; transform: translate(11px, -50%) rotate(45deg); }
  43% { opacity: 0; transform: translate(-11px, -50%) rotate(45deg); }
  100% { opacity: 1; transform: translate(0px, -50%) rotate(45deg); }
}
@keyframes link-arrow-line-previous { 
  0% { opacity: 1; transform: translate(0px, -50%); }
  42% { opacity: 0; transform: translate(-11px, -50%); }
  43% { opacity: 0; transform: translate(11px, -50%); }
  100% { opacity: 1; transform: translate(0px, -50%); }
}
@keyframes link-arrow-head-previous { 
  0% { opacity: 1; transform: translate(0px, -50%) rotate(45deg); }
  42% { opacity: 0; transform: translate(-11px, -50%) rotate(45deg); }
  43% { opacity: 0; transform: translate(11px, -50%) rotate(45deg); }
  100% { opacity: 1; transform: translate(0px, -50%) rotate(45deg); }
}
@keyframes company-hero-label { 
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: none; }
}
@keyframes company-hero-title { 
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: none; }
}
@keyframes company-hero-copy { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes company-history-flow { 
  0% { transform: translateY(-50%); }
  100% { transform: translateY(0px); }
}
@keyframes company-orb-pulse { 
  0%, 100% { opacity: 0.78; filter: saturate(0.9); }
  50% { opacity: 1; filter: saturate(1.12); }
}
@keyframes product-category-enter { 
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0px); }
}
.window-signage-page :is(.window-signage-local-nav, .window-signage-merit-grid article, .window-signage-brightness-visual, .window-signage-brightness-comparisons article, .window-signage-image-stage, .window-signage-before-after-visual, .window-signage-before-after-grid article, .window-signage-installation-visual, .window-signage-sensor-image, .window-signage-support-grid article, .digital-menu-support-grid article, .digital-menu-support-more > div) { border-radius: 0px; }
.digital-menu-page { overflow: clip; background: rgb(255, 255, 255); }
.digital-menu-hero { position: relative; min-height: 600px; display: flex; align-items: center; color: white; background: var(--ink); }
.digital-menu-hero > img { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.digital-menu-hero-overlay { position: absolute; inset: 0px; background: linear-gradient(90deg, rgba(9, 33, 70, 0.94) 0%, rgba(9, 33, 70, 0.72) 46%, rgba(9, 33, 70, 0.25) 76%, rgba(9, 33, 70, 0.16) 100%), linear-gradient(0deg, rgba(9, 33, 70, 0.32), transparent 48%); }
.digital-menu-hero-copy { position: relative; z-index: 1; width: min(1180px, 100% - 80px); margin: 68px auto 0px; }
.digital-menu-hero-copy > p, .digital-menu-section-heading > span, .digital-menu-solution-intro > span, .digital-menu-plan-box span, .digital-menu-support-more span { color: var(--text-accent); font-size: 10px; font-weight: 900; letter-spacing: 0.28em; }
.digital-menu-hero-copy h1 { margin: 22px 0px 24px; font-size: clamp(42px, 4.6vw, 66px); font-weight: 600; letter-spacing: -0.045em; line-height: 1.28; }
.digital-menu-hero-copy strong { display: block; font-size: 16px; font-weight: 500; letter-spacing: 0.05em; line-height: 1.8; }
.digital-menu-local-nav { position: relative; z-index: 2; width: min(1080px, 100% - 80px); display: grid; grid-template-columns: repeat(4, 1fr); margin: -36px auto 0px; background: white; border-radius: 10px; box-shadow: rgba(72, 49, 24, 0.13) 0px 18px 50px; }
.digital-menu-local-nav a { position: relative; display: grid; place-items: center; min-height: 64px; color: var(--ink); border-right: 1px solid var(--line); font-size: 12px; font-weight: 700; transition: color 0.2s, background 0.2s; }
.digital-menu-local-nav a:first-child { border-radius: 10px 0px 0px 10px; }
.digital-menu-local-nav a:last-child { border-right: 0px; border-radius: 0px 10px 10px 0px; }
.digital-menu-local-nav a:hover { color: white; background: var(--ink); }
.digital-menu-section { padding: 96px max(5vw, 34px); }
.digital-menu-section > * { width: min(1180px, 100%); margin-inline: auto; }
.digital-menu-section-heading { margin-bottom: 42px; }
.digital-menu-section-heading.centered { text-align: center; }
.digital-menu-section-heading h2, .digital-menu-solution-intro h2 { margin: 14px 0px 0px; color: var(--ink); font-size: clamp(32px, 3.1vw, 46px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.38; }
.digital-menu-section-heading > p { max-width: 720px; margin: 16px auto 0px; color: var(--muted); font-size: 13px; line-height: 1.9; }
.digital-menu-concerns { padding-top: 112px; background: linear-gradient(rgb(255, 255, 255) 0%, rgb(244, 247, 251) 100%); }
.digital-menu-concern-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: 70px; }
.digital-menu-concern-list { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 20px; }
.digital-menu-concern-list article { position: relative; min-height: 205px; padding: 28px 28px 30px; overflow: hidden; background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(72, 49, 24, 0.08); border-radius: 18px; box-shadow: rgba(72, 49, 24, 0.08) 0px 18px 44px; transition: transform 0.25s, box-shadow 0.25s; }
.digital-menu-concern-list article::after { position: absolute; top: -34px; right: -34px; width: 110px; height: 110px; content: ""; background: radial-gradient(circle, rgba(198, 160, 100, 0.22), rgba(198, 160, 100, 0) 68%); pointer-events: none; }
.digital-menu-concern-list article:hover { box-shadow: rgba(72, 49, 24, 0.12) 0px 24px 52px; transform: translateY(-4px); }
.digital-menu-concern-list b { display: grid; place-items: center; width: 44px; height: 44px; color: var(--green); background: rgb(237, 247, 251); border: 1px solid rgba(32, 93, 122, 0.18); border-radius: 50%; font-size: 10px; letter-spacing: 0.08em; }
.digital-menu-concern-list i { display: none; }
.digital-menu-concern-list p { margin: 26px 0px 0px; color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.75; }
.digital-menu-image-frame { position: relative; margin: 0px; }
.digital-menu-image-frame img { display: block; width: 100%; height: 440px; object-fit: cover; }
.digital-menu-image-frame figcaption { position: absolute; right: 16px; bottom: 16px; padding: 8px 12px; color: white; background: rgba(72, 49, 24, 0.86); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; }
.digital-menu-solution { color: white; background: var(--ink); }
.digital-menu-solution-intro { margin-bottom: 50px; text-align: center; }
.digital-menu-solution-intro h2 { color: white; }
.digital-menu-solution-intro p { margin: 18px 0px 0px; color: rgba(255, 255, 255, 0.72); font-size: 13px; line-height: 1.9; }
.digital-menu-solution-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0px; background: transparent; border-top: 1px solid rgba(255, 255, 255, 0.24); border-bottom: 1px solid rgba(255, 255, 255, 0.24); }
.digital-menu-solution-grid article { position: relative; overflow: hidden; min-height: 270px; display: flex; flex-direction: column; justify-content: flex-end; padding: 42px 38px 40px; background: transparent; border: 0px; transition: background-color 0.35s; }
.digital-menu-solution-grid article:not(:first-child) { border-left: 1px solid rgba(255, 255, 255, 0.18); }
.digital-menu-solution-grid article::after { position: absolute; z-index: 0; top: 17px; right: 26px; content: attr(data-number); color: rgba(255, 255, 255, 0.043); font-size: 92px; font-weight: 300; letter-spacing: -0.08em; line-height: 1; pointer-events: none; }
.digital-menu-solution-grid article:hover { background-color: rgba(255, 255, 255, 0.035); }
.digital-menu-solution-card-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; margin-bottom: 40px; }
.digital-menu-solution-card-head span { color: var(--text-accent); font-size: 9px; font-weight: 800; letter-spacing: 0.2em; line-height: 1; }
.digital-menu-solution-card-head i { position: relative; width: 28px; height: 1px; background: rgba(154, 104, 39, 0.7); }
.digital-menu-solution-card-head i::after { position: absolute; top: -2px; right: 0px; width: 5px; height: 5px; content: ""; background: var(--brand-gold); border-radius: 50%; }
.digital-menu-solution-grid h3 { position: relative; z-index: 1; margin: 0px 0px 17px; font-size: 22px; font-weight: 600; letter-spacing: 0.035em; line-height: 1.55; }
.digital-menu-solution-grid p { position: relative; z-index: 1; margin: 0px; color: rgba(255, 255, 255, 0.66); font-size: 12px; line-height: 2; }
.digital-menu-effects { position: relative; overflow: hidden; padding-top: 82px; padding-bottom: 82px; background: var(--ink); }
.digital-menu-effects::before, .digital-menu-effects::after { position: absolute; inset: 0px; content: ""; pointer-events: none; }
.digital-menu-effects::before { inset: -10px; background: url("img/digital-menu-20261001/digital-menu-effects-bg-optimized.webp") center 48% / cover no-repeat; filter: brightness(0.82) saturate(0.88); transform: scale(1.025); }
.digital-menu-effects::after { background: linear-gradient(rgba(10, 31, 61, 0.4), rgba(10, 31, 61, 0.5)); }
.digital-menu-effects > * { position: relative; z-index: 1; }
.digital-menu-effects .digital-menu-section-heading h2 { color: white; }
.digital-menu-effects .digital-menu-section-heading > p { color: rgba(255, 255, 255, 0.7); }
.digital-menu-effect-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.digital-menu-effect-grid article { min-height: 218px; padding: 25px 23px; background: rgba(255, 255, 255, 0.88); border-top: 3px solid var(--green); box-shadow: rgba(6, 20, 42, 0.22) 0px 18px 38px; backdrop-filter: none; text-align: center; }
.digital-menu-effect-grid article > span { color: var(--green); font-size: 8px; font-weight: 900; letter-spacing: 0.18em; }
.digital-menu-effect-grid article > strong { min-height: 74px; display: flex; align-items: baseline; justify-content: center; gap: 2px; margin-top: 13px; color: var(--green); white-space: nowrap; }
.digital-menu-effect-grid article > strong em { font-family: "Helvetica Neue", Arial, "Noto Sans JP", sans-serif; font-size: clamp(36px, 2.9vw, 46px); font-style: normal; font-weight: 700; letter-spacing: 0px; line-height: 1; }
.digital-menu-effect-grid article > strong small { color: inherit; font-size: clamp(36px, 2.9vw, 46px); font-weight: 700; letter-spacing: 0px; }
.digital-menu-effect-grid article > strong small:empty { display: none; }
.digital-menu-effect-grid article:last-child > strong small { font-size: 11px; }
.digital-menu-effect-grid h3 { margin: 8px 0px 11px; font-size: 17px; font-weight: 700; }
.digital-menu-effect-grid p { margin: 0px; color: var(--muted); font-size: 11.5px; line-height: 1.85; }
.digital-menu-effect-note { margin-top: 18px; color: rgba(255, 255, 255, 0.74); font-size: 9px; line-height: 1.8; text-align: center; }
.digital-menu-operation { color: var(--ink); background: rgb(237, 243, 247); }
.digital-menu-operation .digital-menu-section-heading { max-width: 920px; }
.digital-menu-operation .digital-menu-section-heading h2 { color: var(--ink); }
.digital-menu-operation .digital-menu-section-heading h3 { margin: 28px 0px 0px; color: var(--ink); font-size: 22px; font-weight: 700; line-height: 1.55; }
.digital-menu-operation .digital-menu-section-heading p { max-width: 730px; margin-top: 18px; }
.digital-menu-display-demo { padding: 44px 48px 48px; color: var(--ink); background: white; box-shadow: rgba(72, 49, 24, 0.06) 0px 20px 45px; }
.digital-menu-layout-gallery { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 34px 22px; }
.digital-menu-layout-gallery article { min-width: 0px; }
.digital-menu-screen-media { position: relative; overflow: hidden; aspect-ratio: 16 / 3; background: rgb(12, 24, 38); border: 4px solid rgb(23, 34, 43); border-radius: 8px; }
.digital-menu-screen-media video, .digital-menu-screen-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.digital-menu-screen-media .screen-bezel { position: absolute; top: 0px; bottom: 0px; width: 3px; background: rgba(10, 18, 28, 0.5); pointer-events: none; }
.digital-menu-screen-media .screen-bezel-one { left: calc(33.333% - 1.5px); }
.digital-menu-screen-media .screen-bezel-two { left: calc(66.666% - 1.5px); }
.digital-menu-screen-media em { position: absolute; top: 8px; right: 8px; padding: 4px 10px; font-size: 9px; font-style: normal; font-weight: 700; letter-spacing: 0.08em; color: rgb(234, 244, 251); background: rgba(12, 26, 42, 0.74); border-radius: 999px; pointer-events: none; }
.digital-menu-gallery-note { margin: 18px 2px 0px; font-size: 12px; line-height: 1.7; color: var(--muted); }
.digital-menu-pattern { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 4px; min-height: 130px; }
.digital-menu-pattern > div { position: relative; min-width: 0px; overflow: hidden; color: white; border: 4px solid rgb(23, 34, 43); }
.digital-menu-pattern > div::after { position: absolute; inset: auto 0px 0px; height: 44%; content: ""; background: linear-gradient(0deg, rgba(12, 31, 49, 0.28), transparent); pointer-events: none; }
.digital-menu-pattern b, .digital-menu-pattern strong, .digital-menu-pattern small { position: relative; z-index: 1; }
.digital-menu-pattern b { font-size: 9px; letter-spacing: 0.08em; }
.digital-menu-pattern small { position: absolute; left: 8px; bottom: 7px; font-size: 6px; font-weight: 700; }
.digital-menu-pattern .menu-screen { display: flex; flex-direction: column; gap: 7px; padding: 13px 10px; background: rgb(40, 80, 66); }
.digital-menu-pattern .menu-screen::after { background: linear-gradient(0deg, rgba(9, 26, 25, 0.35), transparent 55%), radial-gradient(circle at 75% 30%, rgba(198, 160, 100, 0.2), transparent 35%); }
.digital-menu-pattern .menu-screen i { position: relative; z-index: 1; display: block; width: 78%; height: 2px; background: rgba(255, 255, 255, 0.52); }
.digital-menu-pattern .menu-screen i:nth-of-type(2) { width: 62%; }
.digital-menu-pattern .menu-screen i:nth-of-type(3) { width: 70%; }
.digital-menu-pattern .food-screen { display: flex; align-items: flex-end; padding: 12px 8px 27px; color: var(--ink); }
.digital-menu-pattern .food-screen::before { position: absolute; right: 7%; top: 14%; z-index: 0; width: 72px; height: 72px; content: ""; }
.digital-menu-pattern .food-screen::after { background: linear-gradient(0deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0)); }
.digital-menu-pattern .food-screen b { padding: 3px 5px; color: var(--ink); background: rgba(255, 255, 255, 0.76); }
.digital-menu-pattern .food-screen small { color: var(--ink); }
.digital-menu-pattern .food-salad { background: linear-gradient(145deg, transparent 58%, rgba(88, 157, 116, 0.18) 59%), rgb(234, 244, 230); }
.digital-menu-pattern .food-salad::before { border: 7px solid white; border-radius: 50%; background: radial-gradient(circle at 30% 32%, rgb(242, 123, 85) 0px, rgb(242, 123, 85) 7%, transparent 8%), radial-gradient(circle at 62% 29%, rgb(244, 202, 83) 0px, rgb(244, 202, 83) 7%, transparent 8%), radial-gradient(circle at 69% 64%, rgb(239, 109, 88) 0px, rgb(239, 109, 88) 8%, transparent 9%), radial-gradient(circle at 35% 69%, rgb(159, 202, 99) 0px, rgb(159, 202, 99) 9%, transparent 10%), radial-gradient(circle, rgb(109, 172, 102) 0px, rgb(109, 172, 102) 42%, rgb(216, 231, 201) 43%, rgb(216, 231, 201) 56%, transparent 57%); box-shadow: rgba(72, 49, 24, 0.13) 0px 8px 16px; }
.digital-menu-pattern .food-pasta { background: linear-gradient(145deg, transparent 58%, rgba(224, 139, 65, 0.16) 59%), rgb(255, 241, 223); }
.digital-menu-pattern .food-pasta::before { border: 7px solid white; border-radius: 50%; background: radial-gradient(circle at 63% 37%, rgb(223, 92, 62) 0px, rgb(223, 92, 62) 8%, transparent 9%), repeating-radial-gradient(rgb(239, 182, 79) 0px, rgb(239, 182, 79) 3px, rgb(217, 141, 53) 4px, rgb(217, 141, 53) 6px); box-shadow: rgba(72, 49, 24, 0.13) 0px 8px 16px; }
.digital-menu-pattern .food-burger { background: linear-gradient(145deg, transparent 58%, rgba(241, 188, 70, 0.2) 59%), rgb(255, 245, 205); }
.digital-menu-pattern .food-burger::before { top: 27%; height: 47px; border-radius: 35px 35px 16px 16px; background: linear-gradient(rgb(238, 184, 80) 0px, rgb(238, 184, 80) 26%, rgb(114, 166, 82) 27%, rgb(114, 166, 82) 40%, rgb(217, 83, 63) 41%, rgb(217, 83, 63) 52%, rgb(104, 66, 45) 53%, rgb(104, 66, 45) 72%, rgb(242, 186, 77) 73%); box-shadow: rgba(72, 49, 24, 0.14) 0px 8px 15px; }
.digital-menu-pattern .food-campaign { background: linear-gradient(145deg, rgb(114, 187, 213) 0px, rgb(114, 187, 213) 52%, rgb(255, 207, 85) 53%); }
.digital-menu-pattern .food-campaign::before { top: 18%; right: 12%; width: 66px; height: 66px; display: grid; place-items: center; content: "50%"; color: white; background: rgb(235, 109, 74); border: 5px solid rgba(255, 255, 255, 0.8); border-radius: 50%; font-size: 17px; font-weight: 900; transform: rotate(-8deg); }
.digital-menu-pattern .food-dessert { background: linear-gradient(145deg, transparent 58%, rgba(221, 132, 150, 0.16) 59%), rgb(249, 228, 231); }
.digital-menu-pattern .food-dessert::before { border: 14px solid rgb(230, 137, 155); border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgb(255, 244, 214) 0px, rgb(255, 244, 214) 4%, transparent 5%), radial-gradient(circle at 68% 42%, rgb(140, 196, 192) 0px, rgb(140, 196, 192) 4%, transparent 5%), radial-gradient(circle at 55% 72%, rgb(242, 204, 80) 0px, rgb(242, 204, 80) 4%, transparent 5%), rgb(242, 191, 203); box-shadow: rgba(72, 49, 24, 0.13) 0px 8px 16px; }
.digital-menu-pattern .food-drink { background: linear-gradient(145deg, transparent 58%, rgba(112, 82, 60, 0.13) 59%), rgb(238, 228, 213); }
.digital-menu-pattern .food-drink::before { top: 20%; right: 17%; width: 58px; height: 48px; border: 8px solid white; border-radius: 5px 5px 18px 18px; background: radial-gradient(rgb(244, 239, 232) 0px, rgb(244, 239, 232) 13%, rgb(175, 122, 84) 14%, rgb(175, 122, 84) 22%, rgb(117, 73, 47) 23%, rgb(117, 73, 47) 58%, rgb(91, 52, 36) 59%); box-shadow: rgb(238, 228, 213) 12px 2px 0px -5px, white 12px 2px 0px -2px, rgba(72, 49, 24, 0.13) 0px 8px 16px; }
.digital-menu-pattern .linked-screen { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 22px 26px; background: linear-gradient(90deg, rgba(72, 49, 24, 0.88), rgba(72, 49, 24, 0.12) 42%), linear-gradient(90deg, rgb(243, 214, 174) 0px, rgb(243, 214, 174) 33.1%, rgb(220, 235, 213) 33.2%, rgb(220, 235, 213) 66.4%, rgb(200, 222, 234) 66.5%); }
.digital-menu-pattern .linked-screen::before { position: absolute; left: 44%; top: 50%; width: 108px; height: 108px; content: ""; border: 10px solid rgba(255, 255, 255, 0.86); border-radius: 50%; background: radial-gradient(circle at 30% 35%, rgb(239, 108, 76) 0px, rgb(239, 108, 76) 7%, transparent 8%), radial-gradient(circle at 68% 36%, rgb(240, 195, 74) 0px, rgb(240, 195, 74) 6%, transparent 7%), radial-gradient(circle at 58% 67%, rgb(142, 184, 95) 0px, rgb(142, 184, 95) 9%, transparent 10%), radial-gradient(circle, rgb(103, 167, 101) 0px, rgb(103, 167, 101) 44%, rgb(217, 232, 208) 45%); box-shadow: rgba(72, 49, 24, 0.13) 0px 8px 18px; transform: translate(-50%, -50%); }
.digital-menu-pattern .linked-screen::after { inset: 0px; height: auto; background: linear-gradient(90deg, transparent 33%, rgba(72, 49, 24, 0.12) 33.2%, rgba(72, 49, 24, 0.12) 33.6%, transparent 33.8%, transparent 66.2%, rgba(72, 49, 24, 0.12) 66.4%, rgba(72, 49, 24, 0.12) 66.8%, transparent 67%), linear-gradient(90deg, rgba(72, 49, 24, 0.48), transparent 48%); }
.digital-menu-pattern .linked-screen b { color: rgb(169, 229, 251); }
.digital-menu-pattern .linked-screen strong { text-align: right; font-size: 15px; line-height: 1.55; }
.digital-menu-layout-gallery article > p { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 4px; margin: 12px 0px 0px; color: var(--green); font-size: 11px; font-weight: 700; line-height: 1.65; text-align: center; }
.digital-menu-layout-gallery article > p span { position: relative; padding-top: 10px; border-top: 1px solid var(--green); }
.digital-menu-layout-gallery article:first-child > p span:last-child { grid-column: span 2; color: rgb(182, 108, 54); border-color: rgb(182, 108, 54); }
.digital-menu-layout-gallery article:last-child > p span { grid-column: 1 / -1; color: rgb(182, 108, 54); border-color: rgb(182, 108, 54); }
.digital-menu-layout-gallery { gap: 42px 26px; }
.digital-menu-pattern { gap: 5px; min-height: 142px; padding: 5px; background: rgb(16, 27, 39); box-shadow: rgba(72, 49, 24, 0.12) 0px 12px 28px; }
.digital-menu-pattern > div { border: 0px; }
.digital-menu-pattern > div::after { height: 48%; background: linear-gradient(0deg, rgba(12, 31, 49, 0.34), transparent); }
.digital-menu-pattern b, .digital-menu-pattern strong, .digital-menu-pattern small, .digital-menu-pattern span, .digital-menu-pattern em { position: relative; z-index: 2; }
.digital-menu-pattern small { left: 10px; bottom: 9px; font-size: 7px; letter-spacing: 0.08em; }
.digital-menu-pattern .menu-screen { gap: 8px; padding: 16px 12px; background: radial-gradient(circle at 88% 18%, rgba(83, 178, 162, 0.22), transparent 26%), linear-gradient(145deg, rgb(23, 63, 54), rgb(40, 89, 76)); }
.digital-menu-pattern .single-promotion { display: flex; flex-direction: column; justify-content: space-between; padding: 14px 11px 30px; color: var(--ink); }
.digital-menu-pattern .single-promotion::before { position: absolute; right: -10px; bottom: 13px; width: 74px; height: 74px; content: ""; border-radius: 50%; box-shadow: rgba(72, 49, 24, 0.16) 0px 9px 20px; }
.digital-menu-pattern .single-promotion strong { font-size: 16px; line-height: 1.05; letter-spacing: -0.02em; }
.digital-menu-pattern .single-promotion em, .digital-menu-pattern .linked-promotion em { position: absolute; right: 8px; top: 8px; padding: 3px 5px; color: white; background: rgba(15, 35, 50, 0.72); border-radius: 999px; font-size: 6px; font-style: normal; font-weight: 800; letter-spacing: 0.08em; }
.digital-menu-pattern .single-burger { background: linear-gradient(145deg, rgb(255, 246, 207), rgb(244, 201, 99)); }
.digital-menu-pattern .single-burger::before { border-radius: 36px 36px 14px 14px; background: linear-gradient(rgb(234, 161, 60) 0px, rgb(234, 161, 60) 24%, rgb(125, 170, 73) 25%, rgb(125, 170, 73) 38%, rgb(217, 82, 61) 39%, rgb(217, 82, 61) 51%, rgb(97, 57, 39) 52%, rgb(97, 57, 39) 72%, rgb(239, 182, 75) 73%); }
.digital-menu-pattern .single-campaign { color: white; background: linear-gradient(145deg, rgb(81, 173, 202) 0px, rgb(81, 173, 202) 48%, rgb(242, 185, 67) 49%); }
.digital-menu-pattern .single-campaign::before { right: -5px; top: 24px; bottom: auto; border: 5px solid rgba(255, 255, 255, 0.74); background: rgb(237, 111, 84); }
.digital-menu-pattern .single-dessert { background: linear-gradient(145deg, rgb(255, 232, 237), rgb(234, 160, 176)); }
.digital-menu-pattern .single-dessert::before { border: 17px solid rgb(219, 111, 139); background: rgb(246, 202, 212); }
.digital-menu-pattern .single-cafe { background: linear-gradient(145deg, rgb(246, 234, 217), rgb(191, 150, 118)); }
.digital-menu-pattern .single-cafe::before { right: 2px; width: 64px; height: 54px; border: 8px solid rgb(255, 248, 237); border-radius: 4px 4px 22px 22px; background: radial-gradient(rgb(247, 238, 227) 0px, rgb(247, 238, 227) 13%, rgb(173, 118, 81) 14%, rgb(173, 118, 81) 24%, rgb(105, 64, 45) 25%, rgb(105, 64, 45) 62%); }
.digital-menu-pattern .linked-promotion { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 18px 22px; overflow: hidden; background: radial-gradient(circle at 69% 53%, rgb(249, 214, 165) 0px, rgb(249, 214, 165) 4%, transparent 4.5%), radial-gradient(circle at 69% 53%, rgb(189, 100, 61) 0px, rgb(189, 100, 61) 19%, rgb(215, 155, 86) 20%, rgb(215, 155, 86) 28%, rgb(251, 223, 170) 29%, rgb(251, 223, 170) 33%, transparent 34%), linear-gradient(115deg, rgb(228, 189, 116) 0px, rgb(228, 189, 116) 34%, rgb(240, 215, 164) 34%, rgb(240, 215, 164) 65%, rgb(186, 92, 59) 65%); }
.digital-menu-pattern .linked-promotion::before { position: absolute; left: 58%; top: 50%; width: 126px; height: 58px; content: ""; border-radius: 50%; background: linear-gradient(rgb(230, 170, 70) 0px, rgb(230, 170, 70) 24%, rgb(114, 163, 80) 25%, rgb(114, 163, 80) 38%, rgb(223, 88, 66) 39%, rgb(223, 88, 66) 51%, rgb(100, 58, 39) 52%, rgb(100, 58, 39) 70%, rgb(239, 182, 75) 71%); box-shadow: rgba(63, 36, 24, 0.22) 0px 12px 22px; transform: translate(-50%, -50%) rotate(-7deg); }
.digital-menu-pattern .linked-promotion::after { inset: 0px; height: auto; background: linear-gradient(100deg, rgba(15, 35, 50, 0.7), transparent 42%), linear-gradient(0deg, rgba(15, 35, 50, 0.34), transparent 48%); }
.digital-menu-pattern .linked-promotion-two { grid-column: span 2; }
.digital-menu-pattern .linked-promotion-three { grid-column: 1 / -1; padding-left: 30px; background: radial-gradient(circle at 56% 50%, rgb(255, 241, 188) 0px, rgb(255, 241, 188) 5%, transparent 5.5%), radial-gradient(circle at 56% 50%, rgb(121, 169, 87) 0px, rgb(121, 169, 87) 17%, rgb(227, 209, 155) 18%, rgb(227, 209, 155) 25%, rgb(249, 240, 213) 26%, rgb(249, 240, 213) 30%, transparent 31%), linear-gradient(112deg, rgb(36, 79, 68) 0px, rgb(36, 79, 68) 33%, rgb(242, 201, 102) 33%, rgb(242, 201, 102) 67%, rgb(239, 126, 84) 67%); }
.digital-menu-pattern .linked-promotion-three::before { left: 58%; width: 142px; height: 84px; border: 12px solid rgba(255, 255, 255, 0.84); background: radial-gradient(circle at 35% 35%, rgb(231, 94, 70) 0px, rgb(231, 94, 70) 7%, transparent 8%), radial-gradient(circle at 67% 33%, rgb(240, 192, 76) 0px, rgb(240, 192, 76) 7%, transparent 8%), radial-gradient(circle at 62% 68%, rgb(142, 183, 92) 0px, rgb(142, 183, 92) 9%, transparent 10%), rgb(104, 163, 104); }
.digital-menu-pattern .linked-kicker { color: rgb(255, 223, 135); font-size: 7px; font-weight: 800; letter-spacing: 0.16em; }
.digital-menu-pattern .linked-promotion strong { font-size: 23px; line-height: 0.86; letter-spacing: -0.04em; }
.digital-menu-pattern .linked-price { margin-top: 7px; font-size: 7px; font-weight: 800; letter-spacing: 0.1em; }
.digital-menu-pattern .screen-seam { position: absolute; z-index: 4; top: 0px; bottom: 0px; width: 5px; background: rgb(16, 27, 39); box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px; }
.digital-menu-pattern .screen-seam-half { left: calc(50% - 2px); }
.digital-menu-pattern .screen-seam-third { left: calc(33.333% - 2px); }
.digital-menu-pattern .screen-seam-two-thirds { left: calc(66.666% - 2px); }
.digital-menu-pattern .linked-promotion-two { background: linear-gradient(90deg, rgba(15, 35, 50, 0.76), rgba(15, 35, 50, 0.04) 55%), url("img/digital-menu-20261001/menu-video-linked-2.gif") center center / cover no-repeat; }
.digital-menu-pattern .linked-promotion-three { background: linear-gradient(90deg, rgba(15, 35, 50, 0.82), rgba(15, 35, 50, 0.04) 46%), url("img/digital-menu-20261001/menu-video-linked-3.gif") center center / cover no-repeat; }
.digital-menu-pattern .single-dessert { color: white; background: linear-gradient(90deg, rgba(72, 49, 24, 0.58), transparent 64%), url("img/digital-menu-20261001/menu-video-dessert.gif") center center / cover no-repeat; }
.digital-menu-pattern .single-cafe { color: white; background: linear-gradient(90deg, rgba(72, 49, 24, 0.62), transparent 64%), url("img/digital-menu-20261001/menu-video-cafe.gif") center center / cover no-repeat; }
.digital-menu-pattern .linked-promotion-two::before, .digital-menu-pattern .linked-promotion-three::before, .digital-menu-pattern .single-dessert::before, .digital-menu-pattern .single-cafe::before { content: none; }
.digital-menu-layout-gallery article > p { gap: 5px; margin: 13px 5px 0px; font-size: 10px; }
.digital-menu-layout-gallery article:first-child > p span:last-child, .digital-menu-layout-gallery article:last-child > p span { color: rgb(181, 92, 46); border-color: rgb(181, 92, 46); }
.digital-menu-screens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.digital-menu-screens > div { position: relative; aspect-ratio: 16 / 9; display: flex; flex-direction: column; justify-content: space-between; padding: 22px; color: white; background: linear-gradient(140deg, rgba(72, 49, 24, 0.48), rgba(32, 93, 122, 0.85)), url("img/digital-menu-20261001/hero-cafe-optimized.webp") center center / cover; border: 7px solid rgb(17, 26, 36); box-shadow: rgba(72, 49, 24, 0.15) 0px 12px 22px; }
.digital-menu-screens small { font-size: 9px; font-weight: 900; }
.digital-menu-screens strong { font-size: 13px; letter-spacing: 0.08em; }
.digital-menu-screens span { position: absolute; right: 12px; bottom: 10px; color: rgba(255, 255, 255, 0.55); font-size: 8px; letter-spacing: 0.18em; }
.digital-menu-operation-copy { max-width: 800px; margin: 38px auto 0px; text-align: center; }
.digital-menu-operation-copy h3 { margin: 0px 0px 14px; font-size: 22px; font-weight: 700; }
.digital-menu-operation-copy p { margin: 0px; color: var(--muted); font-size: 13px; line-height: 1.9; }
.digital-menu-distribution { background: rgb(237, 243, 247); }
.digital-menu-distribution .digital-menu-section-heading { max-width: 880px; margin-bottom: 48px; }
.digital-menu-distribution .digital-menu-section-heading > p { max-width: 800px; margin-top: 18px; font-size: 13px; line-height: 2.05; }
.digital-menu-distribution-diagram { display: grid; grid-template-columns: 280px 90px 1fr; align-items: center; gap: 22px; padding: 44px; background: white; }
.digital-menu-distribution-source { min-height: 200px; display: flex; flex-direction: column; justify-content: center; padding: 32px; color: white; background: var(--ink); }
.digital-menu-distribution-source span { color: var(--text-accent); font-size: 9px; font-weight: 900; letter-spacing: 0.18em; }
.digital-menu-distribution-source strong { margin: 18px 0px 9px; font-size: 23px; font-weight: 600; }
.digital-menu-distribution-source small { color: rgba(255, 255, 255, 0.6); font-size: 10px; line-height: 1.7; }
.digital-menu-distribution-diagram > i { position: relative; height: 1px; background: var(--green); }
.digital-menu-distribution-diagram > i::after { position: absolute; right: 0px; top: -4px; width: 8px; height: 8px; content: ""; border-top: 1px solid var(--green); border-right: 1px solid var(--green); transform: rotate(45deg); }
.digital-menu-distribution-targets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.digital-menu-distribution-targets > div { position: relative; aspect-ratio: 9 / 14; display: flex; flex-direction: column; justify-content: space-between; padding: 15px; color: white; background: linear-gradient(155deg, #88bed0, var(--green)); border: 6px solid rgb(19, 32, 42); box-shadow: rgba(72, 49, 24, 0.12) 0px 10px 20px; }
.digital-menu-distribution-targets span { font-size: 9px; font-weight: 700; }
.digital-menu-distribution-targets b { font-size: 15px; }
.distribution-demo { display: grid; grid-template-columns: 270px 120px minmax(0px, 1fr); align-items: center; gap: 28px; padding: 48px 54px; background: white; box-shadow: rgba(72, 49, 24, 0.06) 0px 20px 45px; }
.distribution-demo-guide { position: relative; grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; padding: 18px 20px 18px 24px; overflow: hidden; color: var(--ink); background: radial-gradient(circle at 86% 42%, rgba(85, 201, 229, 0.12), transparent 28%), linear-gradient(105deg, rgb(248, 252, 254), rgb(238, 246, 250)); border: 1px solid rgb(216, 230, 237); border-radius: 12px; box-shadow: rgba(72, 49, 24, 0.08) 0px 10px 24px; }
.distribution-demo-guide::before { position: absolute; left: 0px; top: 0px; bottom: 0px; width: 4px; content: ""; background: linear-gradient(rgb(101, 204, 226), rgb(29, 120, 150)); }
.distribution-demo-guide-mark { position: relative; flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; background: linear-gradient(145deg, rgb(22, 54, 93), rgb(32, 95, 126)); border: 1px solid rgba(31, 120, 150, 0.35); border-radius: 50%; box-shadow: rgba(72, 49, 24, 0.18) 0px 8px 18px; }
.distribution-demo-guide-mark::before, .distribution-demo-guide-mark::after { position: absolute; content: ""; border: 1px solid rgba(37, 145, 175, 0.42); border-radius: 50%; animation: 1.8s ease-out 0s infinite normal none running distribution-guide-pulse; }
.distribution-demo-guide-mark::before { inset: 7px; }
.distribution-demo-guide-mark::after { inset: 1px; animation-delay: 0.45s; }
.distribution-demo-guide-mark i { width: 7px; height: 7px; background: rgb(223, 250, 255); border-radius: 50%; box-shadow: rgba(127, 215, 235, 0.9) 0px 0px 14px; }
.distribution-demo-guide p { flex: 1 1 0%; display: grid; gap: 3px; margin: 0px; }
.distribution-demo-guide small { color: rgb(39, 142, 172); font-size: 8px; font-weight: 900; letter-spacing: 0.2em; }
.distribution-demo-guide b { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; }
.distribution-demo-guide p > span { color: rgb(102, 124, 144); font-size: 10px; line-height: 1.65; }
.distribution-demo-guide em { padding: 7px 12px; color: white; background: var(--ink); border: 1px solid var(--ink); border-radius: 999px; font-size: 8px; font-style: normal; font-weight: 800; letter-spacing: 0.14em; }
.distribution-phone-column { display: grid; justify-items: center; gap: 18px; }
.distribution-phone { position: relative; width: 232px; padding: 8px; background: rgb(16, 17, 21); border-radius: 44px; box-shadow: rgb(76, 80, 90) 0px 0px 0px 2px, rgb(23, 24, 28) 0px 0px 0px 3.5px, rgba(10, 18, 30, 0.38) 0px 26px 46px; }
.distribution-phone::before { position: absolute; top: 96px; left: -5.5px; width: 3px; height: 76px; content: ""; background: linear-gradient(rgb(76, 80, 90), rgb(76, 80, 90)) 0px 0px / 3px 32px no-repeat, linear-gradient(rgb(76, 80, 90), rgb(76, 80, 90)) 0px 44px / 3px 32px no-repeat; border-radius: 2px; }
.distribution-phone::after { position: absolute; top: 118px; right: -5.5px; width: 3px; height: 52px; content: ""; background: rgb(76, 80, 90); border-radius: 2px; }
.distribution-phone-status { position: relative; z-index: 2; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 6px 18px 0px; color: var(--ink); font-size: 8.5px; font-weight: 800; }
.distribution-phone-status::after { position: absolute; left: 50%; top: 7px; width: 70px; height: 20px; content: ""; background: rgb(10, 12, 16); border-radius: 999px; transform: translateX(-50%); box-shadow: rgba(255, 255, 255, 0.08) 0px 0px 2px inset; }
.distribution-phone-status i { width: 19px; height: 8px; border: 1px solid rgba(72, 49, 24, 0.65); border-radius: 2.5px; background: linear-gradient(90deg, var(--ink), var(--ink)) 1.5px 50% / 11px 4px no-repeat; }
.distribution-phone-screen { position: relative; display: flex; flex-direction: column; height: 480px; overflow: hidden; color: var(--ink); background: radial-gradient(circle at 78% 10%, rgba(105, 214, 211, 0.26), transparent 28%), linear-gradient(160deg, rgb(243, 248, 251), rgb(219, 232, 240)); border-radius: 37px; }
.distribution-phone-screen::after { position: absolute; bottom: 7px; left: 50%; z-index: 4; width: 86px; height: 4px; content: ""; background: rgba(16, 26, 41, 0.28); border-radius: 999px; transform: translateX(-50%); pointer-events: none; }
.distribution-app-home, .distribution-app-library, .distribution-app-ready, .distribution-app-progress, .distribution-app-success { flex: 1 1 auto; min-height: 0px; }
.distribution-app-library { overflow-y: auto; }
.distribution-app-home { display: flex; flex-direction: column; align-items: center; padding: 52px 22px 28px; }
.distribution-app-home > p { margin: 0px 0px 42px; font-size: 13px; font-weight: 700; }
.distribution-app-home button { display: grid; justify-items: center; gap: 10px; padding: 0px; color: var(--ink); background: transparent; border: 0px; cursor: pointer; }
.distribution-app-home button > span { position: relative; width: 84px; height: 84px; display: grid; place-items: center; padding: 15px; background: linear-gradient(145deg, rgb(21, 47, 91), rgb(13, 29, 60)); border-radius: 22px; box-shadow: rgba(72, 49, 24, 0.24) 0px 12px 24px; transition: transform 0.2s, box-shadow 0.2s; }
.distribution-demo.is-home .distribution-app-home button > span::after { position: absolute; inset: -10px; content: ""; border: 2px solid rgba(55, 171, 202, 0.58); border-radius: 29px; pointer-events: none; animation: 1.65s ease-out 0s infinite normal none running distribution-app-pulse; }
.distribution-app-home button:hover > span { transform: translateY(-3px); box-shadow: rgba(72, 49, 24, 0.3) 0px 16px 30px; }
.distribution-app-home button img { width: 100%; height: 100%; object-fit: contain; }
.distribution-app-home button b { font-size: 12px; }
.distribution-app-home > small { margin-top: auto; color: rgb(104, 128, 153); font-size: 9px; }
.distribution-app-library, .distribution-app-ready { padding: 20px 16px; }
.distribution-app-library header, .distribution-app-ready header { display: flex; align-items: center; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid rgba(72, 49, 24, 0.12); }
.distribution-app-library header img, .distribution-app-ready header img { width: 25px; height: 25px; padding: 4px; object-fit: contain; background: var(--ink); border-radius: 7px; }
.distribution-app-library header b, .distribution-app-ready header b { font-size: 11px; }
.distribution-app-library > p { margin: 22px 0px 12px; font-size: 10px; font-weight: 700; }
.distribution-app-library > button { width: 100%; padding: 0px 0px 12px; overflow: hidden; color: var(--ink); text-align: left; background: white; border: 2px solid rgb(88, 185, 213); border-radius: 12px; box-shadow: rgba(72, 49, 24, 0.12) 0px 10px 22px; cursor: pointer; }
.distribution-app-library > button > img { width: 100%; height: 106px; display: block; object-fit: cover; }
.distribution-app-library > button > span { display: grid; gap: 2px; padding: 10px 11px 0px; }
.distribution-app-library > button b { font-size: 9px; }
.distribution-app-library > button small { color: rgb(107, 129, 149); font-size: 8px; }
.distribution-app-library > button > i { display: inline-block; margin: 9px 11px 0px; padding: 3px 8px; color: white; background: var(--green); border-radius: 999px; font-size: 7px; font-style: normal; font-weight: 700; }
.distribution-app-ready > img { width: 100%; height: 126px; display: block; margin-top: 20px; object-fit: cover; border-radius: 10px; }
.distribution-app-ready > p { display: grid; gap: 3px; margin: 14px 0px 18px; }
.distribution-app-ready > p b { font-size: 10px; }
.distribution-app-ready > p small { color: rgb(107, 129, 149); font-size: 8px; }
.distribution-app-ready > button { width: 100%; padding: 12px; color: white; background: linear-gradient(90deg, rgb(27, 120, 150), rgb(56, 168, 193)); border: 0px; border-radius: 9px; box-shadow: rgba(31, 127, 157, 0.25) 0px 9px 20px; font-size: 11px; font-weight: 800; cursor: pointer; }
.distribution-app-progress, .distribution-app-success { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; text-align: center; }
.distribution-app-progress > span { display: flex; gap: 6px; margin-bottom: 24px; }
.distribution-app-progress > span i { width: 9px; height: 9px; background: rgb(53, 166, 194); border-radius: 50%; animation: 0.75s ease-in-out 0s infinite alternate none running distribution-loading; }
.distribution-app-progress > span i:nth-child(2) { animation-delay: 0.18s; }
.distribution-app-progress > span i:nth-child(3) { animation-delay: 0.36s; }
.distribution-app-progress b, .distribution-app-success b { font-size: 14px; }
.distribution-app-progress small, .distribution-app-success small { margin-top: 8px; color: rgb(107, 129, 149); font-size: 9px; line-height: 1.7; }
.distribution-app-success > span { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 22px; color: white; background: rgb(42, 151, 122); border-radius: 50%; font-size: 24px; box-shadow: rgba(42, 151, 122, 0.24) 0px 12px 24px; }
.distribution-app-success button { margin-top: 28px; padding: 9px 16px; color: var(--ink); background: transparent; border: 1px solid rgba(72, 49, 24, 0.24); border-radius: 999px; font-size: 9px; font-weight: 700; cursor: pointer; }
.distribution-phone-caption { display: grid; gap: 4px; margin: 0px; text-align: center; }
.distribution-phone-caption span, .distribution-receiver > p span { color: var(--green); font-size: 8px; font-weight: 900; letter-spacing: 0.14em; }
.distribution-phone-caption b, .distribution-receiver > p b { font-size: 12px; }
.distribution-transfer { display: grid; align-content: center; gap: 12px; min-width: 0px; text-align: center; }
.distribution-transfer > span { position: relative; height: 1px; background: rgba(72, 49, 24, 0.28); }
.distribution-transfer > span::after { position: absolute; right: 0px; top: -4px; width: 8px; height: 8px; content: ""; border-top: 1px solid var(--green); border-right: 1px solid var(--green); transform: rotate(45deg); }
.distribution-transfer > span i { position: absolute; left: 0px; top: -5px; width: 11px; height: 11px; opacity: 0; background: rgb(85, 201, 229); border-radius: 50%; box-shadow: rgba(85, 201, 229, 0.14) 0px 0px 0px 7px; }
.distribution-transfer > span.is-moving i { opacity: 1; animation: 1.05s ease-in-out 0s infinite normal none running distribution-transfer; }
.distribution-transfer small { color: rgb(124, 145, 165); font-size: 7px; font-weight: 800; letter-spacing: 0.15em; }
.distribution-receiver { min-width: 0px; }
.distribution-screen-wall { position: relative; aspect-ratio: 16 / 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0px; padding: 6px; overflow: hidden; background: rgb(5, 9, 14); box-shadow: rgba(72, 49, 24, 0.18) 0px 18px 32px; }
.distribution-screen-wall::after { position: absolute; z-index: 3; inset: 6px; content: ""; pointer-events: none; background: linear-gradient(90deg, transparent 0px, transparent calc(33.333% - 4px), rgb(5, 9, 14) calc(33.333% - 4px), rgb(5, 9, 14) calc(33.333% + 4px), transparent calc(33.333% + 4px), transparent calc(66.666% - 4px), rgb(5, 9, 14) calc(66.666% - 4px), rgb(5, 9, 14) calc(66.666% + 4px), transparent calc(66.666% + 4px)); }
.distribution-screen-content { position: absolute; z-index: 0; inset: 6px; opacity: 0; background: rgb(5, 9, 14); transition: opacity 0.4s; }
.distribution-screen-wall > span { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 14px; color: white; background: radial-gradient(circle at 72% 24%, rgba(96, 208, 229, 0.22), transparent 26%), linear-gradient(155deg, rgb(115, 173, 193), rgb(34, 99, 126)); border: 1px solid rgba(255, 255, 255, 0.16); transition: background 0.4s; }
.distribution-screen-wall > span small { font-size: 7px; font-weight: 800; letter-spacing: 0.08em; }
.distribution-screen-wall > span b { font-size: 11px; transition: opacity 0.25s; }
.distribution-receiver.is-received .distribution-screen-content { opacity: 1; }
.distribution-receiver.is-received .distribution-screen-wall > span { background: transparent; }
.distribution-receiver.is-received .distribution-screen-wall > span small, .distribution-receiver.is-received .distribution-screen-wall > span b { opacity: 0; }
.distribution-receiver > p { display: grid; gap: 4px; margin: 18px 0px 0px; }
.distribution-app-library > button + button { margin-top: 10px; }
.distribution-app-library > button > img { height: 72px; }
.distribution-screen-content video { display: block; width: 100%; height: 100%; object-fit: cover; background: rgb(5, 9, 14); }
.distribution-demo-guide { flex-wrap: wrap; }
.demo-auto-pill { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; padding: 6px 12px; color: var(--green); background: rgba(85, 201, 229, 0.12); border: 1px solid rgba(85, 201, 229, 0.35); border-radius: 999px; font-size: 9px; font-weight: 800; }
.demo-auto-pill i { width: 6px; height: 6px; background: rgb(47, 174, 116); border-radius: 50%; animation: 1.6s ease-in-out 0s infinite normal none running gdn-live-blink; }
.distribution-phone-screen button { position: relative; }
.tap-pulse { z-index: 3; align-items: center; gap: 5px; pointer-events: none; position: absolute !important; inset: 7px 7px auto auto !important; display: inline-flex !important; width: auto !important; height: auto !important; padding: 0px !important; background: none !important; border: 0px !important; box-shadow: none !important; }
.tap-pulse i { position: relative; width: 9px; height: 9px; background: rgb(85, 201, 229); border-radius: 50%; }
.tap-pulse i::before, .tap-pulse i::after { position: absolute; inset: 0px; content: ""; border: 1.5px solid rgba(85, 201, 229, 0.75); border-radius: 50%; animation: 1.8s ease-out 0s infinite normal none running tap-pulse-ring; }
.tap-pulse i::after { animation-delay: 0.9s; }
.tap-pulse em { padding: 2px 7px; color: white; background: var(--ink); border-radius: 999px; font-size: 7px; font-style: normal; font-weight: 900; letter-spacing: 0.1em; box-shadow: rgba(72, 49, 24, 0.3) 0px 4px 10px; }
@keyframes tap-pulse-ring { 
  0% { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(3.2); opacity: 0; }
}
.distribution-global-slot { grid-column: 1 / -1; margin-top: 10px; }
.gdn { width: min(1180px, 100%); margin-right: auto; margin-left: auto; padding: 24px 26px 16px; color: rgb(232, 241, 248); background: radial-gradient(circle at 78% 8%, rgba(85, 201, 229, 0.12), transparent 42%), linear-gradient(170deg, rgb(13, 27, 46), rgb(19, 39, 63)); border-radius: 14px; overflow: hidden; }
.gdn-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.gdn-head-copy { display: grid; gap: 7px; }
.gdn-eyebrow { display: inline-flex; align-items: center; gap: 7px; color: rgb(127, 212, 239); font-size: 8px; font-weight: 900; letter-spacing: 0.16em; }
.gdn-live { width: 6px; height: 6px; background: rgb(105, 240, 196); border-radius: 50%; animation: 1.6s ease-in-out 0s infinite normal none running gdn-live-blink; }
.gdn-head-copy > b { font-size: 17px; }
.gdn-head-copy > p { max-width: 560px; margin: 0px; color: rgba(232, 241, 248, 0.68); font-size: 10.5px; line-height: 1.8; }
.gdn-broadcast { flex: 0 0 auto; padding: 12px 22px; color: rgb(4, 34, 46); background: linear-gradient(90deg, rgb(70, 200, 232), rgb(124, 232, 205)); border: 0px; border-radius: 999px; font-size: 11.5px; font-weight: 800; cursor: pointer; box-shadow: rgba(70, 200, 232, 0.3) 0px 10px 24px; transition: transform 0.2s, box-shadow 0.2s; }
.gdn-broadcast:hover { transform: translateY(-2px); box-shadow: rgba(70, 200, 232, 0.4) 0px 14px 28px; }
.gdn-map { position: relative; margin-top: 16px; }
.gdn-canvas { position: relative; aspect-ratio: 3 / 1; }
.gdn-cards { display: contents; }
.gdn-dots { position: absolute; inset: 0px; width: 100%; height: 100%; display: block; }
.gdn-lines { position: absolute; inset: 0px; width: 100%; height: 100%; overflow: visible; }
.gdn-route { fill: none; stroke: rgba(127, 212, 239, 0.16); stroke-width: 0.18; stroke-dasharray: 0.012, 0.018; }
.gdn-route-active { fill: none; stroke: rgb(85, 201, 229); stroke-width: 0.3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(rgba(85, 201, 229, 0.8) 0px 0px 0.6px); animation: auto linear 0s 1 normal forwards running gdn-draw; }
.gdn-packet { fill: rgb(185, 241, 255); }
.gdn-packet-glow { fill: rgba(85, 201, 229, 0.3); }
.gdn-leader { stroke: rgba(157, 184, 204, 0.28); stroke-width: 0.1; }
.gdn-node { fill: rgb(125, 157, 182); transition: fill 0.3s; }
.gdn-node.is-on { fill: rgb(124, 232, 205); }
.gdn-ping { fill: none; stroke: rgb(124, 232, 205); stroke-width: 0.22; animation: 1s ease-out 0s 1 normal forwards running gdn-ping; }
.gdn-hq-dot { fill: rgb(255, 214, 107); }
.gdn-hq-pulse { fill: none; stroke: rgba(255, 214, 107, 0.8); stroke-width: 0.18; animation: 2.4s ease-out 0s infinite normal none running gdn-ping; }
.gdn-hq { position: absolute; transform: translate(-50%, -100%); display: grid; gap: 1px; padding: 6px 12px; color: white; text-align: left; background: rgba(255, 214, 107, 0.14); border: 1px solid rgba(255, 214, 107, 0.45); border-radius: 9px; cursor: pointer; transition: background 0.25s, transform 0.25s; }
.gdn-hq:hover { background: rgba(255, 214, 107, 0.26); }
.gdn-hq small { color: rgb(255, 214, 107); font-size: 7px; font-weight: 900; letter-spacing: 0.12em; }
.gdn-hq b { font-size: 10.5px; }
.gdn-site { position: absolute; transform: translate(-50%, 0px); display: grid; gap: 4px; justify-items: center; width: 88px; padding: 7px 6px 6px; color: rgb(232, 241, 248); text-align: center; background: rgba(11, 24, 41, 0.78); border: 1px solid rgba(127, 212, 239, 0.22); border-radius: 10px; cursor: pointer; transition: border-color 0.3s, box-shadow 0.3s, transform 0.2s; }
.gdn-site:hover { transform: translate(-50%, -2px); border-color: rgba(127, 212, 239, 0.55); }
.gdn-site.is-flying { border-color: rgba(127, 212, 239, 0.6); }
.gdn-site.is-arrived { border-color: rgba(124, 232, 205, 0.65); box-shadow: rgba(85, 201, 229, 0.25) 0px 0px 18px; }
.gdn-screen { position: relative; display: block; width: 68px; height: 38px; overflow: hidden; background: rgb(10, 21, 35); border: 1px solid rgba(127, 212, 239, 0.25); border-radius: 4px; }
.gdn-screen i { position: absolute; inset: 0px; display: grid; place-items: center; color: rgba(232, 241, 248, 0.4); font-size: 6.5px; font-style: normal; font-weight: 800; letter-spacing: 0.12em; }
.gdn-screen img { display: block; width: 100%; height: 100%; object-fit: cover; animation: 0.5s ease 0s 1 normal none running gdn-screen-on; }
.gdn-site-meta { display: grid; gap: 1px; }
.gdn-site-meta b { font-size: 8.5px; line-height: 1.3; }
.gdn-site-meta small { color: rgba(232, 241, 248, 0.5); font-size: 6.5px; font-weight: 800; letter-spacing: 0.12em; }
.gdn-timer { position: absolute; top: -8px; right: -7px; min-width: 34px; padding: 3px 7px; color: rgba(232, 241, 248, 0.55); background: rgb(16, 35, 58); border: 1px solid rgba(127, 212, 239, 0.3); border-radius: 999px; font-size: 7.5px; font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; transition: color 0.25s, border-color 0.25s, background 0.25s; }
.gdn-timer.is-run { color: rgb(127, 212, 239); border-color: rgba(127, 212, 239, 0.7); }
.gdn-timer.is-done { color: rgb(5, 42, 30); background: rgb(124, 232, 205); border-color: rgb(124, 232, 205); }
.gdn-timer.is-done::before { content: "✓ "; }
.gdn-race { display: grid; gap: 10px; margin-top: 20px; padding: 14px 16px; background: rgba(8, 18, 32, 0.55); border: 1px solid rgba(127, 212, 239, 0.14); border-radius: 10px; }
.gdn-race-row { display: grid; grid-template-columns: 132px minmax(0px, 1fr) 220px; align-items: center; gap: 14px; }
.gdn-race-label { color: rgba(232, 241, 248, 0.75); font-size: 9.5px; font-weight: 800; }
.gdn-race-track { position: relative; display: block; height: 6px; overflow: hidden; background: rgba(255, 255, 255, 0.09); border-radius: 999px; }
.gdn-race-bar { display: block; width: 0px; height: 100%; border-radius: 999px; }
.gdn-race-paper { background: rgb(201, 138, 94); }
.gdn-race-paper.is-run { animation: 4s ease-out 0s 1 normal forwards running gdn-race-paper; }
.gdn-race-viora { background: linear-gradient(90deg, rgb(70, 200, 232), rgb(124, 232, 205)); box-shadow: rgba(85, 201, 229, 0.45) 0px 0px 10px; }
.gdn-race-viora.is-run { animation: auto ease-out 0s 1 normal forwards running gdn-race-viora; }
.gdn-race-value { color: rgba(232, 241, 248, 0.6); font-size: 8.5px; }
.gdn-race-value b { color: rgba(232, 241, 248, 0.9); font-size: 9.5px; }
.gdn-race-value-viora b { color: rgb(124, 232, 205); }
.gdn-note { margin: 12px 2px 0px; color: rgba(232, 241, 248, 0.38); font-size: 8.5px; }
@keyframes gdn-draw { 
  100% { stroke-dashoffset: 0; }
}
@keyframes gdn-ping { 
  0% { r: 1; opacity: 0.9; }
  100% { r: 4.6; opacity: 0; }
}
@keyframes gdn-live-blink { 
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
@keyframes gdn-screen-on { 
  0% { opacity: 0; filter: brightness(2.2); }
  100% { opacity: 1; filter: brightness(1); }
}
@keyframes gdn-race-paper { 
  100% { width: 3.5%; }
}
@keyframes gdn-race-viora { 
  100% { width: 100%; }
}
@keyframes distribution-loading { 
  100% { transform: translateY(-8px); opacity: 0.35; }
}
@keyframes distribution-guide-pulse { 
  0% { opacity: 0.95; transform: scale(0.72); }
  100% { opacity: 0; transform: scale(1.35); }
}
@keyframes distribution-app-pulse { 
  0% { opacity: 0.8; transform: scale(0.9); }
  100% { opacity: 0; transform: scale(1.18); }
}
@keyframes distribution-transfer { 
  0% { left: 0px; }
  100% { left: calc(100% - 11px); }
}
@media (max-width: 1000px) {.distribution-demo { grid-template-columns: 240px 70px minmax(0px, 1fr); gap: 18px; padding: 38px 28px; }
.gdn-head { flex-direction: column; align-items: flex-start; gap: 14px; }
.gdn-race-row { grid-template-columns: 110px minmax(0px, 1fr) 150px; gap: 10px; }}
@media (max-width: 700px) {.digital-menu-distribution .digital-menu-section-heading > p { font-size: 12px; line-height: 1.9; }
.distribution-demo { grid-template-columns: 1fr; gap: 26px; padding: 30px 20px; }
.gdn { padding: 18px 14px 12px; }
.gdn-cards { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 8px; margin-top: 12px; }
.gdn-site { position: relative; transform: none; width: 100%; left: auto !important; top: auto !important; }
.gdn-site:hover { transform: none; }
.gdn-screen { width: 100%; height: 34px; }
.gdn-site-meta b { font-size: 7.5px; }
.gdn-site-meta small { font-size: 5.5px; }
.gdn-timer { top: -7px; right: -5px; min-width: 28px; padding: 2px 5px; font-size: 6.5px; }
.gdn-leader { display: none; }
.gdn-hq { padding: 4px 8px; }
.gdn-hq b { font-size: 8.5px; }
.gdn-race-row { grid-template-columns: minmax(0px, 1fr); gap: 5px; }
.gdn-race-value { order: 3; }
.distribution-screen-wall > span { padding: 7px 8px; }
.distribution-screen-wall > span b { font-size: 8px; }
.distribution-demo-guide { align-items: flex-start; padding: 15px; }
.distribution-demo-guide-mark { flex-basis: 36px; width: 36px; height: 36px; }
.distribution-demo-guide b { font-size: 11px; line-height: 1.55; }
.distribution-demo-guide em { padding: 5px 8px; font-size: 7px; }
.distribution-transfer { width: 1px; height: 54px; justify-self: center; }
.distribution-transfer > span { width: 1px; height: 54px; }
.distribution-transfer > span::after { right: -4px; top: auto; bottom: 0px; transform: rotate(135deg); }
.distribution-transfer > span i { left: -5px; top: 0px; }
.distribution-transfer > span.is-moving i { animation-name: distribution-transfer-mobile; }
.distribution-transfer small { display: none; }
.distribution-receiver > p { text-align: center; }}
@keyframes distribution-transfer-mobile { 
  0% { top: 0px; }
  100% { top: calc(100% - 11px); }
}
.digital-menu-installation { padding-top: 82px; padding-bottom: 82px; background: rgb(245, 248, 250); }
.digital-menu-installation .digital-menu-section-heading { margin-bottom: 38px; }
.digital-menu-installation-grid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 18px; }
.digital-menu-installation-grid article { padding: 20px; background: white; border: 1px solid rgba(72, 49, 24, 0.08); border-radius: 12px; box-shadow: rgba(72, 49, 24, 0.055) 0px 14px 30px; }
.digital-menu-installation-grid h3 { margin: 0px 0px 15px; color: var(--ink); font-size: 16px; font-weight: 700; text-align: center; }
.digital-menu-installation-grid article > p { margin: 12px 0px 0px; color: var(--muted); font-size: 10px; text-align: center; }
.digital-menu-installation-scene { position: relative; height: 190px; overflow: hidden; background: linear-gradient(90deg, rgb(214, 197, 173) 0px, rgb(214, 197, 173) 11%, transparent 11%, transparent 89%, rgb(214, 197, 173) 89%), linear-gradient(rgb(245, 246, 246) 0px, rgb(245, 246, 246) 73%, rgb(232, 236, 239) 73%); border: 1px solid rgba(72, 49, 24, 0.08); }
.digital-menu-installation-width { position: absolute; z-index: 2; left: 20%; right: 20%; top: 37px; height: 1px; background: rgba(72, 49, 24, 0.48); }
.digital-menu-installation-width::before, .digital-menu-installation-width::after { position: absolute; top: -2px; width: 5px; height: 5px; content: ""; background: var(--ink); border-radius: 50%; }
.digital-menu-installation-width::before { left: -2px; }
.digital-menu-installation-width::after { right: -2px; }
.digital-menu-installation-width span { position: absolute; left: 50%; bottom: 7px; color: var(--ink); font-size: 9px; white-space: nowrap; transform: translateX(-50%); }
.digital-menu-installation-height { position: absolute; z-index: 2; left: 14.5%; top: 52px; width: 1px; height: 35px; background: rgba(72, 49, 24, 0.48); }
.digital-menu-installation-height::before, .digital-menu-installation-height::after { position: absolute; left: -2px; width: 5px; height: 5px; content: ""; background: var(--ink); border-radius: 50%; }
.digital-menu-installation-height::before { top: -2px; }
.digital-menu-installation-height::after { bottom: -2px; }
.digital-menu-installation-height span { position: absolute; right: 8px; top: 50%; color: var(--ink); font-size: 8px; white-space: nowrap; transform: translateY(-50%); }
.digital-menu-installation-screens { position: absolute; z-index: 2; left: 20%; right: 20%; top: 52px; height: 35px; display: flex; gap: 2px; }
.digital-menu-installation-screens span { flex: 1 1 0%; display: grid; place-items: center; color: white; background: linear-gradient(145deg, rgb(27, 39, 55), rgb(7, 19, 35)); border: 1px solid rgb(38, 55, 76); font-size: 9px; }
.digital-menu-installation-scene.is-vertical .digital-menu-installation-width { left: 25%; right: 25%; top: 28px; }
.digital-menu-installation-scene.is-vertical .digital-menu-installation-height { left: 19.5%; top: 43px; height: 67px; }
.digital-menu-installation-scene.is-vertical .digital-menu-installation-screens { left: 25%; right: 25%; top: 43px; height: 67px; }
.digital-menu-installation-counter { position: absolute; z-index: 1; left: 6%; right: 6%; bottom: 20px; height: 43px; background: rgba(255, 255, 255, 0.88); border-top: 1px solid rgba(72, 49, 24, 0.2); }
.digital-menu-installation-counter span { position: absolute; left: 50%; top: 7px; color: var(--muted); font-size: 8px; transform: translateX(-50%); }
.digital-menu-installation-person { position: absolute; z-index: 3; right: 12%; bottom: 19px; width: 16px; height: 48px; background: rgb(112, 119, 128); border-radius: 10px 10px 4px 4px; opacity: 0.7; }
.digital-menu-installation-person::before { position: absolute; left: 3px; top: -11px; width: 10px; height: 10px; content: ""; background: rgb(112, 119, 128); border-radius: 50%; }
.digital-menu-installation-person::after { position: absolute; left: -6px; top: 13px; width: 28px; height: 4px; content: ""; background: rgb(112, 119, 128); border-radius: 4px; transform: rotate(-18deg); }
.digital-menu-installation-note { margin-top: 18px; color: var(--muted); font-size: 10px; line-height: 1.8; text-align: center; }
.digital-menu-cases { padding-top: 76px; padding-bottom: 76px; background: white; }
.digital-menu-cases .digital-menu-section-heading { margin-bottom: 34px; }
.digital-menu-case-grid { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 14px; }
.digital-menu-case-grid article { display: block; min-height: 0px; background: var(--paper); border: 1px solid rgba(72, 49, 24, 0.08); border-radius: 10px; overflow: hidden; }
.digital-menu-case-grid img { width: 100%; height: auto; min-height: 0px; aspect-ratio: 4 / 3; object-fit: cover; }
.digital-menu-case-grid article > div { padding: 18px 17px 20px; }
.digital-menu-case-grid span { color: var(--ink); font-size: 14px; font-weight: 700; }
.digital-menu-case-grid p { margin: 8px 0px 0px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.digital-menu-plan { background: rgb(237, 243, 247); }
.digital-menu-plan-box { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 22px; background: var(--ink); }
.digital-menu-plan-box > div { min-height: 260px; padding: 42px; color: white; border-right: 1px solid rgba(255, 255, 255, 0.18); }
.digital-menu-plan-box > div:last-child { border-right: 0px; }
.digital-menu-plan-box h3 { margin: 18px 0px 25px; font-size: 16px; }
.digital-menu-plan-box strong { display: block; color: white; font-size: 29px; font-weight: 500; }
.digital-menu-plan-box p { margin: 20px 0px 0px; color: rgba(255, 255, 255, 0.62); font-size: 11px; }
.digital-menu-size-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.digital-menu-size-grid article { padding: 24px; background: white; }
.digital-menu-size-screen { aspect-ratio: 16 / 9; display: flex; align-items: baseline; justify-content: center; padding-top: 15%; color: white; background: linear-gradient(145deg, #c5dbe5, var(--green)); border: 8px solid rgb(24, 36, 44); }
.digital-menu-size-screen b { font-size: 46px; font-weight: 500; }
.digital-menu-size-screen small { margin-left: 4px; font-size: 9px; }
.digital-menu-size-grid h3 { margin: 22px 0px 9px; font-size: 15px; }
.digital-menu-size-grid p { margin: 0px; color: var(--muted); font-size: 10px; line-height: 1.8; }
.digital-menu-support { position: relative; overflow: hidden; padding-top: 84px; padding-bottom: 88px; color: white; background: radial-gradient(circle at 50% 0, rgba(228,189,115,.14), transparent 36%),
    var(--ink); }
.digital-menu-support::before { position: absolute; left: 50%; top: 0px; width: 720px; height: 360px; content: ""; border: 1px solid rgba(228, 189, 115, 0.12); border-radius: 50%; pointer-events: none; transform: translate(-50%, -70%); }
.digital-menu-support .digital-menu-section-heading h2 { color: white; }
.digital-menu-support .digital-menu-section-heading span { color: var(--hero-gold); }
.digital-menu-support .digital-menu-support-more span { color: var(--hero-gold); }
.digital-menu-support .digital-menu-section-heading { margin-bottom: 38px; }
.digital-menu-support-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 18px; }
.digital-menu-support-grid article { position: relative; min-height: 210px; padding: 27px; color: var(--ink); background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(198, 160, 100, 0.3); border-radius: 16px; box-shadow: rgba(4, 18, 42, 0.22) 0px 22px 46px; transition: transform 0.25s, box-shadow 0.25s; }
.digital-menu-support-grid article:hover { box-shadow: rgba(4, 18, 42, 0.28) 0px 28px 54px; transform: translateY(-4px); }
.digital-menu-support-grid b { width: 48px; height: 48px; display: grid; place-items: center; color: white; background: var(--brand-gold); border: 6px solid rgb(243, 232, 214); border-radius: 50%; box-shadow: rgba(112, 71, 25, 0.2) 0px 8px 18px; font-size: 9px; letter-spacing: 0.08em; }
.digital-menu-support-grid h3 { margin: 24px 0px 12px; font-size: 18px; font-weight: 700; }
.digital-menu-support-grid p { margin: 0px; color: var(--muted); font-size: 12.5px; line-height: 1.8; }
.digital-menu-support-more { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.digital-menu-support-more > div { position: relative; min-height: 142px; padding: 25px 28px 25px 94px; background: rgba(255, 255, 255, 0.075); border: 1px solid rgba(228, 189, 115, 0.24); border-radius: 14px; }
.digital-menu-support-more > div::before { position: absolute; left: 27px; top: 27px; width: 48px; height: 48px; display: grid; place-items: center; color: var(--hero-gold); border: 1px solid rgba(228, 189, 115, 0.62); border-radius: 50%; font-size: 15px; font-weight: 800; letter-spacing: 0.04em; }
.digital-menu-support-more > div:first-child::before { content: "C"; }
.digital-menu-support-more > div:last-child::before { content: "M"; }
.digital-menu-support-more > div::after { position: absolute; left: 50px; top: 76px; width: 1px; height: 32px; content: ""; background: linear-gradient(rgba(228, 189, 115, 0.58), transparent); }
.digital-menu-support-more h3 { margin: 12px 0px 8px; font-size: 18px; font-weight: 700; }
.digital-menu-support-more p { margin: 0px; color: rgba(255, 255, 255, 0.68); font-size: 11.5px; line-height: 1.8; }
.digital-menu-service-points { position: relative; overflow: hidden; padding-top: 88px; padding-bottom: 92px; background: radial-gradient(circle at 15% 20%, rgba(127, 205, 181, 0.22), transparent 26%), radial-gradient(circle at 82% 72%, rgba(198, 160, 100, 0.18), transparent 28%), linear-gradient(135deg, rgb(247, 251, 248), rgb(237, 247, 244) 52%, rgb(244, 249, 252)); }
.digital-menu-service-points::before, .digital-menu-service-points::after { position: absolute; width: 260px; height: 260px; content: ""; background: rgba(255, 255, 255, 0.42); border-radius: 42%; filter: blur(2px); pointer-events: none; transform: rotate(24deg); }
.digital-menu-service-points::before { left: -90px; top: 28%; }
.digital-menu-service-points::after { right: -100px; top: 4%; }
.digital-menu-service-points > * { position: relative; z-index: 1; }
.digital-menu-service-points .digital-menu-section-heading { margin-bottom: 38px; }
.digital-menu-service-point-grid { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 15px; }
.digital-menu-service-point-grid article { min-height: 280px; padding: 30px 26px; background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(72, 49, 24, 0.07); border-radius: 12px; box-shadow: rgba(72, 49, 24, 0.1) 0px 18px 42px; }
.digital-menu-service-point-grid span { color: var(--green); font-size: 10px; font-weight: 800; letter-spacing: 0.18em; }
.digital-menu-service-point-grid h3 { margin: 22px 0px 14px; color: var(--green); font-size: 17px; font-weight: 700; line-height: 1.6; }
.digital-menu-service-point-grid p { margin: 0px; color: var(--ink); font-size: 12px; line-height: 1.9; }
.digital-menu-faq { background: white; }
.digital-menu-faq-list { max-width: 960px; }
.digital-menu-faq-list details { border-top: 1px solid var(--line); }
.digital-menu-faq-list details:last-child { border-bottom: 1px solid var(--line); }
.digital-menu-faq-list summary { position: relative; display: grid; grid-template-columns: 48px 1fr 30px; align-items: center; min-height: 84px; padding: 12px 6px; cursor: pointer; list-style: none; }
.digital-menu-faq-list summary::-webkit-details-marker { display: none; }
.digital-menu-faq-list summary b, .digital-menu-faq-list details > div > b { color: var(--green); font-size: 18px; font-weight: 500; }
.digital-menu-faq-list summary span { font-size: 14px; font-weight: 600; }
.digital-menu-faq-list summary i::before, .digital-menu-faq-list summary i::after { position: absolute; width: 16px; height: 1px; content: ""; background: var(--ink); transition: transform 0.2s; }
.digital-menu-faq-list summary i::after { transform: rotate(90deg); }
.digital-menu-faq-list details[open] summary i::after { transform: rotate(0deg); }
.digital-menu-faq-list details > div { display: grid; grid-template-columns: 48px 1fr; padding: 0px 44px 26px 6px; }
.digital-menu-faq-list details > div p { margin: 0px; color: var(--muted); font-size: 12.5px; line-height: 1.9; }
@media (max-width: 950px) {.digital-menu-effect-grid, .digital-menu-size-grid, .digital-menu-case-grid { grid-template-columns: repeat(2, 1fr); }
.digital-menu-installation-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.digital-menu-service-point-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.digital-menu-concern-layout { grid-template-columns: 1fr; }
.digital-menu-solution-grid { grid-template-columns: 1fr; }
.digital-menu-solution-grid article { min-height: 210px; padding: 34px 34px 32px; }
.digital-menu-solution-grid article:not(:first-child) { border-top: 1px solid rgba(255, 255, 255, 0.18); border-left: 0px; }
.digital-menu-distribution-diagram { grid-template-columns: 1fr; }
.digital-menu-distribution-diagram > i { width: 1px; height: 48px; justify-self: center; }
.digital-menu-distribution-diagram > i::after { right: -4px; top: auto; bottom: 0px; transform: rotate(135deg); }}
@media (max-width: 700px) {.digital-menu-hero { min-height: 540px; }
.digital-menu-hero-overlay { background: rgba(9, 33, 70, 0.72); }
.digital-menu-hero-copy { width: calc(100% - 44px); margin-top: 64px; }
.digital-menu-hero-copy h1 { margin-top: 18px; font-size: 36px; }
.digital-menu-hero-copy strong { font-size: 14px; }
.digital-menu-local-nav { width: calc(100% - 28px); grid-template-columns: repeat(2, 1fr); margin-top: -25px; border-radius: 7px; }
.digital-menu-local-nav a { min-height: 52px; border-bottom: 1px solid var(--line); font-size: 10px; }
.digital-menu-local-nav a:nth-child(2n) { border-right: 0px; }
.digital-menu-section { padding: 68px 22px; }
.digital-menu-section-heading { margin-bottom: 32px; }
.digital-menu-section-heading h2, .digital-menu-solution-intro h2 { font-size: 29px; }
.digital-menu-image-frame img { height: 280px; }
.digital-menu-concern-list article { min-height: 0px; padding: 24px; }
.digital-menu-concern-list { grid-template-columns: 1fr; gap: 12px; }
.digital-menu-concern-list p { margin-top: 22px; font-size: 14px; }
.digital-menu-solution-grid article { min-height: 205px; padding: 30px 22px 29px; }
.digital-menu-solution-card-head { margin-bottom: 31px; }
.digital-menu-solution-grid article::after { right: 18px; font-size: 76px; }
.digital-menu-solution-grid h3 { margin: 0px 0px 13px; font-size: 20px; }
.digital-menu-effect-grid, .digital-menu-size-grid, .digital-menu-plan-box, .digital-menu-support-grid, .digital-menu-support-more, .digital-menu-case-grid { grid-template-columns: 1fr; }
.digital-menu-service-point-grid { grid-template-columns: 1fr; }
.digital-menu-effect-grid article { min-height: 205px; }
.digital-menu-effects { padding-top: 64px; padding-bottom: 64px; }
.digital-menu-display-demo { padding: 22px 16px; }
.digital-menu-layout-gallery { grid-template-columns: 1fr; gap: 32px; }
.digital-menu-layout-gallery article > p { font-size: 10px; }
.digital-menu-pattern { min-height: 112px; }
.digital-menu-pattern .linked-screen { padding: 16px; }
.digital-menu-pattern .linked-screen strong { font-size: 12px; }
.digital-menu-operation .digital-menu-section-heading h3 { margin-top: 22px; font-size: 18px; }
.digital-menu-screens { gap: 3px; }
.digital-menu-screens > div { padding: 7px; border-width: 3px; }
.digital-menu-screens small, .digital-menu-screens strong { font-size: 6px; }
.digital-menu-screens span { display: none; }
.digital-menu-operation-copy h3 { font-size: 20px; }
.digital-menu-distribution-diagram { padding: 22px; }
.digital-menu-distribution-targets { gap: 5px; }
.digital-menu-distribution-targets > div { padding: 7px; border-width: 3px; }
.digital-menu-case-grid article { display: block; }
.digital-menu-case-grid img { height: auto; }
.digital-menu-installation-grid { grid-template-columns: 1fr; }
.digital-menu-plan-box > div { min-height: 215px; padding: 30px 24px; }
.digital-menu-plan-box > div:first-child { border-right: 0px; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.digital-menu-plan-box strong { font-size: 23px; }
.digital-menu-support-grid article { min-height: 0px; padding: 24px; }
.digital-menu-support-grid h3 { margin-top: 21px; }
.digital-menu-support-more > div { min-height: 0px; padding: 26px 24px 26px 86px; }
.digital-menu-support-more > div::before { left: 22px; top: 26px; }
.digital-menu-support-more > div::after { left: 45px; top: 75px; }
.digital-menu-service-points { padding-top: 64px; padding-bottom: 68px; }
.digital-menu-service-point-grid article { min-height: 0px; padding: 26px 24px; }
.digital-menu-service-point-grid h3 { margin-top: 18px; font-size: 17px; }
.digital-menu-faq-list summary { grid-template-columns: 36px 1fr 24px; min-height: 76px; }
.digital-menu-faq-list details > div { grid-template-columns: 36px 1fr; padding-right: 0px; }}
.window-signage-local-nav, .digital-menu-local-nav { display: none; }
@keyframes ai-sheet-in { 
  0% { opacity: 0; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes ai-el-in { 
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0px); }
}
@keyframes ai-caret { 
  50% { opacity: 0; }
}
@keyframes finder-in { 
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0px); }
}
.window-signage-page :is(.window-signage-heading, .window-signage-installation-heading, .digital-menu-section-heading) { margin-bottom: 44px; }
.window-signage-page :is(.window-signage-heading, .window-signage-installation-heading, .digital-menu-section-heading) > span, .window-signage-page .window-signage-intro-copy > span { display: block; margin-bottom: 17px; color: var(--text-muted); font-size: var(--type-label-size); font-weight: 800; line-height: 1.4; letter-spacing: var(--type-label-spacing); }
html body .site-header ~ main.window-signage-page :is(.window-signage-heading, .window-signage-installation-heading, .digital-menu-section-heading) h2, html body .site-header ~ main.window-signage-page .window-signage-intro-copy > h2 { margin: 0px; color: var(--text-heading); font-size: clamp(23px, 2.15vw, 30px) !important; font-weight: 500 !important; line-height: 1.45 !important; letter-spacing: -0.025em !important; }
.window-signage-page :is(.window-signage-heading, .window-signage-installation-heading, .digital-menu-section-heading) > p, .window-signage-page .window-signage-intro-copy > p { margin-top: 18px; color: var(--text-body); font-size: var(--type-body-size); font-weight: 400; line-height: var(--type-body-line); }
.window-signage-page .window-signage-heading.light > span, .window-signage-page .digital-menu-support .digital-menu-section-heading > span { color: var(--hero-gold); }
html body .site-header ~ main.window-signage-page .window-signage-heading.light h2, html body .site-header ~ main.window-signage-page .digital-menu-support .digital-menu-section-heading h2 { color: rgb(255, 255, 255); }
.window-signage-page .window-signage-heading.light > p, .window-signage-page .digital-menu-support .digital-menu-section-heading > p { color: rgba(255, 255, 255, 0.76); }
@media (max-width: 620px) {.window-signage-page :is(.window-signage-heading, .window-signage-installation-heading, .digital-menu-section-heading) { margin-bottom: 32px; }}
.service-detail-heading p, .outdoor-signage-hero-copy > span, .window-signage-hero-copy > p, .digital-menu-hero-copy > p, .category-landing-hero-copy > span, .company-page-hero-copy > span, .contact-page-hero > div > span, .case-detail-heading .eyebrow, .viora-store-dx-hero .company-page-hero-copy > span { color: var(--hero-gold) !important; }
.product-section, .home-store-dx, .custom-manufacturing-home, .case-studies, .service-showcase, .brand-message, .outdoor-signage-lineup, .outdoor-signage-update, .led-vision-environments, .led-vision-installation, .multi-display-features, .multi-display-scenes, .window-stand-scene, .window-stand-flow, .fabrication-section-warm, .product-catalog, .case-related, .system-platform, .system-support, .content-creative, .content-support, .window-signage-image, .window-signage-installation, .window-signage-faq, .digital-menu-operation, .digital-menu-installation, .cases-overview-section, .rental-section-muted, .rental-faq-section, .category-landing-plan { background-color: var(--section-gray) !important; }
.outdoor-signage-page, .product-family-detail-page, .category-landing, .digital-menu-distribution, .multi-display-flow { background-color: rgb(255, 255, 255) !important; }
.digital-menu-page .company-page-hero-copy h1 { text-wrap: balance; font-size: clamp(36px, 3.4vw, 48px) !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: -0.035em !important; }
.digital-menu-page .company-page-hero-copy > p { font-size: 14px !important; font-weight: var(--type-body-weight) !important; line-height: var(--type-body-line) !important; letter-spacing: normal !important; }
.digital-menu-page .digital-menu-section-heading > span, .digital-menu-page .digital-menu-solution-intro > span { display: block; margin-bottom: 12px; font-size: 10px !important; font-weight: 800 !important; line-height: 1.4 !important; letter-spacing: 0.24em !important; }
.digital-menu-page .digital-menu-section-heading > span { color: rgb(132, 120, 106); }
.digital-menu-page .digital-menu-solution-intro > span { color: rgba(255, 255, 255, 0.68); }
.digital-menu-page .digital-menu-section-heading h2, .digital-menu-page .digital-menu-solution-intro h2 { max-width: 760px; margin: 0px auto; color: var(--text-heading); text-wrap: balance; font-size: 30px !important; font-weight: 500 !important; line-height: 1.45 !important; letter-spacing: -0.025em !important; }
.digital-menu-page .digital-menu-solution-intro h2 { color: rgb(255, 255, 255); }
.digital-menu-page .digital-menu-section-heading > p, .digital-menu-page .digital-menu-solution-intro > p { max-width: 820px; margin: 22px auto 0px; text-wrap: pretty; font-size: 14px !important; font-weight: var(--type-body-weight) !important; line-height: var(--type-body-line) !important; letter-spacing: normal !important; }
.digital-menu-page .digital-menu-operation .digital-menu-section-heading h3 { max-width: 820px; margin: 22px auto 0px; color: var(--text-body); font-size: 14px !important; font-weight: var(--type-body-weight) !important; line-height: var(--type-body-line) !important; letter-spacing: normal !important; }
.digital-menu-page .digital-menu-operation .digital-menu-section-heading h3 + p { margin-top: 8px; }
@media (max-width: 620px) {.digital-menu-page .company-page-hero-copy h1 { font-size: 34px !important; }
.digital-menu-page .digital-menu-section-heading h2, .digital-menu-page .digital-menu-solution-intro h2 { font-size: 26px !important; }}


/* Shared TAKASYOU page typography, spacing and white / warm-white sections. */
.digital-menu-page{--green:var(--gold);--brand-gold:var(--gold);--hero-gold:var(--gold);--text-accent:var(--gold);--text-body:var(--text);--text-heading:var(--ink);--text-muted:var(--muted);--paper:#fff;--section-gray:#fdfbf9;--type-body-size:var(--site-body);--type-body-line:1.9;--type-body-weight:400;--type-label-size:14px;--type-label-spacing:.12em;font-family:var(--font-sans)}
.digital-menu-page h1,.digital-menu-page h2,.digital-menu-page h3{font-family:var(--font-sans);font-weight:600;letter-spacing:.035em;line-break:strict}
.digital-menu-page button{font-family:inherit;cursor:pointer}
.digital-menu-page button:focus-visible,.digital-menu-page a:focus-visible,.digital-menu-page summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.digital-menu-page .digital-menu-section{padding:96px max(68px,calc((100vw - 1304px)/2));scroll-margin-top:96px;color:var(--ink)}
.digital-menu-page .digital-menu-section>*{width:100%;max-width:1304px}
.digital-menu-page>.digital-menu-section:nth-of-type(even){background:#fff}
.digital-menu-page>.digital-menu-section:nth-of-type(odd){background:#fdfbf9}
.digital-menu-page .digital-menu-section-heading,.digital-menu-page .digital-menu-solution-intro{margin-bottom:48px}
.digital-menu-page .digital-menu-section-heading h2,.digital-menu-page .digital-menu-solution-intro h2{font-size:var(--site-h2);line-height:1.6;color:var(--ink);letter-spacing:.035em}
.digital-menu-page .digital-menu-section-heading>span,.digital-menu-page .digital-menu-solution-intro>span{display:block;color:var(--gold);font-size:14px;line-height:1.5;font-weight:700;letter-spacing:.12em}
.digital-menu-page .digital-menu-section-heading>p,.digital-menu-page .digital-menu-solution-intro>p{font-size:var(--site-body);line-height:1.9;color:var(--muted);max-width:900px}
.digital-menu-page .digital-menu-section-heading>h3{font-size:21px;line-height:1.6}
.digital-menu-page .digital-menu-local-nav{width:min(1304px,calc(100% - 136px));margin:0 auto;border-radius:0;box-shadow:none;border-bottom:1px solid var(--line)}
.digital-menu-page .digital-menu-local-nav a{font-size:14px;min-height:62px;border-radius:0;color:var(--gold)}
.digital-menu-page .digital-menu-local-nav a:hover{background:#fdfbf9;color:var(--gold)}
.digital-menu-page .digital-menu-concern-list article{min-height:190px;box-shadow:none;border:1px solid var(--gold-line);border-radius:4px}
.digital-menu-page .digital-menu-concern-list article::after{display:none}
.digital-menu-page .digital-menu-concern-list article:hover{transform:none;box-shadow:none}
.digital-menu-page .digital-menu-concern-list b{color:var(--gold);background:#fdfbf9;border-color:var(--gold-line)}
.digital-menu-page .digital-menu-solution-grid{border-color:var(--gold-line)}
.digital-menu-page .digital-menu-solution-grid article{min-height:240px;justify-content:flex-start;padding:32px}
.digital-menu-page .digital-menu-solution-grid article:not(:first-child){border-color:var(--gold-line)}
.digital-menu-page .digital-menu-solution-grid article::after{color:rgba(181,131,73,.08)}
.digital-menu-page .digital-menu-solution-grid article:hover{background:transparent}
.digital-menu-page .digital-menu-solution-grid h3{font-size:21px;color:var(--ink)}
.digital-menu-page .digital-menu-solution-grid p{color:var(--muted);font-size:15px}
.digital-menu-page .digital-menu-effects::before,.digital-menu-page .digital-menu-effects::after{display:none}
.digital-menu-page .digital-menu-effect-grid article{box-shadow:none;border:1px solid var(--gold-line);border-top:3px solid var(--gold);padding:28px 20px;background:#fff}
.digital-menu-page .digital-menu-effect-grid p{font-size:14px}
.digital-menu-page .digital-menu-effect-note,.digital-menu-page .digital-menu-installation-note{color:var(--muted);font-size:12px;line-height:1.9}
.digital-menu-page .digital-menu-display-demo{box-shadow:none;padding:32px;border:1px solid var(--gold-line)}
.digital-menu-page .digital-menu-case-grid article{box-shadow:none;border:1px solid var(--gold-line);border-radius:4px}
.digital-menu-page .digital-menu-case-grid p,.digital-menu-page .digital-menu-support-grid p,.digital-menu-page .digital-menu-support-more p,.digital-menu-page .digital-menu-faq-list p{font-size:var(--site-body);line-height:1.9}
.digital-menu-page .digital-menu-support-grid article,.digital-menu-page .digital-menu-support-more>div{border-radius:4px;box-shadow:none}
.digital-menu-page .digital-menu-faq-list summary{font-size:16px}
.digital-menu-page .digital-menu-faq-list details{border-color:var(--gold-line)}
.digital-menu-page .distribution-phone header{position:static;top:auto;z-index:auto;width:auto;min-height:0;box-shadow:none}
.digital-menu-page .digital-menu-case-grid img{object-fit:cover}
@media(min-width:1101px) and (max-width:1350px){.digital-menu-page .digital-menu-section{padding-left:40px;padding-right:40px}.digital-menu-page .digital-menu-local-nav{width:calc(100% - 80px)}}
@media(max-width:1100px){.digital-menu-page .digital-menu-section{padding:72px 24px}.digital-menu-page .digital-menu-local-nav{width:calc(100% - 48px)}.digital-menu-page .digital-menu-section-heading,.digital-menu-page .digital-menu-solution-intro{margin-bottom:36px}.digital-menu-page .digital-menu-solution-grid article{padding:28px 20px}}
@media(max-width:700px){.digital-menu-page .digital-menu-section{padding:56px 24px}.digital-menu-page .digital-menu-local-nav{width:calc(100% - 48px);grid-template-columns:repeat(2,1fr)}.digital-menu-page .digital-menu-local-nav a{font-size:13px;min-height:48px}.digital-menu-page .digital-menu-section-heading h2,.digital-menu-page .digital-menu-solution-intro h2{font-size:26px}.digital-menu-page .digital-menu-section-heading>span{font-size:12px}.digital-menu-page .digital-menu-display-demo{padding:20px 16px}.digital-menu-page .digital-menu-solution-grid p{font-size:14px}.digital-menu-page .digital-menu-solution-grid article:not(:first-child){border-left:0;border-top:1px solid var(--gold-line)}.digital-menu-page .digital-menu-concern-list article{min-height:0}.digital-menu-page .digital-menu-faq-list summary{font-size:15px}}

.digital-menu-page .digital-menu-support-more>div{background:#fff}
.digital-menu-page .digital-menu-support-more p{color:var(--muted)}