/* AWS + Zoho integration page only. Loaded via `extra: crm, mid, p-integrations-aws-zoho`. Every class is scoped with .pw23- */

/* ---------- hero: bridge between Zoho apps and AWS services ---------- */
.pw23-hero .pw23-hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); }
.pw23-hero .crm-sub { max-width: 48ch; }
.pw23-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; max-width: 620px; }
.pw23-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 8px; border-radius: 999px; background: #fff; border: 1px solid #D6E4EE; font: 600 13.5px/1.25 var(--f-body); color: #0B2A3F; }
.pw23-chips img { flex: none; width: 22px; height: 22px; border-radius: 5px; }
.pw23-badge img { width: 60px; height: 36px; object-fit: contain; }

.pw23-bridge { position: relative; margin: 0; padding: 18px 18px 16px; border-radius: 24px; background: linear-gradient(180deg, #F4FAFD 0%, #FFFFFF 70%); border: 1px solid #D9E3EC; box-shadow: 0 44px 80px -48px rgba(8,34,56,.6); }
.pw23-bridge__cap { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; font: 700 12px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #526174; }
.pw23-bridge__cap em { font-style: normal; padding: 5px 9px; border-radius: 99px; background: #082238; color: #fff; letter-spacing: .08em; }
.pw23-bridge__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 0; }
.pw23-bank { position: relative; z-index: 2; padding: 12px 10px; border-radius: 18px; background: #fff; border: 1px solid #E2E8F0; }
.pw23-bank--z { border-top: 4px solid #0F766E; }
.pw23-bank--a { border-top: 4px solid #B45309; }
.pw23-bank__h { margin: 0 0 8px; font: 800 12px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; text-align: center; color: #0F766E; }
.pw23-bank--a .pw23-bank__h { color: #B45309; }
.pw23-bank ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pw23-bank li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px; background: #F6F9FB; font: 700 13px/1.2 var(--f-body); color: #082238; transition: background-color .4s, box-shadow .4s; }
.pw23-bank li img { flex: none; width: 34px; height: 34px; border-radius: 8px; }
.pw23-bank li.is-ping { background: #FFF4DA; box-shadow: 0 0 0 2px #FFB81C inset; }
.pw23-span { position: relative; height: 230px; margin: 0 -6px; }
.pw23-span__deck { position: absolute; left: 0; right: 0; top: 10px; width: 100%; height: 200px; }
.pw23-lane { position: absolute; left: 0; right: 0; height: 30px; }
.pw23-lane--out { top: 122px; }
.pw23-lane--back { top: 186px; }
.pw23-pk { position: absolute; inset: 0 72px 0 0; animation: pw23-out 4.8s linear infinite; animation-delay: var(--d, 0s); }
.pw23-lane--back .pw23-pk { animation-name: pw23-back; }
.pw23-pk i { position: absolute; left: 0; top: 0; display: inline-block; width: 72px; padding: 6px 0; border-radius: 99px; background: #0A6FA8; color: #fff; text-align: center; font: 700 11px/1.2 var(--f-body); font-style: normal; white-space: nowrap; box-shadow: 0 8px 14px -8px rgba(8,34,56,.6); }
.pw23-lane--back .pw23-pk i { background: #0F766E; }
@keyframes pw23-out { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }
@keyframes pw23-back { 0% { transform: translateX(100%); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(0); opacity: 0; } }
.pw23-bridge__foot { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font: 600 13px/1.4 var(--f-body); color: #334155; }
.pw23-bridge__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #15803D; box-shadow: 0 0 0 4px rgba(21,128,61,.18); }

/* ---------- services ---------- */
.pw23-svc__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 34px 0 0; padding: 0; list-style: none; counter-reset: pw23; }
.pw23-svc__list li { position: relative; padding: 22px 22px 22px 24px; border-radius: 20px; background: #fff; border: 1px solid #E2E8F0; border-left: 5px solid var(--c); }
.pw23-svc__list li:last-child { grid-column: 1 / -1; background: #F8FAFC; }
.pw23-svc__pair { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; }
.pw23-svc__pair img { width: 28px; height: 28px; border-radius: 6px; }
.pw23-svc__pair i { width: 34px; height: 2px; background: repeating-linear-gradient(90deg, var(--c) 0 5px, transparent 5px 9px); }
.pw23-svc__list h3 { margin: 0 0 6px; font: 700 19px/1.3 var(--f-display); color: #082238; }
.pw23-svc__list p:not(.pw23-svc__pair) { margin: 0; font-size: 15.5px; line-height: 1.6; color: #475569; }
.pw23-svc__list a { color: #0B5FA5; font-weight: 600; }

/* ---------- scroll-story J7: route line ---------- */
.pw23-rt { padding: 0; background: linear-gradient(180deg, #F2F8F7 0%, #FFF8EE 100%); overflow-x: clip; }
.pw23-rt__stage { padding-top: clamp(64px, 8vw, 104px); padding-bottom: clamp(64px, 8vw, 104px); }
.pw23-rt__head .pg-answer { margin-bottom: 0; }
.pw23-rt__btns { display: none; }
.pw23-rt__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; margin-top: 32px; }
.pw23-rt__art { position: relative; }
.pw23-rt__map { display: block; width: 100%; height: auto; filter: drop-shadow(0 26px 34px rgba(8,34,56,.14)); }
.pw23-rt__dot { transition: transform .7s cubic-bezier(.4,0,.2,1); }
.pw23-rt__bar { display: none; }
.pw23-rt__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pw23-rt__st { background: #fff; border-radius: 22px; padding: 22px 24px; box-shadow: 0 30px 60px -44px rgba(8,34,56,.45); border-top: 5px solid var(--c); outline: none; }
.pw23-rt__st:focus-visible { box-shadow: 0 0 0 3px #FFB81C, 0 30px 60px -44px rgba(8,34,56,.45); }
.pw23-rt__when { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; font: 800 12.5px/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.pw23-rt__n { padding: 4px 9px; border-radius: 99px; background: var(--c); color: #fff; letter-spacing: .06em; }
.pw23-rt__st h3 { margin: 0 0 8px; font: 700 clamp(20px, 1rem + .7vw, 25px)/1.25 var(--f-display); letter-spacing: -.02em; color: #082238; }
.pw23-rt__st > p:not([class]) { margin: 0 0 14px; font-size: 16.5px; line-height: 1.6; color: #334155; }
.pw23-rt__apps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.pw23-rt__apps a, .pw23-rt__x { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 5px 11px 5px 7px; border-radius: 99px; background: #F3F7F9; border: 1px solid #E2E8F0; font: 600 13px/1 var(--f-body); color: #082238; text-decoration: none; transition: border-color .2s, background .2s; }
.pw23-rt__apps img { width: 18px; height: 18px; border-radius: 4px; }
.pw23-rt__apps a:hover { border-color: var(--c); background: #fff; }
.pw23-rt__apps a:focus-visible, .pw23-rt__btns button:focus-visible { outline: 2px solid #B45309; outline-offset: 2px; }
.pw23-rt__note { margin: 26px 0 0; font-size: 14px; color: #526174; max-width: 80ch; }

.pw23-rt--live .pw23-rt__track { height: calc(100vh + 7 * 52vh); }
.pw23-rt--live .pw23-rt__stage { position: sticky; top: 0; height: 100vh; min-height: 620px; display: flex; flex-direction: column; justify-content: center; padding-top: 92px; padding-bottom: 26px; }
.pw23-rt--live .pg-h2 { font-size: clamp(26px, 1rem + 1.2vw, 36px); margin-bottom: 8px; max-width: 36ch; }
.pw23-rt--live .pg-answer { font-size: 16px; max-width: 80ch; }
.pw23-rt--live .pw23-rt__btns { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 14px 0 0; padding: 0; }
.pw23-rt__btns button { min-height: 32px; font: 600 13px/1 var(--f-body); color: #082238; background: #fff; border: 1px solid #CBD5E1; padding: 9px 13px; border-radius: 99px; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.pw23-rt__btns button.is-past { border-color: #082238; }
.pw23-rt__btns button[aria-current="true"] { background: #082238; color: #fff; border-color: #082238; }
.pw23-rt--live .pw23-rt__grid { margin-top: 18px; align-items: center; }
.pw23-rt--live .pw23-rt__map { max-height: min(44vh, 380px); margin: 0 auto; }
.pw23-rt--live .pw23-rt__stn circle { transition: fill .4s, stroke-width .4s; }
.pw23-rt--live .pw23-rt__stn { opacity: .45; transition: opacity .4s; }
.pw23-rt--live .pw23-rt__stn.is-in { opacity: 1; }
.pw23-rt--live .pw23-rt__stn.is-cur circle { fill: #FFF4DA; stroke-width: 6; }
.pw23-rt--live .pw23-rt__line { transition: stroke-dashoffset .7s cubic-bezier(.4,0,.2,1); }
.pw23-rt--live .pw23-rt__bar { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.pw23-rt__bar i { width: 26px; height: 5px; border-radius: 4px; background: rgba(8,34,56,.14); transition: background .4s; } .pw23-rt__bar i.on { background: #FFB81C; }
.pw23-rt--live .pw23-rt__list { display: block; position: relative; min-height: 330px; }
.pw23-rt--live .pw23-rt__st { position: absolute; left: 0; right: 0; top: 50%; opacity: 0; pointer-events: none; transform: translateY(-44%) scale(.97); transition: opacity .2s, transform .3s; }
.pw23-rt--live .pw23-rt__st.is-on { opacity: 1; pointer-events: auto; transform: translateY(-50%); transition: opacity .45s .12s, transform .6s .12s cubic-bezier(.2,.8,.2,1); }
.pw23-rt--live .pw23-rt__note { margin-top: 14px; font-size: 13px; }
@media (max-height: 780px) {
  .pw23-rt--live .pw23-rt__stage { padding-top: 84px; padding-bottom: 14px; }
  .pw23-rt--live .hp-kick { display: none; }
  .pw23-rt--live .pg-h2 { font-size: clamp(24px, 1rem + 1vw, 32px); }
  .pw23-rt--live .pg-answer { font-size: 15px; line-height: 1.5; }
  .pw23-rt--live .pw23-rt__btns { margin-top: 10px; }
  .pw23-rt--live .pw23-rt__btns button { padding: 7px 11px; }
  .pw23-rt--live .pw23-rt__grid { margin-top: 10px; }
  .pw23-rt--live .pw23-rt__map { max-height: 36vh; }
  .pw23-rt--live .pw23-rt__st { padding: 18px 20px; }
  .pw23-rt--live .pw23-rt__st > p:not([class]) { font-size: 15.5px; margin-bottom: 10px; }
  .pw23-rt--live .pw23-rt__bar { margin-top: 8px; }
  .pw23-rt--live .pw23-rt__note { margin-top: 8px; }
}

/* ---------- signature interactive: pattern picker ---------- */
.pw23-pick__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 22px; margin-top: 34px; align-items: start; }
.pw23-pick__in { display: grid; gap: 18px; min-width: 0; }
.pw23-pick__in fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.pw23-pick__in legend { margin: 0 0 10px; padding: 0; font: 700 13px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #CFE3F1; }
.pw23-pick__pats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pw23-pat { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: center; padding: 14px; border-radius: 16px; border: 2px solid rgba(207,227,241,.28); background: rgba(255,255,255,.06); color: #fff; text-align: left; cursor: pointer; font: inherit; transition: border-color .2s, background-color .2s, transform .2s; }
.pw23-pat img, .pw23-pat__ic { grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 6px; }
.pw23-pat b { font: 700 15px/1.25 var(--f-display); }
.pw23-pat small { font: 500 12.5px/1.35 var(--f-body); color: #CFE3F1; }
.pw23-pat:hover { border-color: rgba(255,184,28,.6); }
.pw23-pat[aria-pressed="true"] { border-color: #FFB81C; background: rgba(255,184,28,.14); }
.pw23-pick__apps, .pw23-pick__own { display: flex; flex-wrap: wrap; gap: 8px; }
.pw23-app, .pw23-pick__own button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px 8px 9px; border-radius: 99px; border: 2px solid rgba(207,227,241,.28); background: rgba(255,255,255,.06); color: #fff; font: 600 14px/1.2 var(--f-body); cursor: pointer; transition: border-color .2s, background-color .2s; }
.pw23-pick__own button { padding: 8px 14px; }
.pw23-app img { width: 22px; height: 22px; border-radius: 5px; background: #fff; }
.pw23-app[aria-pressed="true"], .pw23-pick__own button[aria-checked="true"] { border-color: #FFB81C; background: rgba(255,184,28,.14); }
.pw23-pat:focus-visible, .pw23-app:focus-visible, .pw23-pick__own button:focus-visible { outline: 3px solid #FFB81C; outline-offset: 2px; }
.pw23-pick__out { padding: 20px; border-radius: 18px; background: #F6F9FB; color: #334155; box-shadow: 0 40px 70px -40px rgba(0,0,0,.6); }
.pw23-pick__lab { margin: 0 0 6px; font: 700 11px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: #0A6FA8; }
.pw23-pick__say { margin: 0 0 14px; font: 700 17px/1.4 var(--f-display); color: #082238; }
.pw23-pick__blk { margin: 0 0 12px; }
.pw23-pick__h { margin: 0 0 6px; font: 700 12px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #526174; }
.pw23-pick__svc, .pw23-pick__zo { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pw23-pick__svc li, .pw23-pick__zo li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 99px; background: #fff; border: 1px solid #E2E8F0; font: 600 13px/1.2 var(--f-body); color: #082238; }
.pw23-pick__zo li { padding-left: 10px; border-color: #B9E1DA; }
.pw23-pick__svc li img { width: 20px; height: 20px; border-radius: 4px; }
.pw23-pick__svc li.is-new { animation: pw23-flash .6s ease-out; }
@keyframes pw23-flash { from { background: #FFF1CC; } to { background: #fff; } }
.pw23-pick__steps { list-style: decimal; margin: 0; padding: 0 0 0 22px; display: grid; gap: 4px; font-size: 14.5px; line-height: 1.5; color: #334155; }
.pw23-pick__steps li::marker { font-weight: 700; color: #0A6FA8; }
.pw23-pick__warn { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.pw23-pick__warn li { padding: 10px 13px; border-radius: 12px; background: #FFF6DD; border: 1px solid #F3D48A; font-size: 14px; line-height: 1.5; color: #6B4A00; }
.pw23-pick__send { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; }
.pw23-pick__send span { font-size: 13px; color: #526174; }
.pw23-pick__foot { margin: 22px 0 0; font-size: 14px; line-height: 1.55; color: #CFE3F1; max-width: 90ch; }

/* ---------- AWS or Catalyst (G) ---------- */
.pw23-mid__fair { max-width: 880px; margin: 22px 0 0; padding: 14px 18px; border-radius: 14px; background: #fff; border: 1px solid #E8EEF3; font-size: 15.5px; line-height: 1.6; color: #334155; }
.pw23-mid__fair a { color: #0B5FA5; font-weight: 600; }

/* ---------- Zoho apps ---------- */
.pw23-zo__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 34px 0 0; padding: 0; list-style: none; }
.pw23-zo__grid li { padding: 20px; border-radius: 18px; background: #fff; border: 1px solid #E2E8F0; }
.pw23-zo__h { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font: 700 18px/1.3 var(--f-display); }
.pw23-zo__h img { width: 30px; height: 30px; }
.pw23-zo__h a { color: #082238; text-decoration: none; }
.pw23-zo__h a:hover { color: #0B5FA5; text-decoration: underline; }
.pw23-zo__grid li > p:not(.pw23-zo__h) { margin: 0; font-size: 15px; line-height: 1.6; color: #475569; }
.pw23-zo__more { margin: 22px 0 0; font-size: 15px; color: #475569; }
.pw23-zo__more a { color: #0B5FA5; font-weight: 600; }

/* ---------- running costs: three meters ---------- */
.pw23-bill { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 32px; }
.pw23-bill__m { display: flex; flex-direction: column; padding: 22px; border-radius: 20px; background: #fff; border: 1px solid #E2E8F0; border-top: 5px solid var(--c); }
.pw23-bill__tag { margin: 0 0 8px; font: 700 12px/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.pw23-bill__m h3 { margin: 0 0 10px; font: 700 20px/1.3 var(--f-display); color: #082238; }
.pw23-bill__m ul { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 6px; }
.pw23-bill__m li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.5; color: #334155; }
.pw23-bill__m li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.pw23-bill__m > p:last-child { margin: auto 0 0; padding-top: 10px; border-top: 1px dashed #D5DFE7; font-size: 14.5px; line-height: 1.55; color: #475569; }
.pw23-bill__m a { color: #0B5FA5; font-weight: 600; }

/* ---------- proof ---------- */
.pw23-proof { padding-top: 8px; padding-bottom: 8px; }
.pw23-proof__box h2 { margin: 0; }
.pw23-proof .pg-trustnote a { color: #0A6FA8; font-weight: 600; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .pw23-hero .pw23-hero__grid, .pw23-pick__grid { grid-template-columns: minmax(0, 1fr); }
  .pw23-bridge { max-width: 640px; }
  .pw23-zo__grid, .pw23-bill { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) { .pw23-rt__grid { grid-template-columns: 1fr; } .pw23-rt__art { max-width: 560px; } }
@media (max-width: 640px) {
  .pw23-bridge { padding: 14px 12px; }
  .pw23-bridge__body { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1fr); }
  .pw23-bank { padding: 10px 6px; }
  .pw23-bank li { flex-direction: column; gap: 4px; padding: 6px 4px; font-size: 11.5px; text-align: center; }
  .pw23-bank li img { width: 28px; height: 28px; }
  .pw23-span { height: 200px; }
  .pw23-lane--out { top: 108px; } .pw23-lane--back { top: 160px; }
  .pw23-pk { right: 56px; } .pw23-pk i { width: 56px; font-size: 10px; padding: 5px 0; }
  .pw23-svc__list, .pw23-zo__grid, .pw23-bill { grid-template-columns: 1fr; }
  .pw23-pick__pats { grid-template-columns: 1fr; }
  .pw23-pick__out { padding: 16px; }
  .pw23-rt__st { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .pw23-pk { animation: none !important; transform: translateX(50%); opacity: 1; }
  .pw23-rt__dot, .pw23-rt__line, .pw23-bank li { transition: none !important; }
  .pw23-pick__svc li.is-new { animation: none !important; }
}