/* ===========================================================================
   Hunting Packages hub - draft design, 15 Sep 2026
   Built on the house design system (vault: Reference/Kaiwhai design system.md).
   Every colour is a theme variable with the documented hex as the fallback, so
   this follows the site if the palette ever changes.
   All classes are prefixed kwp- so nothing can collide with the Huntar theme.
   =========================================================================== */

.kwp{
  --kwp-brand:  var(--theme-color,  #9F974F);
  --kwp-head:   var(--title-color,  #686242);
  --kwp-body:   var(--body-color,   #85847d);
  --kwp-cream:  var(--theme-color3, #F9F7E6);
  --kwp-dark:   var(--dark-color,   #252323);
  --kwp-line:   var(--border-color, #f0f0f0);
  --kwp-smoke:  var(--smoke-color,  #f8f8f8);
  --kwp-radius: 20px;
  font-family: inherit;
  color: var(--kwp-body);
  line-height: 1.7;
}
.kwp *{ box-sizing: border-box; }
.kwp img{ max-width: 100%; height: auto; display: block; }

.kwp-wrap{ max-width: 1220px; margin-inline: auto; padding-inline: 1.5rem; }
.kwp-sec{ padding-block: 72px; }
.kwp-sec--cream{ background: var(--kwp-cream); }
.kwp-sec--smoke{ background: var(--kwp-smoke); }
@media (max-width: 767px){ .kwp-sec{ padding-block: 44px; } }

.kwp h2, .kwp h3, .kwp h4, .kwp h5{
  font-family: inherit; color: var(--kwp-head);
  margin: 0 0 14px; line-height: 1.25; text-wrap: balance;
}
.kwp h2{ font-size: 36px; font-weight: 700; }
.kwp h3{ font-size: 30px; font-weight: 700; }
.kwp h4{ font-size: 24px; font-weight: 700; }
.kwp h5{ font-size: 18px; font-weight: 700; }
.kwp p{ margin: 0 0 16px; }
.kwp p:last-child{ margin-bottom: 0; }
@media (max-width: 767px){
  .kwp h2{ font-size: 28px; } .kwp h3{ font-size: 24px; } .kwp h4{ font-size: 20px; }
}

.kwp-eyebrow{
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--kwp-brand); margin: 0 0 10px;
}
.kwp-lede{ font-size: 18px; max-width: 62ch; }
.kwp-head{ margin-bottom: 40px; max-width: 70ch; }

/* --- pill buttons, per the design system ---------------------------------- */
.kwp-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: inherit; font-size: 16px; font-weight: 500; line-height: 1;
  padding: 15px 30px; border-radius: 9999px; border: 2px solid transparent;
  background: var(--kwp-brand); color: #fff; text-decoration: none; cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease,
              transform .25s ease, box-shadow .25s ease;
  min-height: 48px;
}
.kwp-btn:hover, .kwp-btn:focus-visible{
  background: var(--kwp-head); color: #fff;
  transform: translateY(-2px); box-shadow: 0 6px 16px rgba(37,35,35,.14);
}
/* the two hero buttons, spaced apart rather than sharing a text node */
.kwp-cta{ display: flex; flex-wrap: wrap; gap: 18px; margin-top: 26px; }
@media (prefers-reduced-motion: reduce){
  .kwp-btn, .kwp-card, .kwp-mini, .kwp-opt, .kwp-vid-play img{ transition: none; }
  .kwp-btn:hover, .kwp-card:hover, .kwp-mini:hover{ transform: none; }
}
.kwp-btn--ghost{ background: transparent; color: var(--kwp-head); border-color: var(--kwp-brand); }
.kwp-btn--ghost:hover, .kwp-btn--ghost:focus-visible{ background: var(--kwp-brand); color: #fff; border-color: var(--kwp-brand); }
.kwp-btn--wide{ width: 100%; }
.kwp a:focus-visible, .kwp button:focus-visible, .kwp input:focus-visible,
.kwp select:focus-visible, .kwp textarea:focus-visible{
  outline: 3px solid var(--kwp-brand); outline-offset: 2px;
}

/* --- intro ---------------------------------------------------------------- */
.kwp-intro{ display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
@media (max-width: 991px){ .kwp-intro{ grid-template-columns: 1fr; gap: 32px; } }
.kwp-intro-media{ border-radius: var(--kwp-radius); overflow: hidden; }
.kwp-season{
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px;
  padding: 9px 18px; border-radius: 9999px;
  background: #fff; border: 1px solid var(--kwp-line);
  font-size: 14px; font-weight: 500; color: var(--kwp-head);
}
.kwp-season::before{
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--kwp-brand); flex: none;
}

/* --- trust strip ---------------------------------------------------------- */
.kwp-trust{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--kwp-line); border: 1px solid var(--kwp-line);
  border-radius: var(--kwp-radius); overflow: hidden; margin-top: 44px;
}
.kwp-trust div{ background: #fff; padding: 24px 20px; text-align: center; }
.kwp-trust b{
  display: block; font-size: 30px; font-weight: 700; color: var(--kwp-head);
  line-height: 1.1; margin-bottom: 4px; font-variant-numeric: tabular-nums;
}
.kwp-trust span{ font-size: 14px; }
@media (max-width: 767px){ .kwp-trust{ grid-template-columns: repeat(2, 1fr); } }

/* --- the picker: the one genuinely new feature ---------------------------- */
.kwp-picker{
  background: #fff; border: 1px solid var(--kwp-line);
  border-radius: var(--kwp-radius); padding: 40px;
  box-shadow: 0 2px 20px rgba(37,35,35,.05);
}
@media (max-width: 767px){ .kwp-picker{ padding: 24px; } }
.kwp-q{ margin-bottom: 28px; }
.kwp-q > p{ font-weight: 700; color: var(--kwp-head); font-size: 17px; margin-bottom: 14px; }
.kwp-opts{ display: flex; flex-wrap: wrap; gap: 10px; }
.kwp-opt{
  font-family: inherit; font-size: 15px; line-height: 1;
  padding: 13px 22px; border-radius: 9999px; cursor: pointer;
  background: #fff; color: var(--kwp-head);
  border: 1px solid var(--kwp-line);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
  min-height: 44px;
}
.kwp-opt:hover{ border-color: var(--kwp-brand); }
.kwp-opt[aria-pressed="true"]{ background: var(--kwp-brand); border-color: var(--kwp-brand); color: #fff; }
.kwp-result{
  border-top: 1px solid var(--kwp-line); margin-top: 8px; padding-top: 28px;
}
.kwp-result[hidden]{ display: none; }
.kwp-result-card{
  display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: center;
  background: var(--kwp-cream); border-radius: 14px; padding: 20px;
}
@media (max-width: 640px){ .kwp-result-card{ grid-template-columns: 1fr; } }
.kwp-result-card img{ border-radius: 10px; aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.kwp-result-actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.kwp-hint{ font-size: 14px; margin-top: 18px; }

/* --- package cards -------------------------------------------------------- */
.kwp-grid{ display: grid; gap: 28px; }
.kwp-grid--4{ grid-template-columns: repeat(4, 1fr); }
.kwp-grid--3{ grid-template-columns: repeat(3, 1fr); }
.kwp-grid--2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px){ .kwp-grid--4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 991px){ .kwp-grid--3{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){
  .kwp-grid--4, .kwp-grid--3, .kwp-grid--2{ grid-template-columns: 1fr; }
}

.kwp-card{
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--kwp-line);
  border-radius: var(--kwp-radius); overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.kwp-card:hover{ transform: translateY(-4px); box-shadow: 0 10px 30px rgba(37,35,35,.09); }
.kwp-card-img{ position: relative; aspect-ratio: 16/10; overflow: hidden; }
.kwp-card-img img{ width: 100%; height: 100%; object-fit: cover; }
.kwp-flag{
  position: absolute; top: 14px; left: 14px;
  background: var(--kwp-brand); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 9999px;
}
.kwp-card-body{ padding: 26px; display: flex; flex-direction: column; flex: 1 1 auto; }
.kwp-card-body h4{ margin-bottom: 6px; }
.kwp-species{ font-size: 14px; color: var(--kwp-body); margin: 0 0 16px; }
.kwp-facts{ list-style: none; margin: 0 0 20px; padding: 0; font-size: 15px; }
.kwp-facts li{ display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--kwp-line); }
.kwp-facts li:last-child{ border-bottom: 0; }
.kwp-facts b{ color: var(--kwp-head); font-weight: 700; min-width: 92px; flex: none; }
.kwp-price{
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--kwp-line);
  font-size: 15px; color: var(--kwp-head); font-weight: 700; margin-bottom: 16px;
}
.kwp-card .kwp-btn{ width: 100%; }

/* smaller cards for the seven travel-style packages */
.kwp-mini{
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--kwp-line); border-radius: 14px;
  text-decoration: none; transition: border-color .25s ease, transform .25s ease;
}
.kwp-mini:hover{ border-color: var(--kwp-brand); transform: translateY(-3px); }
.kwp-mini img{ aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.kwp-mini-body{ padding: 18px 20px 22px; }
.kwp-mini h5{ margin-bottom: 6px; }
.kwp-mini p{ font-size: 14px; margin: 0; }
.kwp-mini-go{
  display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 700;
  color: var(--kwp-brand);
}

/* --- comparison table ----------------------------------------------------- */
.kwp-tablewrap{ overflow-x: auto; border-radius: var(--kwp-radius); border: 1px solid var(--kwp-line); background: #fff; }
.kwp-table{ width: 100%; border-collapse: collapse; min-width: 720px; font-size: 15px; }
.kwp-table th, .kwp-table td{ padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--kwp-line); }
.kwp-table thead th{
  background: var(--kwp-cream); color: var(--kwp-head); font-weight: 700;
  position: sticky; top: 0;
}
.kwp-table tbody th{ color: var(--kwp-head); font-weight: 700; white-space: nowrap; }
.kwp-table tr:last-child th, .kwp-table tr:last-child td{ border-bottom: 0; }
.kwp-table td{ font-variant-numeric: tabular-nums; }

/* --- two lists: included / not included ----------------------------------- */
.kwp-lists{ display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 860px){ .kwp-lists{ grid-template-columns: 1fr; } }
.kwp-list{ background: #fff; border: 1px solid var(--kwp-line); border-radius: var(--kwp-radius); padding: 32px; }
.kwp-list ul{ list-style: none; margin: 0; padding: 0; font-size: 15px; }
.kwp-list li{ position: relative; padding: 9px 0 9px 30px; }
.kwp-list li::before{
  position: absolute; left: 0; top: 9px; font-weight: 700; font-size: 15px;
}
.kwp-list--in li::before{ content: "+"; color: var(--kwp-brand); }
.kwp-list--out li::before{ content: "\2013"; color: var(--kwp-body); }

/* the pricing option we actually recommend - the only lifted card on the page */
.kwp-list--rec{ border-color: var(--kwp-brand); box-shadow: 0 6px 24px rgba(159,151,79,.16); }
.kwp-flag--static{
  position: static; display: inline-block; margin-bottom: 14px;
}

/* --- steps ---------------------------------------------------------------- */
.kwp-steps{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: kwpstep; }
@media (max-width: 991px){ .kwp-steps{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .kwp-steps{ grid-template-columns: 1fr; } }
.kwp-step{ background: #fff; border: 1px solid var(--kwp-line); border-radius: var(--kwp-radius); padding: 28px; }
.kwp-step::before{
  counter-increment: kwpstep; content: counter(kwpstep);
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--kwp-cream); color: var(--kwp-head);
  font-weight: 700; font-size: 17px; margin-bottom: 16px;
  font-variant-numeric: tabular-nums;
}
.kwp-step h5{ margin-bottom: 6px; }
.kwp-step p{ font-size: 15px; margin: 0; }

/* --- proof: the five video testimonials ----------------------------------- */
/* Thumbnails only until clicked - five live YouTube embeds would cost more
   page speed than the whole rest of this page put together. */
.kwp-vids{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 991px){ .kwp-vids{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .kwp-vids{ grid-template-columns: 1fr; } }
.kwp-vid{
  position: relative;
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--kwp-line); border-radius: var(--kwp-radius);
}
.kwp-vid-play{
  position: relative; display: block; width: 100%; padding: 0; border: 0;
  background: var(--kwp-cream); cursor: pointer; aspect-ratio: 16/9;
  overflow: hidden;
}
/* YouTube's hqdefault.jpg is a 4:3 file with the 16:9 frame letterboxed inside
   it, so the black bars are painted into the image and object-fit alone leaves
   a sliver of them. Sizing the image to exactly 4/3 of the box height and
   centring it pushes both bars outside the crop. */
.kwp-vid-play img{
  position: absolute; left: 0; top: 50%;
  width: 100%; height: 134.6%;   /* 133.3% is the exact fit; the extra 1.3%
                                    keeps a hairline of bar from surviving
                                    sub-pixel rounding at odd zoom levels */
  transform: translateY(-50%);
  object-fit: cover;
  transition: opacity .25s ease; opacity: .92;
}
.kwp-vid-play:hover img, .kwp-vid-play:focus-visible img{ opacity: 1; }
/* Glass, not a solid disc: the hunter's face stays visible through the button,
   which matters when the button sits over a preview that is already playing. */
.kwp-vid-play::after{
  content: ""; position: absolute; inset: 0; margin: auto; z-index: 2;
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(159,151,79,.42) no-repeat center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  background-size: 28px 28px;
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 4px 18px rgba(0,0,0,.28);
  -webkit-backdrop-filter: blur(3px) saturate(1.1);
          backdrop-filter: blur(3px) saturate(1.1);
  transition: transform .25s ease, background-color .25s ease;
}
.kwp-vid-play:hover::after, .kwp-vid-play:focus-visible::after{
  transform: scale(1.09); background-color: rgba(159,151,79,.78);
}

/* Muted silent preview that rides in on hover. Inserted by script only on a
   device that really has a pointer, and removed again the moment the pointer
   leaves, so nothing is ever loaded for a hunter who merely scrolls past.

   It sits UNDER the button rather than inside it - an iframe inside a <button>
   is invalid HTML - so while it plays the button turns transparent and drops
   its thumbnail, leaving only the glass play circle floating over the video.
   pointer-events:none means the click still belongs to the button. */
.kwp-vid-prev{
  position: absolute; left: 0; top: 0; z-index: 0;
  width: 100%; aspect-ratio: 16/9; border: 0;
  pointer-events: none; background: #000;
}
.kwp-vid-play{ z-index: 1; }
.kwp-vid.is-prev .kwp-vid-play{ background: transparent; }
.kwp-vid.is-prev .kwp-vid-play img{ opacity: 0; }
.kwp-vid iframe{ width: 100%; aspect-ratio: 16/9; border: 0; display: block; }
.kwp-vid-body{ padding: 18px 22px 22px; }
.kwp-vid-body cite{
  font-style: normal; font-weight: 700; color: var(--kwp-head);
  font-size: 16px; display: block; margin-bottom: 3px;
}
.kwp-vid-body small{ font-size: 13px; }
.kwp-vid--more{ background: var(--kwp-cream); border-color: transparent; justify-content: center; }
.kwp-vid--more .kwp-vid-body{ padding: 30px 26px; }
.kwp-vid--more p{ font-size: 14px; margin-bottom: 18px; }

/* --- the video overlay ----------------------------------------------------- */
/* A man talking to camera inside a 300px card is not watchable, and these five
   videos are the strongest proof on the page, so a click opens the video large
   over a dimmed page instead of playing it in the card. Script appends this to
   <body>, which is outside .kwp, so the one variable it needs is declared again
   here - and to <body> rather than into the card so that no ancestor's overflow
   or transform can clip it. */
.kwp-lb{
  --kwp-brand: var(--theme-color, #9F974F);
  position: fixed; inset: 0; z-index: 2147483000;
  display: none; align-items: center; justify-content: center;
  padding: 5vh 4vw;
  background: rgba(18,17,16,.9);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}
.kwp-lb.is-open{ display: flex; animation: kwp-lb-fade .22s ease both; }
/* 16:9 within whatever the window allows, so the frame can never overflow the
   screen in either direction and the name underneath always stays in view */
.kwp-lb-inner{
  width: min(1120px, 100%, calc(72vh * 16 / 9));
  display: flex; flex-direction: column; gap: 14px;
}
.kwp-lb.is-open .kwp-lb-inner{ animation: kwp-lb-rise .28s cubic-bezier(.2,.8,.3,1) both; }
.kwp-lb-stage{
  position: relative; width: 100%; aspect-ratio: 16/9;
  background: #000; border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,.6);
}
.kwp-lb-stage iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kwp-lb-cap{ text-align: center; color: rgba(255,255,255,.72); line-height: 1.5; }
.kwp-lb-cap cite{
  font-style: normal; font-weight: 700; color: #fff;
  font-size: 17px; display: block; margin-bottom: 2px;
}
.kwp-lb-cap small{ font-size: 13px; }
/* The cross alone, with no disc behind it. The box stays large so it is still
   an easy target on a phone - only the circle is gone, not the tap area - and
   a soft shadow keeps the white readable whatever ends up behind it. */
.kwp-lb-close{
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 56px; height: 56px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 44px; line-height: 1;
  color: rgba(255,255,255,.85); background: transparent; border: 0;
  text-shadow: 0 2px 10px rgba(0,0,0,.65);
  cursor: pointer; transition: color .2s ease, transform .2s ease;
}
.kwp-lb-close:hover, .kwp-lb-close:focus-visible{ color: #fff; transform: scale(1.1); }
.kwp-lb-close:focus-visible{ outline: 3px solid #fff; outline-offset: 2px; }
/* the page behind must not scroll while the video is open */
html.kwp-lb-lock, html.kwp-lb-lock body{ overflow: hidden; }
@keyframes kwp-lb-fade{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes kwp-lb-rise{
  from{ opacity: 0; transform: translateY(12px) scale(.98); }
  to{ opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce){
  .kwp-lb.is-open, .kwp-lb.is-open .kwp-lb-inner{ animation: none; }
  .kwp-lb-close{ transition: none; }
}
/* on a phone the close button needs its own room above the video */
@media (max-width: 640px){
  .kwp-lb{ padding: 78px 16px 28px; }
  .kwp-lb-close{ top: 10px; right: 10px; width: 52px; height: 52px; font-size: 40px; }
  .kwp-lb-cap cite{ font-size: 16px; }
}

/* --- FAQ ------------------------------------------------------------------ */
.kwp-faq{ max-width: 860px; }
.kwp-faq details{
  background: #fff; border: 1px solid var(--kwp-line); border-radius: 14px;
  padding: 0 24px; margin-bottom: 12px;
}
.kwp-faq summary{
  cursor: pointer; list-style: none; padding: 20px 0;
  font-weight: 700; color: var(--kwp-head); font-size: 17px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.kwp-faq summary::-webkit-details-marker{ display: none; }
.kwp-faq summary::after{
  content: "+"; font-size: 24px; font-weight: 400; color: var(--kwp-brand); flex: none; line-height: 1;
}
.kwp-faq details[open] summary::after{ content: "\2013"; }
.kwp-faq details > p{ padding: 0 0 22px; font-size: 15px; margin: 0; }

/* --- enquiry form --------------------------------------------------------- */
.kwp-ask{ display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: start; }
@media (max-width: 991px){ .kwp-ask{ grid-template-columns: 1fr; gap: 32px; } }
.kwp-form{ background: #fff; border: 1px solid var(--kwp-line); border-radius: var(--kwp-radius); padding: 36px; }
@media (max-width: 767px){ .kwp-form{ padding: 24px; } }
.kwp-field{ margin-bottom: 18px; }
.kwp-field label{ display: block; font-size: 14px; font-weight: 700; color: var(--kwp-head); margin-bottom: 7px; }
.kwp-field input, .kwp-field select, .kwp-field textarea{
  width: 100%; font-family: inherit; font-size: 16px; color: var(--kwp-dark);
  padding: 13px 16px; border: 1px solid var(--kwp-line); border-radius: 10px;
  background: #fff; min-height: 48px;
}
.kwp-field textarea{ min-height: 110px; resize: vertical; }
.kwp-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px){ .kwp-row{ grid-template-columns: 1fr; } }
.kwp-formnote{ font-size: 13px; margin-top: 14px; }
.kwp-direct{ background: var(--kwp-cream); border-radius: var(--kwp-radius); padding: 32px; }
.kwp-direct a{ color: var(--kwp-head); text-decoration: none; font-weight: 700; }
.kwp-direct a:hover{ color: var(--kwp-brand); }
.kwp-direct-row{
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid rgba(104,98,66,.16); font-size: 15px;
}
.kwp-direct-row:last-of-type{ border-bottom: 0; }
.kwp-direct-row span:first-child{ color: var(--kwp-body); }

/* --- the "needs an answer" marker ----------------------------------------- */
/* Deliberately quiet: it must read as a gap, not as a design element, and it
   must never survive to the live page. */
.kwp-tbc{
  display: inline-block; padding: 1px 9px; border-radius: 9999px;
  border: 1px dashed var(--kwp-brand); color: var(--kwp-head);
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  background: rgba(159,151,79,.07); white-space: nowrap;
}
.kwp-draftbar{
  background: var(--kwp-head); color: #fff; text-align: center;
  padding: 12px 20px; font-size: 14px; font-weight: 500;
}
.kwp-draftbar b{ color: #fff; }