/* GBH Motion: Odoo 20 page (/odoo-20). Scoped to .gx-o20. */
.gx-o20 .o20-big{font-size:1.25em;color:#fff;letter-spacing:-.04em}
.gx-o20[dir="rtl"] .o20-big{font-family:var(--disp)}
.gx-o20 .o20-lift{width:100%;max-width:540px;justify-self:end}
.gx-o20 .o20-car{animation:o20Up 5.5s cubic-bezier(.6,0,.3,1) .8s both}
.gx-o20 .o20-glow{animation:o20Glow 2.4s ease-in-out 4.6s infinite alternate;opacity:.25}
.gx-o20 .o20-spark{transform-box:fill-box;transform-origin:center;animation:o20Spark 1.8s ease-in-out infinite;opacity:0}
.gx-o20 .o20-floor20 rect.f{transition:fill .6s}
@keyframes o20Up{0%{transform:translateY(330px)}18%{transform:translateY(330px)}36%{transform:translateY(220px)}48%{transform:translateY(220px)}64%{transform:translateY(110px)}76%{transform:translateY(110px)}100%{transform:translateY(0)}}
@keyframes o20Glow{from{opacity:.25}to{opacity:.9}}
@keyframes o20Spark{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1)}}

/* what's new */
.gx-o20 .o20-tabs button{min-height:24px}
.gx-o20 .o20-panel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.gx-o20 .o20-panel[hidden]{display:none}
.gx-o20 .o20-card{background:var(--tint);border-radius:20px;padding:24px;animation:o20In .45s cubic-bezier(.2,.8,.2,1) both}
.gx-o20 .o20-card:nth-child(2){animation-delay:.06s}.gx-o20 .o20-card:nth-child(3){animation-delay:.12s}.gx-o20 .o20-card:nth-child(4){animation-delay:.18s}
.gx-o20 .o20-card h3{margin:14px 0 8px;font:700 21px/1.2 var(--disp);color:var(--purple)}
.gx-o20 .o20-card p{margin:0;font-size:16px;color:var(--ink)}
.gx-o20 .o20-ic{display:block;width:44px;height:44px;border-radius:14px;background:var(--purple) center/24px no-repeat}
.gx-o20 .o20-ic-ai{background-color:var(--purple)}
.gx-o20 .o20-ic-daily{background-color:var(--teal-ink)}
.gx-o20 .o20-ic-fin{background-color:var(--deep)}
.gx-o20 .o20-ic-sales{background-color:#9B5AA6}
.gx-o20 .o20-ic-ops{background-color:#03727C}
.gx-o20 .o20-ic-ppl{background-color:#4E2456}
.gx-o20 .o20-ic::before{content:"";display:block;width:100%;height:100%;background:#fff;-webkit-mask:var(--m) center/24px no-repeat;mask:var(--m) center/24px no-repeat}
.gx-o20 .o20-ic-ai{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 3l2 5 5 2-5 2-2 5-2-5-5-2 5-2z'/%3E%3Cpath d='M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8z'/%3E%3C/svg%3E")}
.gx-o20 .o20-ic-daily{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='14' rx='3'/%3E%3Cpath d='M8 21h8M7 9h10M7 13h6'/%3E%3C/svg%3E")}
.gx-o20 .o20-ic-fin{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E")}
.gx-o20 .o20-ic-sales{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 4h3l2.5 11h10L21 7H7'/%3E%3Ccircle cx='10' cy='20' r='1.5'/%3E%3Ccircle cx='17' cy='20' r='1.5'/%3E%3C/svg%3E")}
.gx-o20 .o20-ic-ops{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 2l9 5v10l-9 5-9-5V7z'/%3E%3Cpath d='M3 7l9 5 9-5M12 12v10'/%3E%3C/svg%3E")}
.gx-o20 .o20-ic-ppl{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.8-4 3.5-6 6.5-6s5.7 2 6.5 6'/%3E%3Cpath d='M16 4.5a3.5 3.5 0 0 1 0 7M18 14c2 .7 3.2 2.6 3.5 6'/%3E%3C/svg%3E")}
@keyframes o20In{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* facts */
.gx-o20 .o20-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:36px}
.gx-o20 .o20-fact{background:#fff;border-radius:22px;padding:26px}
.gx-o20 .o20-fact b{display:block;font:800 clamp(30px,3vw,42px)/1 var(--disp);color:var(--teal-ink);letter-spacing:-.02em}
.gx-o20[dir="rtl"] .o20-fact b{text-align:right}
.gx-o20 .o20-fact h3{margin:14px 0 6px;font:700 20px/1.25 var(--disp);color:var(--purple)}
.gx-o20 .o20-fact p{margin:0;font-size:16px;color:var(--muted)}

/* upgrade path */
.gx-o20 .o20-vers{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 22px}
.gx-o20 .o20-vers button{all:unset;cursor:pointer;padding:12px 22px;border-radius:999px;border:1.5px solid rgba(255,255,255,.35);font:600 16px var(--body);color:#fff}
.gx-o20 .o20-vers button[aria-pressed="true"]{background:var(--teal);border-color:var(--teal)}
.gx-o20 .o20-vers button:focus-visible{outline:3px solid var(--teal-lite);outline-offset:2px}
.gx-o20 .o20-route{background:var(--plum);border-radius:26px;padding:clamp(20px,3vw,34px)}
.gx-o20 .o20-route svg{width:100%;height:auto;display:block}
.gx-o20 .o20-route-tx h3{margin:14px 0 8px;font:700 clamp(24px,2.4vw,32px)/1.15 var(--disp);color:#fff}
.gx-o20 .o20-route-tx p{margin:0;color:var(--mist);max-width:70ch}
.gx-o20 .o20-route-tx ul{margin:16px 0 24px;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px}
.gx-o20 .o20-route-tx li{position:relative;padding-inline-start:28px;color:#fff;font-size:17px}
.gx-o20 .o20-route-tx li::before{content:"";position:absolute;inset-inline-start:0;top:.45em;width:14px;height:14px;border-radius:50%;background:var(--teal)}
.gx-o20 .o20-hop{transition:opacity .4s}
.gx-o20 .o20-dot{transition:fill .4s,r .4s}

/* steps */
.gx-o20 .o20-steps{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;counter-reset:s}
.gx-o20 .o20-steps li{background:var(--tint);border-radius:20px;padding:24px;position:relative}
.gx-o20 .o20-steps .n{display:block;font:500 15px var(--mono);color:var(--teal-ink)}
.gx-o20[dir="rtl"] .o20-steps .n{text-align:right}
.gx-o20 .o20-steps h3{margin:10px 0 8px;font:700 21px/1.2 var(--disp);color:var(--purple)}
.gx-o20 .o20-steps p{margin:0;font-size:16px}
.gx-o20 .o20-steps li:not(:last-child)::after{content:"";position:absolute;top:34px;inset-inline-end:-12px;width:10px;height:2px;background:var(--teal)}

.gx-o20 .gx-btn:focus-visible,.gx-o20 summary:focus-visible,.gx-o20 .o20-tabs button:focus-visible{outline:3px solid var(--teal);outline-offset:3px}

@media (max-width:1100px){
  .gx-o20 .o20-panel,.gx-o20 .o20-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gx-o20 .o20-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gx-o20 .o20-steps li::after{display:none}
}
@media (max-width:640px){
  .gx-o20 .o20-panel,.gx-o20 .o20-facts,.gx-o20 .o20-steps,.gx-o20 .o20-route-tx ul{grid-template-columns:minmax(0,1fr)}
  .gx-o20 .o20-lift{max-width:360px;justify-self:center}
  .gx-o20 .o20-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
  .gx-o20 .o20-tabs button{white-space:nowrap;flex:none}
}
@media (prefers-reduced-motion:reduce){
  .gx-o20 .o20-car,.gx-o20 .o20-glow,.gx-o20 .o20-spark,.gx-o20 .o20-card{animation:none!important}
  .gx-o20 .o20-glow,.gx-o20 .o20-spark{opacity:.8}
}