/* SPEC v2.6 /book page (after get.repvive.co/book). Markup: brands/dijidis/site/book.py.
   The markup is the final state. book.js arms the hero card into its first frame and loops it while on
   screen, builds the date strip and runs the sample picker. .bk-on marks a unit in view (its CSS loops
   run), .bk-off one that has left (they pause). Without JS, or under prefers-reduced-motion (site.css
   stops every animation and transition, and book.js never arms), everything holds its final frame. */

.bk {
  --ok: #5BD69B;
  --ok-text: #7BE3AE;
  --bad: #FF6B5E;
  --amber: #FFB547;
}
.bk-off, .bk-off * { animation-play-state: paused !important; }

/* Small caps label with a dot, as repvive's section eyebrows */
.bk-label { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; font-family: var(--mono); font-size: 0.76rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text); }
.bk-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.bk-cap { margin: 0; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }

/* ------------------------------------------------------------ hero */

.bk-hero { padding: 96px 0 48px; }
.bk-hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1040px) { .bk-hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 56px; } }
.bk-copy { min-width: 0; }
.bk-h1 { font-size: clamp(2.1rem, 6.4vw, 3.15rem); line-height: 1.05; letter-spacing: -0.032em; margin: 0 0 22px; max-width: 18ch; }
.bk-h1 .hl { display: block; margin-top: 6px; }
.bk-text { font-size: 1.1rem; line-height: 1.55; color: var(--text-2); max-width: 56ch; margin: 0 0 22px; }
.bk-bullets { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; max-width: 58ch; }
.bk-bullets li { display: flex; gap: 12px; align-items: flex-start; }
.bk-bullets .ic { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 50%; color: #fff; margin-top: 1px;
  background: linear-gradient(145deg, #4976B1, #AC508F); box-shadow: 0 0 16px -2px rgba(172, 80, 143, 0.6); }
.bk-bullets p { margin: 0; color: var(--text-2); line-height: 1.5; }
.bk-bullets strong { color: var(--text); font-weight: 600; }
.bk-chans { margin-top: 26px; }
.bk-chans ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 10px 0 0; padding: 0; color: var(--text-2); font-weight: 500; }
.bk-hero-card { min-width: 0; animation: heroUp .9s .25s cubic-bezier(.2, .7, .2, 1) both; }

/* The live card: repvive's rating card in our tokens */
.bk-live { position: relative; display: grid; gap: 10px; padding: 16px; border-radius: 20px; max-width: 560px; margin: 0 auto;
  background: linear-gradient(180deg, rgba(9, 14, 42, 0.94), rgba(8, 12, 36, 0.97)); border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 40px 90px -40px rgba(172, 80, 143, 0.55), 0 0 0 1px rgba(229, 138, 196, 0.08); }
.bk-live::before { content: ""; position: absolute; inset: -18% -10%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(172, 80, 143, 0.28), rgba(73, 118, 177, 0.12) 60%, transparent); }
.bk-live-top { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; padding: 0 2px; }
.bk-biz { margin: 0; font-weight: 600; }
.bk-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bk-tile { padding: 14px 14px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color .4s, box-shadow .4s; }
.bk-v { display: block; font-size: clamp(1.6rem, 5.4vw, 2.2rem); font-weight: 650; line-height: 1.05; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; transform-origin: left bottom; }
.bk-tile:first-child .bk-v { color: var(--text); }
.bk-tile:nth-child(2) .bk-v { color: var(--ok-text); }
.bk-tile:nth-child(3) .bk-v { color: var(--accent-text); }
.bk-l { display: block; margin-top: 6px; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); line-height: 1.3; }
.bk-tile.tick { animation: bkTickGlow 1.1s ease-out; }
@keyframes bkTickGlow { 0% { border-color: rgba(229, 138, 196, 0.6); box-shadow: 0 0 24px -4px rgba(229, 138, 196, 0.65); } }
.bk-tile.tick .bk-v { animation: bkTick .5s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes bkTick { 0% { transform: translateY(8px); opacity: .2; } 100% { transform: none; opacity: 1; } }
.bk-row2 { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 520px) { .bk-row2 { grid-template-columns: 1.15fr 1fr; } }
.bk-trend, .bk-watch { position: relative; padding: 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.08); }
.bk-plot { position: relative; height: 92px; margin: 10px 0 4px; }
.bk-chart { width: 100%; height: 100%; overflow: visible; }
.bk-grid { fill: none; stroke: rgba(255, 255, 255, 0.05); stroke-width: 1; }
.bk-line { fill: none; stroke: var(--accent-text); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 100)); transition: stroke-dashoffset .9s cubic-bezier(.3, .7, .3, 1);
  filter: drop-shadow(0 0 6px rgba(229, 138, 196, 0.6)); }
