/* Homepage in story order (Connect, Collect, Decide) and the day on Zenoo on the role pages. */

/* the step label sits in the time pill; no minute ruler, because the steps are not times of day */
main > section > .wrap.event.step > .stamp time { letter-spacing: .01em; }

/* ---- 2 Collect: the customer's journey on a phone, every answer landing on the case ---- */
.cj { position: relative; width: 100%; max-width: 540px; margin: 0 auto; display: grid; grid-template-columns: 218px minmax(0, 1fr); gap: 20px; align-items: center; }
.cj-ph { position: relative; height: 420px; border-radius: 36px; background: #15122b; padding: 9px; box-shadow: 0 30px 60px -30px rgba(20, 12, 60, .55); }
.cj-ph::before { content: ""; position: absolute; z-index: 2; top: 17px; left: 50%; width: 64px; height: 18px; margin-left: -32px; border-radius: 10px; background: #15122b; }
.cj-scr { position: relative; height: 100%; border-radius: 28px; background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.cj-bar { display: flex; align-items: center; gap: 8px; padding: 44px 16px 12px; border-bottom: 1px solid #eef0f2; }
.cj-logo { width: 22px; height: 22px; border-radius: 6px; background: #0f8f74; display: grid; place-items: center; color: #fff; font: 700 11px/1 var(--display, Inter), sans-serif; }
.cj-bar b { font: 600 13px/1.2 var(--display, Inter), sans-serif; color: #10372f; }
.cj-prog { display: flex; gap: 4px; margin-left: auto; }
.cj-prog i { width: 14px; height: 4px; border-radius: 2px; background: #dfe6e4; transition: background .4s; }
.cj-prog i:first-child, .pw.s2 .cj-prog i:nth-child(2), .pw.s3 .cj-prog i { background: #0f8f74; }
.cj-st { position: absolute; inset: 87px 0 0; padding: 16px; display: flex; flex-direction: column; gap: 9px; transition: opacity .35s, transform .35s; }
.cj-st h4 { margin: 0 0 2px; font: 600 16px/1.25 var(--display, Inter), sans-serif; letter-spacing: -.01em; color: #15122b; }
.cj-st p { margin: 0; font-size: 12px; line-height: 1.45; color: #5c6370; }
.cj-pre { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 8px; background: #e9f6f2; color: #0f6b57; font-size: 11.5px; font-weight: 500; }
.cj-pre svg { width: 13px; height: 13px; flex: none; }
.cj-f { padding: 8px 10px; border: 1px solid #e3e6ea; border-radius: 9px; font-size: 12px; color: #15122b; }
.cj-f small { display: block; font-size: 10.5px; color: #7a808c; margin-bottom: 1px; }
.cj-file { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px dashed #b9d9cf; border-radius: 9px; font-size: 12px; color: #15122b; background: #f7fbfa; }
.cj-file svg { width: 16px; height: 16px; flex: none; color: #0f8f74; }
.cj-file em { margin-left: auto; font-style: normal; font-size: 10.5px; color: #0f8f74; font-weight: 600; }
.cj-btn { margin-top: auto; display: block; text-align: center; padding: 10px; border-radius: 10px; background: #0f8f74; color: #fff; font-size: 12.5px; font-weight: 600; }
.cj-btn.pressed { transform: scale(.97); }
.cj-done { align-items: center; justify-content: center; text-align: center; }
.cj-done .cj-tick { width: 46px; height: 46px; border-radius: 50%; background: #e2f4ee; display: grid; place-items: center; color: #0f8f74; }
.cj-done .cj-tick svg { width: 22px; height: 22px; }
/* one screen at a time */
.cj-s2, .cj-s3 { opacity: 0; transform: translateX(18px); pointer-events: none; }
.pw.s2 .cj-s2, .pw.s3 .cj-s3 { opacity: 1; transform: none; }
.pw.s2 .cj-s1, .pw.s3 .cj-s1, .pw.s3 .cj-s2 { opacity: 0; transform: translateX(-18px); }
/* the case beside the phone */
.cj-case { background: #fff; border: 1px solid var(--hl, #e9e7f2); border-radius: 14px; padding: 14px 15px 12px; box-shadow: 0 24px 50px -30px rgba(20, 12, 60, .35); min-width: 0; }
.cj-ch { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--hl, #eeedf3); min-width: 0; }
.cj-ch b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cj-ch > span:last-child { min-width: 0; }
.cj-ch b { display: block; }
.cj-ch .pw-mono { display: block; font-size: 10.5px; margin-top: 2px; }
.cj-r { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f2f1f6; font-size: 12.5px; color: #3d4250; }
.cj-r:last-of-type { border-bottom: 0; }
.cj-r span { min-width: 0; }
.cj-r small { display: block; font-size: 11px; color: #7a808c; }
.cj-r .pw-chip { flex: none; }
.cj-r .now { display: none; }
.pw.s2 .cj-r.r1 .was, .pw.s2 .cj-r.r2 .was, .pw.s3 .cj-r .was { display: none; }
.pw.s2 .cj-r.r1 .now, .pw.s2 .cj-r.r2 .now, .pw.s3 .cj-r .now { display: inline-flex; }
.cj-out { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: #6b7083; }
.cj-out .ready { display: none; color: #14805e; font-weight: 600; }
.pw.s3 .cj-out .left { display: none; }
.pw.s3 .cj-out .ready { display: inline; }
@media (max-width: 560px) {
  .cj { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 16px; }
  .cj-ph { width: 236px; height: 400px; }
  .cj-case { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .cj-st { transition: none; } }


/* ---- the way into the day on Zenoo, at the end of Decide ---- */
.hm-day { margin: 28px 0 0; font-size: 15px; color: var(--ink-2, #4f5468); }
.hm-day a { color: var(--accent, #6450fa); font-weight: 500; text-decoration: none; }
.hm-day a:hover { text-decoration: underline; }

/* ---- Collect: the ways in ---- */
.cj-ways { list-style: none; margin: 18px 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cj-ways li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--hairline, #e7e5e0); border-radius: 999px; background: #fff; font-size: 13.5px; font-weight: 500; color: var(--ink, #202124); }
.cj-ways svg { width: 15px; height: 15px; color: var(--accent, #6450fa); flex: none; }

/* ---- one case: what is inside it, each linking to its feature page ---- */
.oc-tiles { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.oc-tiles a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px 16px 15px; border: 1px solid var(--hairline, #e7e5e0); border-radius: 14px; background: #fff; text-decoration: none; color: inherit; transition: border-color .2s, box-shadow .2s, transform .2s; }
.oc-tiles a:hover { border-color: #cfc8ff; box-shadow: 0 14px 30px -20px rgba(20, 12, 60, .35); transform: translateY(-1px); }
.oc-ic { width: 30px; height: 30px; border-radius: 8px; background: #f1efff; color: var(--accent, #6450fa); display: grid; place-items: center; margin-bottom: 6px; }
.oc-ic svg { width: 16px; height: 16px; }
.oc-tiles b { font-size: 14.5px; font-weight: 600; color: var(--ink, #202124); }
.oc-tiles b::after { content: " \2192"; color: var(--accent, #6450fa); opacity: 0; transition: opacity .2s; }
.oc-tiles a:hover b::after { opacity: 1; }
.oc-tiles small { font-size: 13px; line-height: 1.45; color: var(--ink-2, #5f6368); }
@media (max-width: 980px) { .oc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .oc-tiles { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .oc-tiles a { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; row-gap: 1px; padding: 12px 14px; }
  .oc-ic { grid-row: span 2; margin: 2px 0 0; }
}

/* ---- the engine underneath: one application runs through it ---- */
.eng { position: relative; margin: 32px 0 0; padding: 28px 24px 56px; border-radius: 18px; background: #fbfbfa radial-gradient(#dedbd4 1px, transparent 1px) 0 0 / 14px 14px; border: 1px solid var(--hairline, #e7e5e0); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; overflow: hidden; }
.eng-line { position: absolute; left: 12%; right: 12%; top: calc(50% - 15px); height: 2px; background: #e4e1f3; }
.eng-line i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #8b74ff, #e8559a, #f6844b); transition: width 1s cubic-bezier(.6, 0, .3, 1); }
.pw.a2 .eng-line i { width: 33.3%; } .pw.a3 .eng-line i { width: 66.6%; } .pw.a4 .eng-line i { width: 100%; }
.eng-n { position: relative; z-index: 1; background: #fff; border: 1px solid var(--hairline, #e7e5e0); border-radius: 12px; padding: 14px; box-shadow: 0 12px 28px -22px rgba(20, 12, 60, .4); display: flex; flex-direction: column; gap: 3px; transition: border-color .4s, box-shadow .4s; }
.eng-n b { font-size: 14px; font-weight: 600; color: var(--ink, #202124); }
.eng-n small { font-size: 12.5px; color: var(--ink-2, #5f6368); }
.eng-k { width: 22px; height: 22px; border-radius: 50%; background: #f1efff; color: var(--accent, #6450fa); display: grid; place-items: center; font: 600 11px/1 var(--mono, ui-monospace), monospace; margin-bottom: 6px; transition: background .4s, color .4s; }
.pw.a1 .n1, .pw.a2 .n2, .pw.a3 .n3, .pw.a4 .n4 { border-color: #cfc8ff; box-shadow: 0 16px 34px -20px rgba(100, 80, 250, .45); }
.pw.a1 .n1 .eng-k, .pw.a2 .n2 .eng-k, .pw.a3 .n3 .eng-k { background: var(--accent, #6450fa); color: #fff; }
.eng-end .eng-k { background: #15122b; border-radius: 7px; }
.eng-end .eng-k svg { width: 12px; height: 12px; }
.eng-st { align-self: flex-start; margin-top: 8px; padding: 3px 8px; border-radius: 999px; background: #f1efff; color: #4b3bd6; font-size: 11.5px; font-weight: 600; }
.eng-st.amb { background: #fdf1df; color: #a15c00; }
.eng-st.grn { background: #e5f5ee; color: #14805e; }
.pw.eng > .pw-replay { position: absolute; right: 14px; bottom: 12px; left: auto; top: auto; margin: 0; }
.eng-tags { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.eng-tags li { padding: 5px 10px; border-radius: 7px; background: #f3f2ef; font: 500 12px/1.3 var(--mono, ui-monospace), monospace; color: var(--ink-2, #5f6368); }
@media (max-width: 760px) {
  .eng { grid-template-columns: minmax(0, 1fr); padding: 18px 18px 52px; gap: 10px; }
  .eng-line { left: 29px; right: auto; top: 30px; bottom: 80px; width: 2px; height: auto; }
  .eng-line i { inset: 0 0 auto 0; width: 100%; height: 0; background: linear-gradient(180deg, #8b74ff, #e8559a, #f6844b); transition: height 1s cubic-bezier(.6, 0, .3, 1); }
  .pw.a2 .eng-line i { width: 100%; height: 33.3%; } .pw.a3 .eng-line i { width: 100%; height: 66.6%; } .pw.a4 .eng-line i { width: 100%; height: 100%; }
}
@media (prefers-reduced-motion: reduce) { .eng-line i, .eng-n, .eng-k { transition: none; } }

/* ---- one case: the tiles carry it; the tab viewer is smaller, and on phones it gives way to the tiles ---- */
#case .cs-tabs { max-width: 920px; }
@media (max-width: 560px) { #case .cs-tabs { display: none; } }