/* ==========================================================================
   How We Work page
   Its own sunset colours: rose #fb7185, orange #fb923c, amber #facc15 on warm plum.
   HTML: template-parts/how-we-work/
   ========================================================================== */

/* Shared heading style for this page ----------------------------------- */
.zig__head { max-width: 760px; margin: 0 auto clamp(22px, 3vw, 34px); text-align: center; }
/* Tighter, even spacing between every section on this page */
.stairs, .idcards, .rhythm, .term, .qa, .always, .gantt, .tickets, .notes, .pq, .stepone { padding-block: clamp(26px, 3vw, 44px); }
.stairs { padding-top: clamp(30px, 3.5vw, 48px); }
.zig__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(251, 113, 133, .12); border: 1px solid rgba(251, 146, 60, .4); color: #fdba74; font-family: var(--font-display); font-size: .76rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.zig__title { margin: 14px 0 10px; font-size: clamp(1.9rem, 3.8vw, 3rem); line-height: 1.1; letter-spacing: -.03em; }
.zig__title span { background: linear-gradient(100deg, #fb7185, #fb923c 50%, #facc15); -webkit-background-clip: text; background-clip: text; color: transparent; }
.zig__title--left { text-align: left; }
.zig__lead { margin: 0; color: #e7c9cf; }

/* Hero with process dial ------------------------------------------------ */
.hwhero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: calc(var(--header-h) + clamp(24px, 3.5vw, 48px)) 0 clamp(20px, 3vw, 40px);
	background: radial-gradient(110% 90% at 80% 10%, #3b0f2a 0%, #1d0a1f 45%, var(--bg) 100%);
}
.hwhero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hwhero__sun { position: absolute; right: 6%; top: 8%; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(251, 146, 60, .45), rgba(251, 113, 133, .2) 45%, transparent 70%); filter: blur(30px); animation: breathe 9s ease-in-out infinite; }
.hwhero__lines { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(251, 146, 60, .06) 0 1px, transparent 1px 34px); mask-image: linear-gradient(180deg, transparent, #000 40%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, transparent); }
.hwhero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
.hwhero__grid > * { min-width: 0; }
.hwhero__text { display: flex; flex-direction: column; align-items: flex-start; }
.hwhero .breadcrumbs ol { justify-content: flex-start; margin-bottom: 18px; background: rgba(251, 113, 133, .08); border-color: rgba(251, 113, 133, .3); }
.hwhero .breadcrumbs a:hover { color: #fdba74; }
.hwhero__badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: 10px; background: linear-gradient(90deg, #fb7185, #fb923c); color: #2b0a14; font-family: var(--font-display); font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; transform: rotate(-2deg); }
.hwhero__title { margin: 18px 0 16px; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.05; letter-spacing: -.035em; }
.hwhero__accent { background: linear-gradient(100deg, #fb7185, #fb923c 50%, #facc15); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hwhero__subtitle { max-width: 560px; margin: 0 0 26px; color: #f0d4da; font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.7; }
.hwhero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hwhero__btn { background: linear-gradient(110deg, #f43f5e, #fb923c 60%, #facc15); color: #2b0a14; box-shadow: 0 14px 34px -14px rgba(251, 113, 133, .9); }
.hwhero__btn:hover { color: #2b0a14; transform: translateY(-2px); }
.hwhero__btn--ghost { background: rgba(43, 10, 20, .5); color: #ffe4e6; box-shadow: inset 0 0 0 1px rgba(251, 146, 60, .45); }
.hwhero__btn--ghost:hover { color: #fff; background: rgba(251, 113, 133, .15); }

.hwdial { --r: 168px; position: relative; justify-self: center; width: 440px; max-width: 100%; aspect-ratio: 1; }
.hwdial__glow { position: absolute; inset: 15%; border-radius: 50%; background: conic-gradient(from 0deg, #fb7185, #fb923c, #facc15, #f472b6, #c084fc, #f97316, #fb7185); filter: blur(40px); opacity: .35; animation: spin 20s linear infinite; }
.hwdial__ring { position: absolute; inset: calc(50% - var(--r)); border-radius: 50%; border: 2px dashed rgba(251, 146, 60, .35); }
.hwdial__node { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(calc(var(--i) * 60deg - 90deg)) translateX(var(--r)) rotate(calc(var(--i) * -60deg + 90deg)); }
.hwdial__dot { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: #1d0a1f; border: 2px solid var(--nc); color: var(--nc); box-shadow: 0 0 22px -4px var(--nc); }
.hwdial__name { position: absolute; left: 50%; top: 32px; transform: translateX(-50%); white-space: nowrap; color: #fde7ea; font-size: .76rem; font-weight: 600; }
.hwdial__center { position: absolute; inset: calc(50% - 82px); display: grid; place-content: center; text-align: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4a1530, #1d0a1f 75%); border: 1px solid rgba(251, 146, 60, .4); box-shadow: 0 0 60px -10px rgba(251, 113, 133, .7); }
.hwdial__center strong { font-family: var(--font-display); font-size: 3.4rem; line-height: 1; background: linear-gradient(180deg, #fff, #fb923c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hwdial__center small { color: #fdba74; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: .72rem; }
.hwdial__center em { margin-top: 4px; color: #f0d4da; font-size: .8rem; }

/* Roadmap: growth staircase ------------------------------------------- */
.stairs__list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; align-items: stretch; }
.stairs__list::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, #fb7185, #fb923c, #facc15, #f472b6, #c084fc, #f97316); box-shadow: 0 0 16px rgba(251, 146, 60, .6); }
.stairs__step { --zc: #fb7185; display: flex; flex-direction: column; padding-top: calc((5 - var(--i)) * 40px); }
.stairs__card { flex: 1 0 auto; position: relative; z-index: 1; padding: 18px 16px 16px; border-radius: 18px 18px 6px 6px; background: linear-gradient(170deg, color-mix(in srgb, var(--zc) 16%, #170a15), #0f0811); border: 1px solid color-mix(in srgb, var(--zc) 35%, transparent); border-bottom: 0; transition: translate .5s var(--ease), box-shadow .5s, border-color .3s; }
.stairs__step:hover .stairs__card { translate: 0 -8px; border-color: var(--zc); box-shadow: 0 30px 50px -30px var(--zc); }
.stairs__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.stairs__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--zc); color: #2b0a14; box-shadow: 0 8px 20px -8px var(--zc); }
.stairs__time { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; background: color-mix(in srgb, var(--zc) 18%, transparent); color: var(--zc); font-size: .7rem; font-weight: 700; white-space: nowrap; }
.stairs__name { margin: 0 0 6px; font-size: 1rem; line-height: 1.25; }
.stairs__text { margin: 0 0 10px; color: #e3cdd2; font-size: .82rem; line-height: 1.5; }
.stairs__points { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; }
.stairs__points li { position: relative; padding-left: 14px; color: #fde7ea; font-size: .76rem; line-height: 1.4; }
.stairs__points li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--zc); }
.stairs__role { margin: 0; padding-top: 10px; border-top: 1px dashed color-mix(in srgb, var(--zc) 35%, transparent); color: #fff; font-size: .78rem; line-height: 1.45; }
.stairs__role strong { display: block; color: var(--zc); }
.stairs__bar { flex: none; position: relative; height: calc(56px + var(--i) * 40px); border-radius: 0 0 4px 4px; background: linear-gradient(180deg, var(--zc), color-mix(in srgb, var(--zc) 35%, #1a0a16)); box-shadow: 0 0 30px -10px var(--zc), inset 0 1px 0 rgba(255, 255, 255, .35); overflow: hidden; }
.stairs__bar::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .1) 0 8px, transparent 8px 16px); }
.stairs__num { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1; color: rgba(43, 10, 20, .75); }
.stairs__flag { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: #2b0a14; color: #facc15; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.stairs__step.is-visible .stairs__bar { animation: stairs-rise .9s var(--ease) both; animation-delay: calc(var(--i) * .08s); transform-origin: bottom; }
@keyframes stairs-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Who does what: team ID cards ----------------------------------------- */
.idcards__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.idcard { --ic: #fb7185; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 16px 0; border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, #1c0d1c, #120812); border: 1px solid color-mix(in srgb, var(--ic) 35%, transparent); transition: transform .5s var(--ease), box-shadow .5s; transform-origin: 50% -30px; }
.idcard:hover { transform: rotate(-2deg) translateY(-4px); box-shadow: 0 30px 60px -30px var(--ic); }
.idcard:nth-child(even):hover { transform: rotate(2deg) translateY(-4px); }
.idcard__clip { position: absolute; top: 10px; left: 50%; width: 38px; height: 8px; margin-left: -19px; border-radius: 999px; background: #0a0510; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .8), 0 0 0 1px color-mix(in srgb, var(--ic) 40%, transparent); }
.idcard__top { display: flex; justify-content: space-between; width: 100%; margin-bottom: 16px; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: color-mix(in srgb, var(--ic) 80%, #fff); }
.idcard__no { font-family: var(--font-display); font-weight: 700; }
.idcard__icon { width: 70px; height: 70px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--ic) 70%, #fff 0%), color-mix(in srgb, var(--ic) 35%, #1c0d1c)); border: 3px solid #1c0d1c; box-shadow: 0 0 0 2px var(--ic), 0 12px 28px -12px var(--ic); color: #fff; }
.idcard__role { font-size: 1.02rem; margin-bottom: 8px; }
.idcard__text { color: #d9c3c9; font-size: .84rem; line-height: 1.5; margin-bottom: 18px; }
.idcard__bar { margin-top: auto; width: calc(100% + 32px); height: 26px; background: repeating-linear-gradient(90deg, var(--ic) 0 2px, transparent 2px 5px, var(--ic) 5px 6px, transparent 6px 10px); opacity: .55; }

/* Update rhythm: calendars --------------------------------------------- */
.rhythm__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rhythm__card { --rc: #fb7185; padding: 22px 20px; border-radius: 22px; background: rgba(255, 255, 255, .02); border: 1px solid color-mix(in srgb, var(--rc) 30%, transparent); border-top: 4px solid var(--rc); transition: translate .5s var(--ease), box-shadow .5s; }
.rhythm__card:hover { translate: 0 -5px; box-shadow: 0 26px 50px -28px var(--rc); }
.rhythm__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.rhythm__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--rc) 18%, transparent); color: var(--rc); }
.rhythm__name { margin: 0; font-size: 1.15rem; }
.rhythm__cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 16px; padding: 12px; border-radius: 14px; background: rgba(0, 0, 0, .25); }
.rhythm__cal i { aspect-ratio: 1; border-radius: 4px; background: rgba(255, 255, 255, .06); }
.rhythm__cal i.on { background: var(--rc); box-shadow: 0 0 8px color-mix(in srgb, var(--rc) 70%, transparent); }
.rhythm__cal--quarter { grid-template-columns: repeat(4, 1fr); min-height: 134px; }
.rhythm__cal--quarter b { display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--rc) 18%, transparent); border: 1px solid var(--rc); color: var(--rc); font-family: var(--font-display); font-size: .9rem; }
.rhythm__text { margin: 0; color: #e3cdd2; font-size: .9rem; }

/* Tools terminal -------------------------------------------------------- */
.term__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.term__text p { color: #e3cdd2; }
.term__window { border-radius: 18px; overflow: hidden; background: #0c0710; border: 1px solid rgba(251, 146, 60, .3); box-shadow: 0 40px 80px -40px rgba(251, 113, 133, .7); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.term__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #1a0e18; border-bottom: 1px solid rgba(251, 146, 60, .2); }
.term__bar i { width: 12px; height: 12px; border-radius: 50%; background: #fb7185; }
.term__bar i:nth-child(2) { background: #facc15; }
.term__bar i:nth-child(3) { background: #4ade80; }
.term__bar span { margin-left: 10px; color: #b89aa2; font-size: .8rem; }
.term__body { padding: 18px 20px 20px; }
.term__block { margin-bottom: 14px; }
.term__cmd { margin: 0 0 8px; color: #fde7ea; font-size: .86rem; }
.term__prompt { color: #fb923c; margin-right: 6px; }
.term__arg { color: #facc15; }
.term__comment { color: #8e6f78; }
.term__tools { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0 0 0 18px; }
.term__tools li { --tc: #fb923c; padding: 4px 10px; border-radius: 6px; background: color-mix(in srgb, var(--tc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--tc) 45%, transparent); color: #fff; font-size: .78rem; }
.term__cmd--last { margin: 6px 0 0; }
.term__ok { color: #4ade80; }
.term__cursor { display: inline-block; width: 8px; height: 1em; margin-left: 4px; vertical-align: -2px; background: #fb923c; animation: term-blink 1s steps(1) infinite; }
@keyframes term-blink { 50% { opacity: 0; } }

/* Quality checklist: clipboard ----------------------------------------- */
.qa__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.qa__board { position: relative; padding: 46px 26px 26px; border-radius: 22px; background: linear-gradient(180deg, #2a1220, #160a14); border: 1px solid rgba(251, 146, 60, .3); box-shadow: 0 40px 80px -45px rgba(251, 146, 60, .8); transform: rotate(-1.5deg); }
.qa__clip { position: absolute; top: -14px; left: 50%; width: 120px; height: 34px; margin-left: -60px; border-radius: 10px; background: linear-gradient(180deg, #fbbf24, #f97316); box-shadow: 0 6px 14px rgba(0, 0, 0, .5); }
.qa__clip::after { content: ""; position: absolute; top: 9px; left: 50%; width: 30px; height: 10px; margin-left: -15px; border-radius: 999px; background: #160a14; }
.qa__board-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 12px; border-bottom: 2px dashed rgba(251, 146, 60, .25); }
.qa__board-head strong { display: block; font-family: var(--font-display); font-size: 1.15rem; }
.qa__board-head small { color: #fdba74; font-size: .8rem; }
.qa__score { position: relative; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#4ade80 calc(var(--p) * 1%), rgba(255, 255, 255, .1) 0); }
.qa__score::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #1f0e1a; }
.qa__score b { position: relative; font-family: var(--font-display); font-size: .9rem; color: #4ade80; }
.qa__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.qa__list li { display: flex; align-items: flex-start; gap: 10px; color: #f5e1e5; font-size: .86rem; line-height: 1.4; }
.qa__box { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; background: #4ade80; color: #052e16; stroke-width: 3.2; }
.qa__text p { color: #e3cdd2; }
.qa__stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.qa__stats span { flex: 1; min-width: 110px; padding: 14px; border-radius: 16px; background: rgba(251, 146, 60, .08); border: 1px solid rgba(251, 146, 60, .25); color: #e3cdd2; font-size: .82rem; }
.qa__stats strong { display: block; font-family: var(--font-display); font-size: 1.6rem; color: #fdba74; }

/* Typical timelines: gantt bars ---------------------------------------- */
.gantt__chart { padding: clamp(18px, 3vw, 30px); border-radius: 24px; background: rgba(255, 255, 255, .02); border: 1px solid rgba(251, 146, 60, .22); }
.gantt__scale, .gantt__row { display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: 16px; }
.gantt__scale { position: relative; margin-bottom: 10px; height: 20px; }
.gantt__scale b { position: absolute; left: calc(190px + 16px + (100% - 206px) * var(--w) / 12); transform: translateX(-50%); color: #b89aa2; font-size: .72rem; font-weight: 600; }
.gantt__row { padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, .05); }
.gantt__name { color: #fde7ea; font-weight: 600; font-size: .92rem; }
.gantt__track { position: relative; height: 34px; border-radius: 10px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px calc(100% / 12)); }
.gantt__bar { position: absolute; top: 3px; bottom: 3px; left: calc(100% * var(--s) / 12); width: max(calc(100% * (var(--e) - var(--s)) / 12), 118px); display: flex; align-items: center; padding: 0 12px; border-radius: 8px; background: linear-gradient(90deg, var(--gc), color-mix(in srgb, var(--gc) 55%, #facc15)); color: #2b0a14; font-size: .78rem; font-weight: 700; white-space: nowrap; box-shadow: 0 8px 20px -10px var(--gc); transform-origin: left; }
.gantt__chart.is-visible .gantt__bar { animation: gantt-grow 1s var(--ease) both; }
.gantt__row:nth-child(3) .gantt__bar { animation-delay: .1s; }
.gantt__row:nth-child(4) .gantt__bar { animation-delay: .2s; }
.gantt__row:nth-child(5) .gantt__bar { animation-delay: .3s; }
.gantt__row:nth-child(6) .gantt__bar { animation-delay: .4s; }
.gantt__row:nth-child(7) .gantt__bar { animation-delay: .5s; }
@keyframes gantt-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Process questions ----------------------------------------------------- */
.pq__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pq__card { --qc: #fb7185; position: relative; overflow: hidden; padding: 24px 22px; border-radius: 20px; background: linear-gradient(160deg, color-mix(in srgb, var(--qc) 10%, transparent), rgba(255, 255, 255, .015)); border-left: 4px solid var(--qc); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.pq__mark { position: absolute; right: 10px; bottom: -26px; font-family: var(--font-display); font-size: 7rem; font-weight: 800; line-height: 1; color: color-mix(in srgb, var(--qc) 12%, transparent); }
.pq__q { position: relative; margin-bottom: 10px; font-size: 1.05rem; color: #fff; }
.pq__a { position: relative; margin: 0; color: #e3cdd2; font-size: .9rem; }

/* Start step one: closing call to action ------------------------------- */
.stepone__box { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: 1.3fr auto; gap: 28px; align-items: center; padding: clamp(28px, 4.5vw, 52px); border-radius: 30px; background: radial-gradient(80% 120% at 0% 0%, rgba(255, 255, 255, .14), transparent 55%), linear-gradient(120deg, #9f1239, #c2410c 55%, #b45309); color: #fff; box-shadow: 0 40px 90px -40px rgba(251, 113, 133, .9), inset 0 0 0 1px rgba(255, 255, 255, .18); }
.stepone__ghost { position: absolute; z-index: -1; left: 48%; top: 50%; transform: translate(-50%, -50%); font-family: var(--font-display); font-size: 18rem; font-weight: 800; line-height: 1; color: rgba(255, 255, 255, .04); pointer-events: none; }
.stepone__text, .stepone__actions { position: relative; }
.stepone__tag { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35); color: #fff; font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.stepone__title { margin: 14px 0 10px; color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.12; letter-spacing: -.03em; text-shadow: 0 2px 18px rgba(80, 7, 30, .45); }
.stepone__text p { margin: 0; color: #ffedd5; font-size: 1.05rem; font-weight: 500; line-height: 1.65; max-width: 580px; }
.stepone__actions { display: grid; gap: 10px; justify-items: stretch; }
.stepone__btn { justify-content: center; background: #fff; color: #9f1239; font-weight: 700; box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .6); }
.stepone__btn:hover { color: #881337; transform: translateY(-2px); background: #fff7ed; }
.stepone__btn--light { gap: 8px; background: #22c55e; color: #052e16; }
.stepone__btn--light:hover { color: #052e16; background: #4ade80; }
.stepone__actions small { text-align: center; color: #fff; font-weight: 600; font-size: .84rem; opacity: .9; }

/* Responsive ------------------------------------------------------------ */
@media (max-width: 1180px) {
	.idcards__grid { grid-template-columns: repeat(3, 1fr); }
	.rhythm__grid { grid-template-columns: repeat(2, 1fr); }
	.pq__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
	.hwhero__grid, .term__grid, .qa__grid { grid-template-columns: 1fr; }
	.hwdial { width: 400px; }
	.stepone__box { grid-template-columns: 1fr; }
	.qa__board { transform: none; }
}
@media (max-width: 1180px) {
	.stairs__list { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
	.stairs__list::after { display: none; }
	.stairs__step { padding-top: calc((2 - var(--i3)) * 40px); }
	.stairs__bar { height: calc(48px + var(--i3) * 40px); }
}
@media (max-width: 680px) {
	.stairs__list { grid-template-columns: 1fr; row-gap: 14px; }
	.stairs__step { flex-direction: row-reverse; align-items: stretch; padding-top: 0; }
	.stairs__card { flex: 1; border-radius: 0 18px 18px 0; border-bottom: 1px solid color-mix(in srgb, var(--zc) 35%, transparent); border-left: 0; }
	.stairs__bar { flex: none; width: 54px; height: auto; border-radius: 18px 0 0 18px; }
	.stairs__num { bottom: auto; top: 14px; font-size: 1.4rem; }
	.stairs__flag { display: none; }
	.stairs__step.is-visible .stairs__bar { animation: none; }
}
@media (max-width: 680px) {
	.idcards__grid { grid-template-columns: 1fr 1fr; }
	.qa__list { grid-template-columns: 1fr; }
	.gantt__scale { display: none; }
	.gantt__row { grid-template-columns: 1fr; gap: 6px; }
	.hwdial { --r: 128px; width: 330px; }
	.hwdial__center { inset: calc(50% - 64px); }
	.hwdial__center strong { font-size: 2.6rem; }
	.hwdial__dot { left: -22px; top: -22px; width: 44px; height: 44px; }
	.hwdial__name { top: 26px; font-size: .68rem; }
	.hwhero__actions .btn { width: 100%; justify-content: center; }
}
@media (max-width: 560px) {
	.rhythm__grid, .pq__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .hwhero__sun, .hwdial__glow, .term__cursor { animation: none; } }

/* Process in numbers: scrolling ribbon --------------------------------- */
.numribbon { position: relative; padding: clamp(24px, 3vw, 40px) 0; overflow: hidden; }
.numribbon__band { display: flex; width: max-content; padding: 18px 0; background: linear-gradient(90deg, #f43f5e, #fb923c 50%, #facc15); transform: rotate(-2deg); transform-origin: 56vw 50%; box-shadow: 0 24px 60px -30px rgba(251, 113, 133, .9); margin-left: -6vw; }
.numribbon__track { list-style: none; display: flex; flex: none; margin: 0; padding: 0; animation: marquee 32s linear infinite; }
.numribbon__track li { display: inline-flex; align-items: baseline; gap: 10px; padding: 0 22px; color: #2b0a14; white-space: nowrap; }
.numribbon__track strong { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1; }
.numribbon__track span { font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; }
.numribbon__track i { font-style: normal; font-size: 1.2rem; margin-left: 12px; opacity: .6; }
.numribbon:hover .numribbon__track { animation-play-state: paused; }

/* Ways to work together: tickets --------------------------------------- */
.tickets__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ticket { --tk: #fb7185; display: flex; flex-direction: column; filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .35)); transition: transform .5s var(--ease); }
.ticket:hover { transform: translateY(-6px) rotate(-.6deg); }
.ticket__main, .ticket__stub { position: relative; background: linear-gradient(160deg, color-mix(in srgb, var(--tk) 16%, #1c0d1c), #130912); }
.ticket__main { flex: 1; padding: 26px 24px 22px; border-radius: 22px 22px 0 0; border: 1px solid color-mix(in srgb, var(--tk) 35%, transparent); border-bottom: 0; }
.ticket__main::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 0; border-bottom: 2px dashed color-mix(in srgb, var(--tk) 45%, transparent); }
.ticket__stub { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; border-radius: 0 0 22px 22px; border: 1px solid color-mix(in srgb, var(--tk) 35%, transparent); border-top: 0; background: color-mix(in srgb, var(--tk) 18%, #130912); }
.ticket__stub::before, .ticket__stub::after { content: ""; position: absolute; top: -12px; width: 24px; height: 24px; border-radius: 50%; background: var(--bg); }
.ticket__stub::before { left: -12px; box-shadow: inset -1px 0 0 color-mix(in srgb, var(--tk) 35%, transparent); }
.ticket__stub::after { right: -12px; box-shadow: inset 1px 0 0 color-mix(in srgb, var(--tk) 35%, transparent); }
.ticket__icon { width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 16px; border-radius: 14px; background: var(--tk); color: #2b0a14; box-shadow: 0 10px 24px -10px var(--tk); }
.ticket__name { font-size: 1.3rem; margin-bottom: 6px; }
.ticket__text { color: #e3cdd2; font-size: .9rem; margin-bottom: 16px; }
.ticket__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ticket__list li { display: flex; align-items: center; gap: 8px; color: #fde7ea; font-size: .9rem; }
.ticket__list .std-icon { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: color-mix(in srgb, var(--tk) 25%, transparent); color: var(--tk); stroke-width: 3; }
.ticket__price { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--tk); text-transform: uppercase; letter-spacing: .06em; }
.ticket__link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--tk); color: #2b0a14; font-size: .82rem; font-weight: 700; }
.ticket__link:hover { color: #2b0a14; filter: brightness(1.1); }

/* We always / we never --------------------------------------------------- */
.always__board { position: relative; display: grid; grid-template-columns: 1fr 1fr; border-radius: 28px; overflow: hidden; border: 1px solid rgba(251, 146, 60, .25); }
.always__col { padding: clamp(24px, 3.5vw, 40px); }
.always__col--yes { background: linear-gradient(160deg, rgba(74, 222, 128, .12), rgba(74, 222, 128, .02)); }
.always__col--no { background: linear-gradient(200deg, rgba(251, 113, 133, .14), rgba(251, 113, 133, .02)); }
.always__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 1.4rem; }
.always__head span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; stroke-width: 3; }
.always__col--yes .always__head span { background: #4ade80; color: #052e16; }
.always__col--no .always__head span { background: #fb7185; color: #2b0a14; }
.always__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.always__col li { position: relative; padding: 12px 0 12px 30px; border-bottom: 1px dashed rgba(255, 255, 255, .08); color: #fde7ea; font-weight: 500; }
.always__col li:last-child { border-bottom: 0; }
.always__col li::before { position: absolute; left: 0; top: 12px; font-weight: 800; }
.always__col--yes li::before { content: "✓"; color: #4ade80; }
.always__col--no li::before { content: "✕"; color: #fb7185; }
.always__col--no li { color: #e8c6cd; }
.always__vs { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #fb923c, #facc15); color: #2b0a14; font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; box-shadow: 0 0 0 6px var(--bg); }

/* Get ready: sticky notes ----------------------------------------------- */
.notes__wall { list-style: none; margin: 0; padding: 10px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 22px; }
.note { --nc: #fb7185; position: relative; padding: 30px 22px 22px; border-radius: 4px 4px 18px 4px; background: linear-gradient(170deg, var(--nc), color-mix(in srgb, var(--nc) 75%, #000)); color: #2b0a14; box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .7); rotate: -1.6deg; transition: rotate .45s var(--ease), scale .45s var(--ease); }
.note:nth-child(even) { rotate: 1.4deg; }
.note:nth-child(3n) { rotate: -.6deg; }
.note:hover { rotate: 0deg; scale: 1.03; z-index: 1; }
.note::after { content: ""; position: absolute; right: 0; bottom: 0; width: 34px; height: 34px; border-radius: 0 0 18px 0; background: linear-gradient(135deg, rgba(0, 0, 0, .18) 50%, rgba(255, 255, 255, .25) 50%); }
.note__pin { position: absolute; top: -10px; left: 50%; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #e11d48 45%, #7f1d1d); box-shadow: 0 4px 6px rgba(0, 0, 0, .5); }
.note__num { font-family: var(--font-display); font-weight: 800; font-size: .85rem; opacity: .6; }
.note__title { margin: 4px 0 8px; color: #2b0a14; font-size: 1.25rem; }
.note__text { margin: 0; color: #3b0d1c; font-size: .92rem; font-weight: 500; }

@media (max-width: 1024px) {
	.tickets__grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
	.notes__wall { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
	.always__board { grid-template-columns: 1fr; }
	.always__vs { position: static; margin: -28px auto; z-index: 1; }
	.notes__wall { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .numribbon__track { animation: none; } }