/* Site-level layout for the two homepage pieces kwizweb has no component for:
   the proof strip and the forked closing CTA. Colours come from the kwizweb
   theme's --kw-* custom properties, never literals. */

.kw-proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 2.5rem 0;
}
.kw-proof__item {
  padding: 1.1rem 1.25rem;
  border-top: 4px solid var(--kw-gold);
  background: var(--kw-cream);
  color: var(--kw-navy);
  font-size: .95rem;
  line-height: 1.45;
}
.kw-proof__item p { margin: 0; }
.kw-proof__item strong { display: block; margin-bottom: .25rem; font-size: 1.05rem; }

.kw-fork {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1rem 0 2.5rem;
}
.kw-fork .kw-cta-band { margin: 0; height: 100%; }

/* Scope-a-build form: two-column fields on wide screens */
.kw-scope .kw-waitlist__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem 1rem;
  align-items: end;
}
.kw-scope .kw-field--wide, .kw-scope button[type="submit"] { grid-column: 1 / -1; }
.kw-scope button[type="submit"] { justify-self: start; }

@media (max-width: 768px) {
  .kw-proof, .kw-fork, .kw-scope .kw-waitlist__form { grid-template-columns: 1fr; }
}

/* Fix: cards inside the Kwiz Quants band inherit the band's white text, which
   made their bullet text invisible on the white card. Restore navy text there.
   (Worth folding into kwizweb components.scss upstream.) */
.kw-quants__content .kw-card,
.kw-quants__content .kw-card .kw-bullets li,
.kw-quants__content .kw-card .kw-card__sub {
  color: var(--kw-navy);
}
.kw-quants__content .kw-card .kw-card__sub { opacity: .8; }

/* Contact hint under every lead form + the contact page's ways-to-reach block */
.kw-contact-hint { margin: .75rem 0 0; font-size: .95rem; color: var(--kw-navy); }
.kw-btn--sm { padding: .3rem .8rem; font-size: .9rem; }
.kw-contact-ways p { margin: 0 0 .6rem; }