.bk-area { fill: rgba(229, 138, 196, 0.07); stroke: none; clip-path: inset(0 calc(100% - var(--p, 100) * 1%) 0 0);
  transition: clip-path .9s cubic-bezier(.3, .7, .3, 1); }
.bk-dot { position: absolute;
  width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--accent-text);
  box-shadow: 0 0 0 4px rgba(229, 138, 196, 0.2), 0 0 14px rgba(229, 138, 196, 0.8); transition: left .9s cubic-bezier(.3, .7, .3, 1), top .9s cubic-bezier(.3, .7, .3, 1); }
.bk-watch { display: flex; flex-direction: column; gap: 10px; }
.bk-watch-top { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.86rem; font-weight: 600; }
.bk-watch-top .live { color: var(--ok-text); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.7rem; }
.bk-watch-top .tile.sm { width: 26px; height: 26px; }
.bk-watch-top .tile.sm .ic { width: 14px; height: 14px; }
.bk-alert { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid rgba(255, 107, 94, 0.5); background: rgba(255, 107, 94, 0.12); transition: background .45s, border-color .45s; }
.bk-a-ic { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none; color: #fff;
  background: var(--bad); box-shadow: 0 0 16px -2px rgba(255, 107, 94, 0.8); transition: background .45s, box-shadow .45s; }
.bk-a-ic .ic { position: absolute; width: 16px; height: 16px; transition: opacity .3s, transform .45s cubic-bezier(.3, 1.5, .5, 1); }
.bk-a-text { margin: 0; display: grid; line-height: 1.25; min-width: 0; }
.bk-a-text strong { position: relative; display: grid; font-size: 0.92rem; }
.bk-a-text strong > span { grid-area: 1 / 1; transition: opacity .3s, transform .3s; }
.bk-a-text small { font-size: 0.76rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-alert .bk-a-ok { opacity: 0; transform: translateY(6px); }
.bk-alert .ic.bk-a-ok { transform: scale(0); }
.bk-alert.is-done { border-color: rgba(91, 214, 155, 0.55); background: rgba(91, 214, 155, 0.13); }
.bk-alert.is-done .bk-a-ic { background: var(--ok); box-shadow: 0 0 18px -2px rgba(91, 214, 155, 0.85); }
.bk-alert.is-done .bk-a-new { opacity: 0; transform: translateY(-6px); }
.bk-alert.is-done .ic.bk-a-new { transform: scale(0); }
.bk-alert.is-done .bk-a-ok { opacity: 1; transform: none; }
.bk-alert.is-new { animation: bkPing 1.6s ease-out 2; }
@keyframes bkPing { 0% { box-shadow: 0 0 0 0 rgba(255, 107, 94, 0.5); } 80%, 100% { box-shadow: 0 0 0 10px rgba(255, 107, 94, 0); } }
.bk-a-cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--pill);
  font-size: 0.86rem; font-weight: 600; color: var(--text-2); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background .45s, color .45s, box-shadow .45s; }
.bk-watch.hot .bk-a-cta { color: #fff; background: var(--accent); box-shadow: 0 8px 24px -10px rgba(172, 80, 143, 0.9); }
/* The burst: hidden at rest, so the final frame and reduced motion show none of it */
.bk-burst { position: absolute; left: 24px; top: 50%; width: 0; height: 0; pointer-events: none; }
.bk-burst i { position: absolute; width: 9px; height: 5px; border-radius: 1px; background: var(--c); opacity: 0; }
.bk-burst i:nth-child(3n) { width: 6px; height: 6px; border-radius: 50%; }
.bk-alert.burst { z-index: 3; }
.bk-alert.burst .bk-burst i { animation: bkConf 1.4s cubic-bezier(.15, .7, .3, 1) both; animation-delay: var(--d); }
@keyframes bkConf {
  0% { opacity: 1; transform: rotate(var(--a)) translateX(0) rotate(0); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--r)) rotate(220deg) translateY(14px); }
}

/* ------------------------------------------------------------ press strip */

.bk-press { padding: 8px 0 24px; }

/* ------------------------------------------------------------ channels band */

