/* =========================================================================
   The BoomWriter process: an animated walkthrough on the BoomWriter overview.
   Six steps on the left; a BoomWriter screen on the right acts each one out.
   Steps move on by themselves while on screen (with a pause button), or
   people click a step. With reduced motion there's no autoplay and every
   panel shows its finished state.
   ========================================================================= */

.bwp { --o: #e0620b; --od: #b34d06; --os: #fff1e6; --ink: #2f3437; --muted: #6b7178; --indigo: #212771;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; margin-top: 44px; text-align: left; }

/* ---- the steps ---- */
.bwp-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bwp-step { position: relative; display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: center; width: 100%; overflow: hidden;
  padding: 14px 16px; border: 2px solid transparent; border-radius: 18px; background: #fff; color: var(--ink); text-align: left;
  font: inherit; cursor: pointer; box-shadow: 0 8px 20px rgba(33, 39, 113, 0.07); transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.bwp-step:hover { transform: translateX(3px); }
.bwp-step:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.bwp-step__n { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: var(--os); color: var(--od); font-weight: 800; transition: background 0.2s ease, color 0.2s ease; }
.bwp-step__txt b { display: block; font-size: 1.02rem; font-weight: 800; line-height: 1.3; }
.bwp-step__txt small { display: block; margin-top: 2px; color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
.bwp-step[aria-pressed="true"] { border-color: var(--o); box-shadow: 0 14px 30px rgba(224, 98, 11, 0.18); }
.bwp-step[aria-pressed="true"] .bwp-step__n { background: var(--o); color: #fff; }
.bwp-step__bar { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--o); transform: scaleX(0); transform-origin: left; }
.bwp.is-playing .bwp-step[aria-pressed="true"] .bwp-step__bar { animation: bwp-bar var(--bwp-dur, 5s) linear forwards; }
@keyframes bwp-bar { to { transform: scaleX(1); } }

/* ---- the device ---- */
.bwp-device { position: relative; }
.bwp-screen { container-type: inline-size; overflow: hidden; border: 10px solid #1d1f2b; border-radius: 26px; background: #fbf8f4; box-shadow: 0 24px 50px rgba(33, 39, 113, 0.22); }
.bwp-bar { display: flex; align-items: center; gap: 1.2cqw; padding: 2cqw 2.6cqw; background: linear-gradient(135deg, #e0620b, #f59a2f); color: #fff; font-size: 2.4cqw; }
.bwp-bar__dot { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: rgba(255, 255, 255, 0.6); }
.bwp-bar b { margin-left: 1cqw; font-weight: 800; }
.bwp-bar__label { margin-left: auto; padding: 0.4cqw 1.8cqw; border-radius: 99px; background: rgba(255, 255, 255, 0.22); font-weight: 700; }
.bwp-stage { position: relative; aspect-ratio: 16 / 10.5; }
.bwp-panel { position: absolute; inset: 0; padding: 4cqw 5cqw; opacity: 0; visibility: hidden; transform: translateY(2cqw); transition: opacity 0.4s ease, transform 0.45s cubic-bezier(.22, 1, .36, 1), visibility 0s linear 0.4s; }
.bwp-panel.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
#br-bw .bwp-title { margin: 0 0 2.4cqw; color: var(--ink); font-size: 3.2cqw; font-weight: 800; }
.bwp-chip { position: absolute; padding: 0.9cqw 2.2cqw; border-radius: 99px; background: #3fae2a; color: #fff; font-size: 2.2cqw; font-weight: 800; white-space: nowrap; box-shadow: 0 1cqw 2cqw rgba(0, 0, 0, 0.12); }
.bwp-controls { display: flex; justify-content: flex-end; margin-top: 10px; }
.bwp-play { padding: 6px 14px; border: 2px solid #d8dbe4; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700; font-size: 0.85rem; font-family: inherit; cursor: pointer; }
.bwp-play:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* 1. choose */
.bwp-covers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4cqw; }
.bwp-cover { position: relative; display: block; border-radius: 1.6cqw; box-shadow: 0 1.2cqw 2.4cqw rgba(33, 39, 113, 0.18); }
.bwp-cover img { display: block; width: 100%; height: auto; border-radius: 1.6cqw; }
.bwp-cover--pick { outline: 0.8cqw solid var(--o); outline-offset: 0.6cqw; transform: translateY(-1.5cqw) scale(1.04); }
.bwp-tick { position: absolute; right: -2cqw; top: -2cqw; display: grid; place-items: center; width: 5.4cqw; height: 5.4cqw; border-radius: 50%; background: #3fae2a; color: #fff; font-size: 3cqw; font-style: normal; font-weight: 800; }
.bwp-choose__chip { left: 50%; bottom: 3.4cqw; transform: translateX(-50%); }
.bwp-pointer { position: absolute; left: 40%; top: 62%; width: 5cqw; height: 5cqw; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 8-6 2 4 7-3 1-4-7-5 4z' fill='%23fff' stroke='%232f3437' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E"); opacity: 0; }

/* 2. write, 3. feedback */
.bwp-doc { display: grid; gap: 1.9cqw; width: 70%; padding: 3.2cqw; border-radius: 2cqw; background: #fff; box-shadow: 0 1cqw 2.4cqw rgba(33, 39, 113, 0.1); }
.bwp-line { display: block; width: var(--w); height: 1.3cqw; border-radius: 1cqw; background: #d8dbe4; transform-origin: left; }
.bwp-line--head { height: 1.9cqw; background: #2f3437; opacity: 0.7; }
.bwp-write__count { right: 5cqw; top: 4cqw; background: var(--indigo); }
.bwp-boomer { position: absolute; right: 6cqw; bottom: 0; width: 15cqw; height: auto; transform-origin: 50% 100%; }
.bwp-line--mark { background: linear-gradient(90deg, #ffe27a 0 45%, #d8dbe4 45%); }
.bwp-line--mark2 { background: linear-gradient(90deg, #d8dbe4 0 40%, #ffd1dd 40% 70%, #d8dbe4 70%); }
.bwp-note { position: absolute; right: 4cqw; display: grid; gap: 0.4cqw; width: 30cqw; padding: 1.8cqw 2.2cqw; border-radius: 2cqw 2cqw 2cqw 0.4cqw; background: #fff; color: var(--ink); font-size: 2.2cqw; line-height: 1.35; box-shadow: 0 1.2cqw 2.6cqw rgba(33, 39, 113, 0.16); }
.bwp-note b { color: var(--od); font-size: 1.9cqw; }
.bwp-note--1 { top: 12cqw; border-left: 1cqw solid #ffc93c; }
.bwp-note--2 { top: 30cqw; border-left: 1cqw solid #bf3765; }

/* 4. Starcasting */
.bwp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6cqw; margin-top: 3cqw; }
.bwp-card { position: relative; display: grid; gap: 2cqw; justify-items: center; padding: 3.4cqw 2cqw; border: 0.5cqw solid transparent; border-radius: 2.4cqw; background: #fff; box-shadow: 0 1cqw 2.4cqw rgba(33, 39, 113, 0.1); }
.bwp-card b { color: var(--ink); font-size: 2.6cqw; }
.bwp-card::before { content: ""; display: block; width: 80%; height: 7cqw; border-radius: 1cqw; background: repeating-linear-gradient(180deg, #d8dbe4 0 1.1cqw, transparent 1.1cqw 2.2cqw); }
.bwp-stars { position: relative; display: block; width: 15cqw; height: 3cqw; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.3 7 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 7-1z' fill='%23e3e5ec'/%3E%3C/svg%3E") left top / 3cqw 3cqw repeat-x; }
.bwp-stars::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--s) * 3cqw); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.3 7 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 7-1z' fill='%23ffc93c'/%3E%3C/svg%3E") left top / 3cqw 3cqw repeat-x; }
.bwp-card em { position: absolute; top: -2.6cqw; left: 50%; padding: 0.6cqw 2cqw; border-radius: 99px; background: #ffc93c; color: #6b4b00; font-size: 2cqw; font-style: normal; font-weight: 800; white-space: nowrap; transform: translateX(-50%) rotate(-4deg); }
.bwp-card--win { border-color: var(--o); transform: translateY(-1.6cqw); }
.bwp-vote__chip { left: 50%; bottom: 3cqw; transform: translateX(-50%); }

/* 5. repeat */
.bwp-loop { display: grid; place-items: center; }
.bwp-ring { position: relative; width: 44cqw; aspect-ratio: 1; }
.bwp-ring__track { position: absolute; inset: 6cqw; border: 1cqw dashed #f2b27a; border-radius: 50%; }
.bwp-node { position: absolute; display: grid; place-items: center; width: 13cqw; height: 13cqw; border-radius: 50%; background: var(--o); color: #fff; font-size: 2.6cqw; font-weight: 800; box-shadow: 0 1.2cqw 2.4cqw rgba(224, 98, 11, 0.3); }
.bwp-node--read { left: 50%; top: 0; transform: translateX(-50%); }
.bwp-node--write { right: 0; bottom: 4cqw; background: var(--indigo); }
.bwp-node--vote { left: 0; bottom: 4cqw; background: #bf3765; }
.bwp-ring__center { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; color: var(--ink); }
.bwp-ring__center small { font-size: 2.4cqw; font-weight: 700; color: var(--muted); }
.bwp-count { display: grid; height: 7cqw; overflow: hidden; font-size: 6cqw; font-weight: 800; line-height: 7cqw; }
.bwp-count b { display: block; height: 7cqw; text-align: center; }
.bwp-count b:not(:last-child) { display: none; }

/* 6. publish */
.bwp-publish { display: grid; place-items: center; align-content: center; gap: 3cqw; }
.bwp-books { position: relative; width: 26cqw; aspect-ratio: 3 / 4; }
.bwp-book, .bwp-copy { position: absolute; inset: 0; border-radius: 0.8cqw 2cqw 2cqw 0.8cqw; }
.bwp-book { display: flex; flex-direction: column; justify-content: space-between; padding: 2.6cqw 2.2cqw 2.2cqw 3.6cqw; background: linear-gradient(90deg, rgba(0, 0, 0, 0.25) 0 1.4cqw, transparent 1.4cqw), linear-gradient(160deg, #212771, #3b3f9e 55%, #e0620b); color: #fff; box-shadow: 0 2cqw 4cqw rgba(33, 39, 113, 0.3); }
.bwp-book small { font-size: 1.8cqw; font-weight: 700; opacity: 0.85; }
.bwp-book b { font-size: 3.4cqw; font-weight: 800; line-height: 1.1; }
.bwp-book span { align-self: flex-end; color: #ffc93c; font-size: 4cqw; line-height: 1; }
.bwp-copy { background: linear-gradient(160deg, #f59a2f, #e0620b); box-shadow: 0 1cqw 2cqw rgba(0, 0, 0, 0.15); }
.bwp-copy--1 { transform: translate(-9cqw, 2cqw) rotate(-10deg) scale(0.86); }
.bwp-copy--2 { transform: translate(9cqw, 2cqw) rotate(10deg) scale(0.86); background: linear-gradient(160deg, #bf3765, #212771); }
.bwp-download { padding: 1.4cqw 3.4cqw; border-radius: 99px; background: #3fae2a; color: #fff; font-size: 2.6cqw; font-weight: 800; box-shadow: 0 1.2cqw 2.4cqw rgba(63, 174, 42, 0.3); }
.bwp-confetti { position: absolute; inset: 0; pointer-events: none; }
.bwp-confetti i { position: absolute; top: -3cqw; width: 1.4cqw; height: 2.2cqw; border-radius: 0.3cqw; background: #ffc93c; opacity: 0; }
.bwp-confetti i:nth-child(1) { left: 12%; } .bwp-confetti i:nth-child(2) { left: 24%; background: #bf3765; } .bwp-confetti i:nth-child(3) { left: 36%; background: #34c9d6; }
.bwp-confetti i:nth-child(4) { left: 48%; } .bwp-confetti i:nth-child(5) { left: 60%; background: #3fae2a; } .bwp-confetti i:nth-child(6) { left: 72%; background: #bf3765; }
.bwp-confetti i:nth-child(7) { left: 84%; background: #34c9d6; } .bwp-confetti i:nth-child(8) { left: 92%; }

/* ---- motion (only while the panel is showing) ---- */
@media (prefers-reduced-motion: no-preference) {
  .bwp-choose.is-active .bwp-cover { animation: bwp-rise 0.5s cubic-bezier(.22, 1, .36, 1) backwards; }
  .bwp-choose.is-active .bwp-cover:nth-child(2) { animation-delay: 0.08s; } .bwp-choose.is-active .bwp-cover:nth-child(3) { animation-delay: 0.16s; } .bwp-choose.is-active .bwp-cover:nth-child(4) { animation-delay: 0.24s; }
  .bwp-choose.is-active .bwp-cover--pick { animation: bwp-rise 0.5s cubic-bezier(.22, 1, .36, 1) 0.08s backwards, bwp-pick 0.5s cubic-bezier(.34, 1.56, .64, 1) 1.6s backwards; }
  .bwp-choose.is-active .bwp-tick, .bwp-choose.is-active .bwp-choose__chip { animation: bwp-pop 0.45s cubic-bezier(.34, 1.56, .64, 1) 1.9s backwards; }
  .bwp-choose.is-active .bwp-pointer { animation: bwp-point 2.2s ease-in-out 0.3s both; }
  .bwp-write.is-active .bwp-line { animation: bwp-type 0.5s ease-out var(--d) backwards; }
  .bwp-write.is-active .bwp-write__count { animation: bwp-pop 0.45s cubic-bezier(.34, 1.56, .64, 1) 3s backwards; }
  .bwp-write.is-active .bwp-boomer { animation: bwp-bob 0.9s ease-in-out infinite; }
  .bwp-feedback.is-active .bwp-note--1 { animation: bwp-slide 0.5s cubic-bezier(.34, 1.56, .64, 1) 0.6s backwards; }
  .bwp-feedback.is-active .bwp-note--2 { animation: bwp-slide 0.5s cubic-bezier(.34, 1.56, .64, 1) 1.6s backwards; }
  .bwp-feedback.is-active .bwp-line--mark, .bwp-feedback.is-active .bwp-line--mark2 { animation: bwp-glow 1.2s ease 0.5s backwards; }
  .bwp-vote.is-active .bwp-card { animation: bwp-rise 0.5s cubic-bezier(.22, 1, .36, 1) backwards; }
  .bwp-vote.is-active .bwp-card:nth-child(2) { animation: bwp-rise 0.5s cubic-bezier(.22, 1, .36, 1) 0.1s backwards, bwp-win 0.5s cubic-bezier(.34, 1.56, .64, 1) 2.4s backwards; }
  .bwp-vote.is-active .bwp-card:nth-child(3) { animation-delay: 0.2s; }
  .bwp-vote.is-active .bwp-stars::after { animation: bwp-fill 1.4s ease-out 0.6s backwards; }
  .bwp-vote.is-active .bwp-card em, .bwp-vote.is-active .bwp-vote__chip { animation: bwp-pop 0.45s cubic-bezier(.34, 1.56, .64, 1) 2.6s backwards; }
  .bwp-loop.is-active .bwp-ring__track { animation: bwp-spin 6s linear infinite; }
  .bwp-loop.is-active .bwp-node { animation: bwp-pulse 1.5s ease-in-out infinite; }
  .bwp-loop.is-active .bwp-node--write { animation-delay: 0.5s; } .bwp-loop.is-active .bwp-node--vote { animation-delay: 1s; }
  .bwp-loop.is-active .bwp-count b { display: block; }
  .bwp-loop.is-active .bwp-count b:first-child { animation: bwp-count 4.5s steps(1) forwards; }
  .bwp-publish.is-active .bwp-book { animation: bwp-pop 0.6s cubic-bezier(.34, 1.56, .64, 1) 0.2s backwards; }
  .bwp-publish.is-active .bwp-copy--1 { animation: bwp-fan-l 0.6s cubic-bezier(.34, 1.56, .64, 1) 0.8s backwards; }
  .bwp-publish.is-active .bwp-copy--2 { animation: bwp-fan-r 0.6s cubic-bezier(.34, 1.56, .64, 1) 0.9s backwards; }
  .bwp-publish.is-active .bwp-download { animation: bwp-pop 0.45s cubic-bezier(.34, 1.56, .64, 1) 1.4s backwards, bwp-pulse 1.6s ease-in-out 2s infinite; }
  .bwp-publish.is-active .bwp-confetti i { animation: bwp-confetti 2.4s ease-in 1s both; }
  .bwp-publish.is-active .bwp-confetti i:nth-child(odd) { animation-delay: 1.2s; animation-duration: 2.8s; }
}
@keyframes bwp-rise { from { opacity: 0; transform: translateY(3cqw); } }
@keyframes bwp-pick { from { transform: none; outline-color: transparent; } }
@keyframes bwp-pop { from { opacity: 0; scale: 0.4; } }
@keyframes bwp-point { 0% { opacity: 0; left: 80%; top: 88%; } 20% { opacity: 1; } 70% { left: 40%; top: 62%; opacity: 1; } 80% { scale: 0.85; } 100% { left: 40%; top: 62%; opacity: 0; } }
@keyframes bwp-type { from { transform: scaleX(0); } }
@keyframes bwp-bob { 50% { transform: translateY(-5%) rotate(3deg); } }
@keyframes bwp-slide { from { opacity: 0; transform: translateX(6cqw) scale(0.9); } }
@keyframes bwp-glow { from { filter: saturate(0); } }
@keyframes bwp-fill { from { width: 0; } }
@keyframes bwp-win { from { transform: none; border-color: transparent; } }
@keyframes bwp-spin { to { transform: rotate(360deg); } }
@keyframes bwp-pulse { 50% { scale: 1.08; } }
@keyframes bwp-count { 0% { margin-top: 0; } 25% { margin-top: -7cqw; } 50% { margin-top: -14cqw; } 75%, 100% { margin-top: -21cqw; } }
@keyframes bwp-fan-l { from { transform: none; opacity: 0; } }
@keyframes bwp-fan-r { from { transform: none; opacity: 0; } }
@keyframes bwp-confetti { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(60cqw) rotate(540deg); } }

@media (max-width: 900px) {
  .bwp { grid-template-columns: 1fr; gap: 24px; }
  .bwp-device { order: -1; }
  .bwp-step__txt small { display: none; }
  .bwp-step[aria-pressed="true"] .bwp-step__txt small { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .bwp-panel { transition: none; }
  .bwp-step { transition: none; }
}

/* ---------------- BoomWriter overview: quote, WriteFest strip, partners ---------------- */
.bwh-quote { max-width: 780px; margin: 44px auto 0; padding: 26px 30px; border-left: 6px solid #e0620b; border-radius: 20px; background: #fff; box-shadow: 0 14px 32px rgba(33, 39, 113, 0.08); text-align: left; }
#br-bw .bwh-quote blockquote { margin: 0; }
#br-bw .bwh-quote p { margin: 0; color: #2f3437; font-size: 1.15rem; font-weight: 700; line-height: 1.55; }
.bwh-quote figcaption { margin-top: 12px; color: #6b7178; }
.bwh-quote figcaption b { color: #b34d06; }
.bwh-wf { position: relative; padding: 46px 24px; background: radial-gradient(60% 90% at 90% 50%, rgba(255, 201, 60, 0.25), transparent 60%), linear-gradient(120deg, #9a3d0b, #d45a0a 60%, #e0620b); color: #fff; }
.bwh-wf__inner { display: grid; grid-template-columns: 220px 1fr auto; gap: 28px; align-items: center; max-width: 1080px; margin: 0 auto; }
.bwh-wf__logo { width: 100%; height: auto; padding: 14px 18px; border-radius: 20px; background: #fff; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); }
#br-bw .bwh-wf__eyebrow { margin: 0 0 6px; color: #ffe27a; font-weight: 800; }
#br-bw .bwh-wf h2 { margin: 0; color: #fff; font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 800; line-height: 1.15; text-wrap: balance; }
#br-bw .bwh-wf__text p:last-child { margin: 8px 0 0; color: rgba(255, 255, 255, 0.92); line-height: 1.55; }
.bwh-wf__btn { padding: 13px 24px; border-radius: 999px; background: #fff; color: #9a3d0b; font-weight: 800; text-decoration: none; white-space: nowrap; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15); transition: transform 0.15s ease; }
.bwh-wf__btn:hover { transform: translateY(-2px); }
.bwh-wf__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
#br-bw .bwh-wf.is-live .bwh-wf__eyebrow::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: #7dff8a; box-shadow: 0 0 0 4px rgba(125, 255, 138, 0.25); }
@media (max-width: 800px) { .bwh-wf__inner { grid-template-columns: 1fr; text-align: center; } .bwh-wf__logo { width: 200px; margin: 0 auto; } .bwh-wf__btn { justify-self: center; } }
.bwh-partners { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 34px; margin: 0 auto 40px; }
#br-bw .bwh-partners p { margin: 0; color: #61676e; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.bwh-partners img { display: block; width: 190px; height: auto; }
.bwh-partners__text { color: #212771 !important; font-weight: 800 !important; line-height: 1.2; text-decoration: none; }
.bwh-partners a:hover { opacity: 0.8; }
@media (prefers-reduced-motion: reduce) { .bwh-wf__btn { transition: none; } .bwh-wf__btn:hover { transform: none; } }