/* Lead forms: submission status (assets/kw-leads-938f89b798e040a561db7099f1ee5c1e.js) */
.kw-form__status { grid-column: 1 / -1; margin: .5rem 0 0; font-weight: 600; }
.kw-form__status:empty { display: none; }
.kw-form__status--ok { color: #1b6e3a; }
.kw-form__status--error { color: #b3261e; }
.kw-form__status a { color: inherit; text-decoration: underline; }
form.is-sending button[type="submit"] { opacity: .7; cursor: progress; }

/* Effective / last-updated line on the Privacy Policy page. */
.kw-legal-meta {
  color: var(--kw-grey, #666);
  font-size: 0.95rem;
  margin: 0 0 1.5rem;
}

/* Cookie-consent banner. Docked bottom-centre, above page content but never
   covering the whole viewport — it is a choice, not a wall. */
.kw-consent {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 1080;
  width: 100%;
  max-width: 62rem;
  padding: 0 1rem;
  box-sizing: border-box;
}
.kw-consent__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  background: var(--kw-navy, #0d2240);
  color: var(--kw-cream, #ece3cf);
  border: 1px solid rgba(201, 168, 76, 0.45);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.kw-consent__text { flex: 1 1 22rem; min-width: 0; }
.kw-consent__title {
  margin: 0 0 0.25rem;
  font-weight: 700;
  color: var(--kw-gold, #c9a84c);
  font-size: 0.95rem;
}
.kw-consent__text p { margin: 0; font-size: 0.9rem; line-height: 1.5; }
.kw-consent__text a { color: var(--kw-cream, #ece3cf); text-decoration: underline; }
.kw-consent__actions {
  display: flex;
  gap: 0.6rem;
  flex: 0 0 auto;
  flex-wrap: wrap;
}
.kw-consent__actions .kw-btn { white-space: nowrap; }
/* The ghost button sits on navy here, so invert its border/text. */
.kw-consent__actions .kw-btn--ghost {
  border-color: rgba(236, 227, 207, 0.5);
  color: var(--kw-cream, #ece3cf);
}
.kw-consent__actions .kw-btn--ghost:hover { border-color: var(--kw-cream, #ece3cf); }
@media (max-width: 575.98px) {
  /* On a phone the banner was taking well over half the viewport, hiding the
     page behind it. Tighten it so it reads as a bar, not a wall. */
  .kw-consent { bottom: 0.5rem; padding: 0 0.5rem; }
  .kw-consent__inner { flex-direction: column; align-items: stretch; gap: 0.75rem; padding: 0.85rem 1rem; }
  /* flex-basis is measured along the main axis. Once the inner box becomes a
     column, the text block's `flex: 1 1 22rem` stops meaning "at least 22rem
     wide" and starts meaning "22rem TALL", which is what was padding the
     banner out to half the screen. Let it size to its content instead. */
  .kw-consent__text { flex: 0 0 auto; }
  .kw-consent__title { font-size: 0.9rem; }
  .kw-consent__text p { font-size: 0.82rem; line-height: 1.45; }
  .kw-consent__actions { justify-content: stretch; gap: 0.5rem; }
  .kw-consent__actions .kw-btn { flex: 1 1 auto; text-align: center; }
}

/* Pending-decision callout in the Privacy Policy. */
.kw-legal-note {
  border-left: 3px solid var(--kw-gold, #c9a84c);
  background: var(--kw-light-grey, #f5f5f5);
  padding: 0.9rem 1.1rem;
  margin: 1.25rem 0;
  font-size: 0.95rem;
}
.kw-legal-note p:last-child { margin-bottom: 0; }

/* ── Store-template gallery (Ecommerce page) ─────────────────────────────── */
.kw-tpl { margin: 3rem 0; }
.kw-tpl__head { max-width: 46rem; margin-bottom: 1.5rem; }
.kw-tpl__title { margin: 0 0 .5rem; color: var(--kw-navy, #0d2240); }
.kw-tpl__text { margin: 0; color: var(--kw-grey, #666); }

.kw-tpl__chips {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding-bottom: 1.25rem; border-bottom: 1px solid #e6e6e6; margin-bottom: 1.5rem;
}
.kw-tpl__chip {
  font: inherit; font-size: .88rem; cursor: pointer;
  padding: .45rem .9rem; border-radius: 999px;
  border: 1px solid #d7d7d7; background: #fff; color: var(--kw-navy, #0d2240);
  transition: background .15s, border-color .15s, color .15s;
}
.kw-tpl__chip:hover { border-color: var(--kw-gold, #c9a84c); }
.kw-tpl__chip.is-active {
  background: var(--kw-navy, #0d2240); border-color: var(--kw-navy, #0d2240); color: #fff;
}
.kw-tpl__chip:focus-visible { outline: 2px solid var(--kw-gold, #c9a84c); outline-offset: 2px; }

.kw-tpl__lead { margin: 0 0 1.25rem; font-size: 1.02rem; color: var(--kw-black, #333); }
.kw-tpl__shots { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767.98px) { .kw-tpl__shots { grid-template-columns: 1fr; } }

.kw-tpl__shot { margin: 0; }
.kw-tpl__frame {
  display: block; width: 100%; padding: 0; cursor: zoom-in; position: relative;
  border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff;
  box-shadow: 0 2px 10px rgba(13, 34, 64, .07);
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.kw-tpl__frame:hover { box-shadow: 0 8px 24px rgba(13, 34, 64, .14); transform: translateY(-2px); border-color: var(--kw-gold, #c9a84c); }
.kw-tpl__frame:focus-visible { outline: 2px solid var(--kw-gold, #c9a84c); outline-offset: 2px; }
.kw-tpl__frame img { display: block; width: 100%; height: auto; }
.kw-tpl__zoom {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(13, 34, 64, .88), rgba(13, 34, 64, 0));
  color: #fff; font-size: .8rem; padding: 1.75rem .75rem .6rem; text-align: center;
  opacity: 0; transition: opacity .18s;
}
.kw-tpl__frame:hover .kw-tpl__zoom, .kw-tpl__frame:focus-visible .kw-tpl__zoom { opacity: 1; }

.kw-tpl__shot figcaption { font-size: .9rem; color: var(--kw-grey, #666); margin-top: .6rem; line-height: 1.5; }
.kw-tpl__shot figcaption strong { color: var(--kw-navy, #0d2240); }
.kw-tpl__step {
  display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem;
  margin-right: .45rem; border-radius: 50%; font-size: .75rem; font-weight: 700;
  background: var(--kw-cream, #ece3cf); color: var(--kw-navy, #0d2240);
}

.kw-tpl__pick { margin: 1.5rem 0 0; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.kw-tpl__picked { font-size: .88rem; color: var(--kw-emerald, #065f46); font-weight: 600; }

/* Lightbox: the captures are full-page and very tall, so the body scrolls. */
.kw-tpl__lightbox {
  position: fixed; inset: 0; z-index: 1090;
  background: rgba(8, 17, 32, .9); display: flex; flex-direction: column;
}
.kw-tpl__lightbox[hidden] { display: none; }
.kw-tpl__lightbox-bar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .75rem 1rem; color: var(--kw-cream, #ece3cf);
  background: var(--kw-navy, #0d2240); font-size: .92rem;
}
.kw-tpl__close {
  font: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer;
  background: none; border: 0; color: inherit; padding: 0 .35rem;
}
.kw-tpl__close:focus-visible { outline: 2px solid var(--kw-gold, #c9a84c); outline-offset: 2px; }
.kw-tpl__lightbox-body { flex: 1 1 auto; overflow: auto; padding: 1rem; -webkit-overflow-scrolling: touch; }
.kw-tpl__lightbox-body img {
  display: block; margin: 0 auto; max-width: 860px; width: 100%;
  border-radius: 6px; box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
}

/* ── Template multi-select in the enquiry form ───────────────────────────── */
.kw-field--templates { grid-column: 1 / -1; }
.kw-tplpick__legend { font-weight: 600; margin-bottom: .2rem; display: block; }
.kw-tplpick__hint { font-size: .85rem; color: var(--kw-grey, #666); margin: 0 0 .6rem; }
.kw-tplpick__grid {
  display: grid; gap: .45rem .9rem;
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  border: 0; padding: 0; margin: 0;
}
.kw-tplpick__opt { display: flex; align-items: center; gap: .5rem; font-size: .92rem; cursor: pointer; }
.kw-tplpick__opt input { width: 1rem; height: 1rem; flex: 0 0 auto; accent-color: var(--kw-gold, #c9a84c); }

/* ── Customer-journey reels (Ecommerce page) ─────────────────────────────── */
/* 9:16 vertical. On a phone that is close to full-bleed, which is right for a
   reel; on a desktop an uncapped 9:16 would be absurdly tall, so cap it. */
.kw-reel { margin: 0 0 1.5rem; max-width: 320px; }
.kw-reel__video {
  display: block; width: 100%; aspect-ratio: 9 / 16; height: auto;
  background: var(--kw-navy, #0d2240);
  border: 1px solid #e0e0e0; border-radius: 10px;
  box-shadow: 0 2px 12px rgba(13, 34, 64, .1);
}
.kw-reel__cap { margin-top: .55rem; font-size: .9rem; color: var(--kw-grey, #666); line-height: 1.5; }
.kw-reel__hd { display: inline-block; margin-top: .35rem; font-size: .82rem; color: var(--kw-navy, #0d2240); }

/* A product page's reel mount is empty and hidden until kw-reels-dcccdcb566a96e3e123070951589fbe8.js fills it.
   Belt and braces: Bootstrap's reboot already hides [hidden], but this element
   also picks up .kw-reels once filled, and that sets a margin. */
.kw-reels-mount[hidden] { display: none !important; }

/* Reels whose slug matches no template panel get their own section. */
.kw-reels { margin: 3rem 0; }
.kw-reels__title { margin: 0 0 1.25rem; color: var(--kw-navy, #0d2240); }
.kw-reels__grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 320px));
}
@media (max-width: 575.98px) {
  /* Full width on a phone — the reel is the point of the section. */
  .kw-reel { max-width: 100%; }
  .kw-reels__grid { grid-template-columns: 1fr; }
}