.bk-ch-grid { display: grid; gap: 28px; align-items: center; grid-template-areas: "title" "fig" "tiles"; }
.bk-ch-title { grid-area: title; margin: 0; font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.08; max-width: 14ch; }
.bk-ch-fig { grid-area: fig; display: grid; place-items: center; }
.bk-ch-tiles { grid-area: tiles; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (min-width: 1000px) {
  .bk-ch-grid { grid-template-columns: minmax(0, 1fr) 220px minmax(0, 1.25fr); grid-template-areas: "title fig tiles"; gap: 24px; }
}
.bk-shield { width: min(240px, 60vw); height: auto; overflow: visible; }
.bk-rays path { stroke: rgba(229, 138, 196, 0.22); stroke-width: 1.4; stroke-linecap: round; }
.bk-rays { transform-origin: 110px 110px; animation: spin 60s linear infinite; }
.bk-sh-ring { fill: none; stroke: rgba(143, 178, 240, 0.4); stroke-width: 1.5; stroke-dasharray: 4 7; transform-origin: 110px 110px; animation: spin 30s linear infinite reverse; }
.bk-sh-body { filter: drop-shadow(0 0 22px rgba(172, 80, 143, 0.8)) drop-shadow(0 0 48px rgba(73, 118, 177, 0.5)); }
.bk-sh-glow { transform-origin: 110px 110px; animation: bkGlow 4s ease-in-out infinite; }
@keyframes bkGlow { 0%, 100% { opacity: .75; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
.bk-sh-edge { fill: none; stroke: rgba(255, 255, 255, 0.3); stroke-width: 1.5; }
.bk-sh-tick { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .bk-ch-fig.in .bk-sh-tick { animation: bkDraw .7s .4s cubic-bezier(.3, .7, .3, 1) backwards; }
@keyframes bkDraw { from { stroke-dashoffset: 1; } }
.bk-sh-alert circle { fill: var(--bad); }
.bk-sh-alert path { stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.bk-sh-alert { transform-origin: 58px 140px; animation: bkBob 3.2s ease-in-out infinite; }
@keyframes bkBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px) scale(1.06); } }
.bk-ct { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 92px; padding: 14px 8px;
  border-radius: 12px; text-align: center; font-size: 0.86rem; font-weight: 600; line-height: 1.25;
  background: var(--glass); border: 1px solid var(--glass-line); transition: border-color .25s, transform .25s, opacity .7s; }
.bk-ct:hover { border-color: rgba(229, 138, 196, 0.45); transform: translateY(-2px); }
.bk-glyph { width: 28px; height: 28px; fill: none; stroke: var(--accent-text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(229, 138, 196, 0.45)); }
.bk-ct:nth-child(even) .bk-glyph { stroke: var(--blue-text); filter: drop-shadow(0 0 6px rgba(143, 178, 240, 0.45)); }
.bk-ct-more { background: rgba(172, 80, 143, 0.1); border-style: dashed; border-color: rgba(229, 138, 196, 0.4); color: var(--accent-text); }
/* Lit in sequence, one tile after another, while the band is on screen */
.bk-ch.bk-on .bk-ct { animation: bkLight calc(var(--n, 9) * .55s) ease-in-out infinite; animation-delay: calc(var(--i, 0) * .55s); }
@keyframes bkLight {
  0%, 22%, 100% { box-shadow: none; }
  8% { border-color: rgba(229, 138, 196, 0.7); box-shadow: 0 0 26px -2px rgba(229, 138, 196, 0.5), inset 0 0 18px -6px rgba(229, 138, 196, 0.5); }
}

/* ------------------------------------------------------------ commitment band */

.bk-commit { display: grid; overflow: hidden; border-radius: 20px; border: 1px solid rgba(229, 138, 196, 0.24); background: rgba(9, 14, 42, 0.9); }
@media (min-width: 900px) { .bk-commit { grid-template-columns: 1.1fr 1fr; } }
.bk-c-panel { position: relative; overflow: hidden; isolation: isolate; padding: 40px 26px; display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(115deg, #2A3F86 0%, #6C3E8F 38%, #AC508F 62%, #4976B1 100%); background-size: 240% 100%;
  animation: bkSweep 14s ease-in-out infinite; }
.bk-c-panel::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 9px); }
@keyframes bkSweep { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.bk-c-sweep { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.22) 50%, transparent 62%);
  transform: translateX(-100%); animation: bandSheen 7s ease-in-out infinite; }
.bk-c-panel h2 { margin: 0 0 14px; font-size: clamp(1.7rem, 3.6vw, 2.4rem); line-height: 1.12; color: #fff; text-shadow: 0 2px 18px rgba(10, 18, 51, 0.5); }
.bk-c-panel p { margin: 0; color: rgba(255, 255, 255, 0.9); max-width: 46ch; }
@media (min-width: 768px) { .bk-c-panel { padding: 56px 44px; } }
.bk-c-points { list-style: none; margin: 0; padding: 28px 26px; display: grid; gap: 22px; align-content: center; }
@media (min-width: 768px) { .bk-c-points { padding: 40px 44px; } }
.bk-c-points li { display: flex; gap: 14px; align-items: flex-start; }
.bk-c-points li + li { padding-top: 22px; border-top: 1px solid var(--line); }
.bk-c-points h3 { margin: 4px 0 6px; color: var(--accent-text); }
.bk-c-points p { margin: 0; color: var(--text-2); }

/* ------------------------------------------------------------ after how-we-work, the dashboard and log */

.bk-after-how { display: flex; justify-content: center; margin-top: -24px; padding-bottom: 8px; }
.bk .center-head .bk-label { justify-content: center; }

/* ------------------------------------------------------------ the picker */

.bk-pick { scroll-margin-top: 16px; }
.bk-pick-wrap { max-width: 860px; }
.bk-pick .center-head { margin-bottom: 32px; }
.bk-panel { display: grid; gap: 18px; padding: 18px; border-radius: 20px; }
@media (min-width: 640px) { .bk-panel { padding: 22px; } }
.bk-days { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.bk-days::-webkit-scrollbar { display: none; }
.bk-day { display: grid; justify-items: center; gap: 2px; min-width: 76px; min-height: 64px; padding: 10px 14px; border-radius: 12px; cursor: pointer;
  font: inherit; color: var(--text-2); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--glass-line);
  transition: border-color .2s, background .2s, color .2s, transform .2s, box-shadow .2s; }
.bk-day:hover { border-color: rgba(229, 138, 196, 0.45); transform: translateY(-2px); }
.bk-day[aria-pressed="true"] { color: var(--text); border-color: rgba(229, 138, 196, 0.75); background: rgba(172, 80, 143, 0.16);
  box-shadow: 0 0 22px -6px rgba(229, 138, 196, 0.6); }
.bk-dn { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; }
.bk-dd { font-size: 1.15rem; font-weight: 650; line-height: 1.1; color: var(--text); }
.bk-dm { font-size: 0.72rem; }
.bk-times { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 560px) { .bk-times { grid-template-columns: repeat(4, 1fr); } }
.bk-time { min-height: 46px; border-radius: 10px; cursor: pointer; font: inherit; font-weight: 600; font-size: 0.95rem; color: var(--text);
  background: rgba(255, 255, 255, 0.035); border: 1px solid var(--glass-line); font-variant-numeric: tabular-nums;
  transition: transform .2s cubic-bezier(.3, 1.4, .5, 1), border-color .2s, background .2s, box-shadow .2s; }
.bk-time:hover { transform: translateY(-2px); border-color: rgba(229, 138, 196, 0.5); background: rgba(172, 80, 143, 0.12);
  box-shadow: 0 10px 22px -12px rgba(172, 80, 143, 0.8); }
.bk-time[aria-pressed="true"] { color: #fff; border-color: transparent; background: linear-gradient(120deg, #8E3F78, #AC508F 60%, #8A4B9C);
  box-shadow: 0 10px 26px -10px rgba(172, 80, 143, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.22); animation: bkPop .35s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes bkPop { 0% { transform: scale(.94); } 100% { transform: none; } }
.bk-times.swap .bk-time { animation: bkIn .45s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes bkIn { from { opacity: 0; transform: translateY(8px); } }
.bk-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 8px 12px; border-radius: 10px;
  text-align: center; font-size: 0.88rem; color: var(--text-2); transition: background .3s, color .3s, box-shadow .3s; }
.bk-note .ic { color: var(--accent-text); }
.bk-note:focus { outline: none; }
.bk-note.flash { color: var(--text); background: rgba(172, 80, 143, 0.14); box-shadow: inset 0 0 0 1px rgba(229, 138, 196, 0.55); }
.bk-get { padding: 16px 18px; border-radius: 12px; border: 1px solid rgba(229, 138, 196, 0.28);
  background: linear-gradient(135deg, rgba(172, 80, 143, 0.14), rgba(73, 118, 177, 0.08)); }
.bk-get .bk-cap { color: var(--accent-text); }
.bk-get ul, .bk-trust { list-style: none; margin: 0; padding: 0; }
.bk-get ul { display: grid; gap: 8px; margin-top: 12px; }
.bk-get li, .bk-trust li { display: flex; align-items: flex-start; gap: 10px; }
.bk-get .ic, .bk-trust .ic { color: var(--ok); margin-top: 4px; }
.bk-confirm { width: 100%; min-height: 56px; white-space: normal; text-align: center; }
.bk-confirm:disabled { cursor: not-allowed; background: rgba(172, 80, 143, 0.28); color: rgba(255, 255, 255, 0.55); box-shadow: none; }
.bk-confirm:disabled::after { display: none; }
.bk-confirm.ready { animation: bkPop .35s cubic-bezier(.3, 1.5, .5, 1); }
.bk-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; font-size: 0.86rem; color: var(--text-2); }
.bk-trust .ic { margin-top: 3px; }
.bk-embed { display: block; width: 100%; min-height: 720px; border: 0; border-radius: 12px; background: transparent; }

/* The live picker (BOOKING_API in book.py, off): pick, details and done steps in the same panel.
   Class display rules would beat the hidden attribute, so hidden wins here explicitly. */
.bk-panel [hidden] { display: none !important; }
.bk-step { display: grid; gap: 18px; }
.bk-status { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; margin: 0; padding: 12px;
  border-radius: 12px; border: 1px dashed var(--glass-line); color: var(--text-2); text-align: center; }
.bk-status a, .bk-agree a, .bk-fine a { color: var(--accent-text); text-underline-offset: 3px; }
.bk-fail { color: var(--text); border-style: solid; border-color: rgba(255, 107, 94, 0.45); background: rgba(255, 107, 94, 0.08); }
.bk-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(229, 138, 196, 0.25); border-top-color: var(--accent-text);
  animation: bkSpin .8s linear infinite; }
@keyframes bkSpin { to { transform: rotate(360deg); } }
.bk-tz { margin: -6px 0 0; font-size: 0.86rem; color: var(--text-2); text-align: center; }

.bk-d-head { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 4px 12px; }
.bk-d-head h3 { margin: 0; font-size: 1.3rem; }
.bk-d-head h3:focus, .bk-done h3:focus { outline: none; }
.bk-d-slot { grid-column: 1; margin: 0; color: var(--accent-text); font-weight: 600; }
.bk-back { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border-radius: var(--pill); border: 1px solid var(--glass-line); background: transparent; color: var(--text-2); font: inherit;
  font-size: 0.9rem; cursor: pointer; transition: color .2s, border-color .2s; }
.bk-back .ic { transform: scaleX(-1); }
.bk-back:hover { color: var(--text); border-color: rgba(229, 138, 196, 0.5); }
.bk-fields { display: grid; gap: 14px; }
@media (min-width: 640px) { .bk-fields { grid-template-columns: 1fr 1fr; } }
.bk-f { display: grid; gap: 6px; }
.bk-f label { font-size: 0.92rem; color: var(--text-2); }
.bk-f input { width: 100%; min-height: 50px; padding: 0 14px; border-radius: var(--radius-in); border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(7, 12, 36, 0.75); color: var(--text); font: inherit; font-size: 1rem; transition: border-color .2s, box-shadow .2s; }
.bk-f input:focus { outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 3px rgba(229, 138, 196, 0.22); }
.bk-f input[aria-invalid="true"] { border-color: #FF8A7E; box-shadow: 0 0 0 3px rgba(255, 107, 94, 0.2); }
/* The honeypot: off screen, out of the tab order, and aria-hidden in the markup. */
.bk-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.bk-sms { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: start; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--glass-line); background: rgba(7, 12, 36, 0.4); }
.bk-sms input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.bk-sms label { font-weight: 600; cursor: pointer; }
.bk-fine { grid-column: 2; margin: 0; font-size: 0.8rem; line-height: 1.5; color: var(--text-2); }
.bk-agree { margin: 0; font-size: 0.86rem; color: var(--text-2); text-align: center; }
.bk-err { margin: 0; color: #FF9B91; font-weight: 600; text-align: center; }
.bk-err:empty { display: none; }
.bk-submit { width: 100%; min-height: 56px; }
.bk-submit[aria-busy="true"] { cursor: progress; opacity: .8; }
.bk-done { justify-items: center; padding: 28px 8px; text-align: center; }
.bk-done-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: #fff;
  background: linear-gradient(120deg, #8E3F78, #AC508F 60%, #8A4B9C); box-shadow: 0 10px 30px -10px rgba(229, 138, 196, 0.7); }
.bk-done-ic .ic { width: 28px; height: 28px; }
.bk-done h3 { margin: 0; font-size: 1.6rem; }
.bk-done-slot { margin: 0; color: var(--accent-text); font-weight: 600; font-size: 1.05rem; }
.bk-step:not([hidden]) { animation: bkIn .4s cubic-bezier(.2, .7, .2, 1); }

/* ------------------------------------------------------------ proof: before and after */

.bk-head { max-width: 760px; margin-bottom: 36px; }
.bk-pairs { display: grid; gap: 16px; }
@media (min-width: 900px) { .bk-pairs { grid-template-columns: 1fr 1fr; } }
.bk-pair { padding: 18px; border-radius: 18px; }
.bk-pair-biz { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-weight: 600; }
.bk-ba { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch; }
.bk-b, .bk-a { position: relative; padding: 14px; border-radius: 12px; min-width: 0; display: flex; flex-direction: column; }
.bk-b { background: rgba(255, 107, 94, 0.06); border: 1px solid rgba(255, 107, 94, 0.28); }
.bk-a { overflow: hidden; background: rgba(91, 214, 155, 0.06); border: 1px solid rgba(91, 214, 155, 0.3); }
.bk-b .bk-cap { color: #FF9A90; }
.bk-a .bk-cap { color: var(--ok-text); }
.bk-ba ul { list-style: none; margin: 10px 0 16px; padding: 0; display: grid; gap: 8px; font-size: 0.88rem; line-height: 1.35; }
.bk-ba li { display: flex; align-items: flex-start; gap: 8px; }
.bk-unread { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 8px rgba(255, 107, 94, 0.8); }
.bk-a .ic { color: var(--ok); margin-top: 1px; }
.bk-arrow { align-self: center; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff;
  background: linear-gradient(145deg, #4976B1, #AC508F); box-shadow: 0 0 16px -2px rgba(172, 80, 143, 0.7); }
.bk-stamp { align-self: center; margin-top: auto; padding: 4px 12px; border: 2.5px solid var(--ok); border-radius: 8px;
  font-family: var(--mono); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ok);
  background: rgba(8, 12, 36, 0.86); transform: rotate(-10deg); box-shadow: 0 0 18px -4px rgba(91, 214, 155, 0.7); }
.js .bk-pair:not(.in) .bk-stamp { opacity: 0; }
.js .bk-pair.in .bk-stamp { animation: bkSlam .5s cubic-bezier(.3, 1.4, .5, 1) backwards; animation-delay: calc(.7s + var(--i, 0) * .25s); }
@keyframes bkSlam { 0% { opacity: 0; transform: rotate(-22deg) scale(2.6); } 60% { opacity: 1; transform: rotate(-8deg) scale(.92); } 100% { transform: rotate(-10deg); } }
.js .bk-pair .bk-b li { transition: opacity .5s; transition-delay: calc(.2s + var(--i, 0) * .08s); }
.js .bk-pair .bk-a li { transition: opacity .5s, transform .5s; transition-delay: calc(.35s + var(--i, 0) * .12s); }
.js .bk-pair:not(.in) .bk-a li { opacity: 0; transform: translateX(-8px); }
@media (max-width: 519px) {
  .bk-ba { grid-template-columns: 1fr; }
  .bk-arrow { transform: rotate(90deg); justify-self: center; }
}

/* ------------------------------------------------------------ not ready */

.bk-nr { max-width: 720px; margin: 0 auto; padding: 30px 24px; text-align: center; }
.bk-nr .bk-label { color: var(--amber); }
.bk-nr p { color: var(--text-2); font-size: 1.05rem; max-width: 52ch; margin: 0 auto 14px; }
.bk-nr .bk-label { margin-bottom: 12px; }

/* Reduced motion: site.css stops everything; these hold the final frame */
@media (prefers-reduced-motion: reduce) {
  .bk-c-sweep { display: none; }
  .bk-step:not([hidden]) { animation: none; }
  .bk-spin { animation: none; }
  .js .bk-pair:not(.in) .bk-stamp, .js .bk-pair:not(.in) .bk-a li { opacity: 1; transform: none; }
  .bk-stamp { transform: rotate(-10deg) !important; opacity: 1 !important; }
}