/* Ki — Corporate gifting page (ki_gift_* widgets)
   ────────────────────────────────────────────────
   One stylesheet for the whole page rather than one per widget: these six
   widgets share a banding system, a button pair, a card and a head, and
   splitting that across six files would mean six copies of the same rules
   drifting apart. They are only ever used together.

   The design handover specified Cormorant Garamond / Jost and a navy-and-teal
   palette. The brief also said to match the rest of the site, and the site's
   own tokens already cover every one of those roles — Marcellus leads the
   serif stack with Cormorant Garamond right behind it as the fallback. So the
   page is built on --ki-* tokens: it reads as part of ki-electrolytes.com, and
   it follows any future palette change instead of stranding one page on
   hard-coded hexes. */

/* ── Section shell + bands ──────────────────────────────────── */
.ki-scope .ki-gift {
  position: relative;
  padding: 96px 0;
  background: var(--ki-paper);
}
.ki-scope .ki-gift.tone-paper { background: var(--ki-cream); }
.ki-scope .ki-gift.tone-white { background: var(--ki-paper); }
.ki-scope .ki-gift.tone-tint  { background: var(--ki-blue-tint); }
.ki-scope .ki-gift.tone-dark  { background: var(--ki-ink); color: var(--ki-paper); }

/* ── Shared type roles ──────────────────────────────────────── */
.ki-scope .ki-gift .gift-eyebrow {
  display: block;
  font-family: var(--ki-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ki-blue-deep);
}
.ki-scope .ki-gift.tone-dark .gift-eyebrow { color: var(--ki-blue-2); }

.ki-scope .ki-gift .gift-h1 {
  font-family: var(--ki-serif);
  font-size: clamp(40px, 5.2vw, 64px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--ki-ink);
  margin: 0;
}
.ki-scope .ki-gift .gift-h2 {
  font-family: var(--ki-serif);
  font-size: clamp(32px, 3.9vw, 46px);
  font-weight: 400;
  line-height: 1.12;
  color: var(--ki-ink);
  margin: 0;
}
.ki-scope .ki-gift.tone-dark .gift-h1,
.ki-scope .ki-gift.tone-dark .gift-h2 { color: var(--ki-paper); }
.ki-scope .ki-gift .gift-h1 em,
.ki-scope .ki-gift .gift-h2 em {
  font-style: italic;
  color: var(--ki-blue-deep);
}
.ki-scope .ki-gift.tone-dark .gift-h1 em,
.ki-scope .ki-gift.tone-dark .gift-h2 em { color: var(--ki-blue-2); }

.ki-scope .ki-gift .gift-lede {
  font-family: var(--ki-sans);
  font-size: 19px;
  line-height: 1.6;
  color: var(--ki-ink-soft);
  max-width: 54ch;
  margin: 0;
}

.ki-scope .ki-gift .gift-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 680px;
  margin-bottom: 44px;
}

/* ── Buttons ────────────────────────────────────────────────── */
.ki-scope .ki-gift .gift-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
}
.ki-scope .ki-gift .gift-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  /* Vertical padding as well as a min-height, so a label that wraps to two
     lines grows the pill evenly instead of pressing against its edges. */
  padding: 13px 30px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-family: var(--ki-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;      /* centres the second line of a wrapped label */
  text-wrap: balance;      /* splits a wrap evenly rather than orphaning a word */
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.ki-scope .ki-gift .gift-btn.is-primary {
  background: var(--ki-blue);
  border-color: var(--ki-blue);
  color: #fff;
}
.ki-scope .ki-gift .gift-btn.is-primary:hover {
  background: var(--ki-blue-deep);
  border-color: var(--ki-blue-deep);
  transform: translateY(-1px);
}
.ki-scope .ki-gift .gift-btn.is-ghost {
  background: transparent;
  border-color: var(--ki-ink);
  color: var(--ki-ink);
}
.ki-scope .ki-gift .gift-btn.is-ghost:hover {
  background: var(--ki-ink);
  color: var(--ki-paper);
  transform: translateY(-1px);
}
.ki-scope .ki-gift.tone-dark .gift-btn.is-ghost {
  border-color: var(--ki-paper);
  color: var(--ki-paper);
}
.ki-scope .ki-gift.tone-dark .gift-btn.is-ghost:hover {
  background: var(--ki-paper);
  color: var(--ki-ink);
}

/* ════════════ Hero ════════════ */
.ki-scope .ki-gift-hero { padding-bottom: 0; }
.ki-scope .ki-gift-hero .gift-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  padding-bottom: 80px;
}
/* The image is FIRST in the markup so it leads on phones; on desktop the grid
   sends it to the second column. Source order stays mobile-correct and no
   duplicate markup is needed. */
.ki-scope .ki-gift-hero .gift-hero-media { order: 2; }
.ki-scope .ki-gift-hero .gift-hero-copy {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ki-scope .ki-gift-hero .gift-hero-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 620px;
  border-radius: 24px;
  display: block;
  object-fit: cover;
}
.ki-scope .ki-gift-hero .gift-btns { padding-top: 8px; }

/* Dark reassurance strip pinned under the hero. */
.ki-scope .ki-gift-hero .gift-strip {
  background: var(--ki-ink);
  color: var(--ki-paper);
}
.ki-scope .ki-gift-hero .gift-strip-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 36px;
  padding-top: 18px;
  padding-bottom: 18px;
  font-family: var(--ki-sans);
  font-size: 15px;
  text-align: center;
}
.ki-scope .ki-gift-hero .gift-strip-inner .is-accent { color: var(--ki-blue-2); }

/* ════════════ Cards ════════════ */
.ki-scope .ki-gift-cards .gift-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}
.ki-scope .ki-gift-cards.variant-card .gift-card {
  background: var(--ki-paper);
  border-radius: 20px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 1px 2px rgba(22, 22, 26, 0.04), 0 10px 30px rgba(22, 22, 26, 0.05);
}
.ki-scope .ki-gift-cards.variant-card.size-compact .gift-card { padding: 28px; gap: 10px; }
/* On the white band a shadowed white card would disappear, so it takes a
   hairline instead. */
.ki-scope .ki-gift-cards.tone-white.variant-card .gift-card {
  box-shadow: none;
  border: 1px solid var(--ki-rule);
}
.ki-scope .ki-gift-cards.tone-dark.variant-card .gift-card {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: none;
}

.ki-scope .ki-gift-cards .gift-card-kicker {
  font-family: var(--ki-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ki-blue-deep);
}
.ki-scope .ki-gift-cards .gift-card-title {
  font-family: var(--ki-serif);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.18;
  color: var(--ki-ink);
  margin: 0;
}
.ki-scope .ki-gift-cards.size-compact .gift-card-title { font-size: 26px; }
.ki-scope .ki-gift-cards .gift-card-body {
  font-family: var(--ki-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ki-ink-soft);
  margin: 0;
}
.ki-scope .ki-gift-cards .gift-card-foot {
  font-family: var(--ki-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--ki-ink);
  margin: 4px 0 0;
}
.ki-scope .ki-gift-cards.tone-dark .gift-card-title,
.ki-scope .ki-gift-cards.tone-dark .gift-card-foot { color: var(--ki-paper); }
.ki-scope .ki-gift-cards.tone-dark .gift-card-body { color: #C9DBE5; }

/* Flow variant — numbered steps joined by arrows.
   A flex row rather than the grid the other variants use, because the arrows
   are real items between the steps: they wrap with them and can be rotated
   once the row stacks, which a grid of equal columns could not do. */
.ki-scope .ki-gift-cards.variant-flow .gift-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
}
/* Left-aligned, like every other block of text on the page. Centring the
   steps made them the one ragged-both-edges element in an otherwise
   left-aligned column. */
.ki-scope .ki-gift-cards.variant-flow .gift-card {
  flex: 1 1 200px;
  max-width: 260px;
  background: none;
  padding: 0;
  box-shadow: none;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 12px;
}
/* The step number becomes a badge: it reads as a marker in a sequence rather
   than as decorative type, which is what makes the order legible at a glance. */
.ki-scope .ki-gift-cards.variant-flow .gift-card-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1.5px solid var(--ki-blue);
  background: var(--ki-paper);
  font-family: var(--ki-serif);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  color: var(--ki-blue);
}
.ki-scope .ki-gift-cards.variant-flow .gift-card-title {
  font-family: var(--ki-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
}
.ki-scope .ki-gift-cards.variant-flow .gift-card-body {
  font-size: 15px;
  max-width: 30ch;
}
.ki-scope .ki-gift-cards.variant-flow .gift-flow-arrow {
  /* Sits on the badges' centre line, not the middle of the whole step. */
  flex: 0 0 auto;
  margin-top: 14px;
  font-size: 22px;
  line-height: 1;
  color: var(--ki-blue);
  opacity: 0.55;
  user-select: none;
}
.ki-scope .ki-gift-cards.variant-flow.tone-dark .gift-card-kicker {
  background: transparent;
  border-color: var(--ki-blue-2);
  color: var(--ki-blue-2);
}
.ki-scope .ki-gift-cards.variant-flow.tone-dark .gift-flow-arrow { color: var(--ki-blue-2); }

/* Bare variant — the numbered "how it works" row. */
.ki-scope .ki-gift-cards.variant-bare .gift-card {
  background: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ki-scope .ki-gift-cards.variant-bare .gift-card-kicker {
  font-family: var(--ki-serif);
  font-size: 44px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  color: var(--ki-blue);
}
.ki-scope .ki-gift-cards.variant-bare .gift-card-title {
  font-family: var(--ki-sans);
  font-size: 16px;
  font-weight: 600;
}
.ki-scope .ki-gift-cards.variant-bare .gift-card-body { font-size: 15px; }

/* ════════════ Split ════════════ */
.ki-scope .ki-gift-split .gift-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.ki-scope .ki-gift-split.img-round .gift-split-grid {
  grid-template-columns: auto 1fr;
  gap: 48px;
  max-width: 1040px;
}
/* Image first in source (phones lead with it); desktop decides the side. */
.ki-scope .ki-gift-split.img-left  .gift-split-media { order: 1; }
.ki-scope .ki-gift-split.img-left  .gift-split-copy  { order: 2; }
.ki-scope .ki-gift-split.img-right .gift-split-media { order: 2; }
.ki-scope .ki-gift-split.img-right .gift-split-copy  { order: 1; }

.ki-scope .ki-gift-split .gift-split-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.ki-scope .ki-gift-split .gift-split-img {
  width: 100%;
  display: block;
  object-fit: cover;
  border-radius: 24px;
  aspect-ratio: 3 / 2;
}
.ki-scope .ki-gift-split.img-round .gift-split-media {
  flex: 0 0 240px;
  width: 240px;
}
.ki-scope .ki-gift-split.img-round .gift-split-img {
  height: 240px;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
}
.ki-scope .ki-gift-split .gift-split-body {
  font-family: var(--ki-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ki-ink-soft);
  margin: 0;
  max-width: 54ch;
}
.ki-scope .ki-gift-split .gift-split-list {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-family: var(--ki-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ki-ink-soft);
}
.ki-scope .ki-gift-split .gift-split-list li::marker { color: var(--ki-blue); }
.ki-scope .ki-gift-split .gift-split-foot,
.ki-scope .ki-gift-split .gift-split-contact {
  font-family: var(--ki-sans);
  font-size: 15px;
  color: var(--ki-ink-mute);
  margin: 0;
}
.ki-scope .ki-gift-split .gift-split-contact a {
  color: var(--ki-blue-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ════════════ Quote ════════════ */
.ki-scope .ki-gift-quote .gift-quote-grid {
  display: flex;
  align-items: center;
  gap: 48px;
}
.ki-scope .ki-gift-quote .gift-quote-media {
  flex: 0 0 200px;
  width: 200px;
  height: 200px;
  border-radius: 999px;
  overflow: hidden;
}
.ki-scope .ki-gift-quote .gift-quote-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.ki-scope .ki-gift-quote .gift-quote-fig {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ki-scope .ki-gift-quote blockquote {
  margin: 0;
  font-family: var(--ki-serif-italic);
  font-style: italic;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.34;
  color: var(--ki-ink);
  /* The theme centres bare <blockquote>s. Everything else in this column is
     left-aligned, so state it rather than inherit. */
  text-align: left;
}
.ki-scope .ki-gift-quote figcaption {
  font-family: var(--ki-sans);
  font-size: 16px;
  color: var(--ki-ink-soft);
  text-align: left;
}
.ki-scope .ki-gift-quote .gift-quote-name { font-weight: 600; color: var(--ki-ink); }

/* ════════════ Pricing ════════════ */
.ki-scope .ki-gift-pricing .gift-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.ki-scope .ki-gift-pricing .gift-tier {
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 20px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ki-scope .ki-gift-pricing .gift-tier.is-highlight { border-color: var(--ki-blue-2); }
.ki-scope .ki-gift-pricing .gift-tier-qty,
.ki-scope .ki-gift-pricing .gift-tier-unit {
  font-family: var(--ki-sans);
  color: #C9DBE5;
  margin: 0;
}
.ki-scope .ki-gift-pricing .gift-tier-qty  { font-size: 16px; }
.ki-scope .ki-gift-pricing .gift-tier-unit { font-size: 15px; }
.ki-scope .ki-gift-pricing .gift-tier-price {
  font-family: var(--ki-serif);
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
  color: var(--ki-paper);
  margin: 0;
}
.ki-scope .ki-gift-pricing .gift-terms {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  font-family: var(--ki-sans);
  font-size: 15px;
  color: #C9DBE5;
}

/* Light bands keep the tier borders readable. */
.ki-scope .ki-gift-pricing:not(.tone-dark) .gift-tier { border-color: var(--ki-rule); }
.ki-scope .ki-gift-pricing:not(.tone-dark) .gift-tier-price { color: var(--ki-ink); }
.ki-scope .ki-gift-pricing:not(.tone-dark) .gift-tier-qty,
.ki-scope .ki-gift-pricing:not(.tone-dark) .gift-tier-unit,
.ki-scope .ki-gift-pricing:not(.tone-dark) .gift-terms { color: var(--ki-ink-mute); }

/* ════════════ Deadlines ════════════ */
.ki-scope .ki-gift-deadlines .gift-deadline-panel {
  background: var(--ki-paper);
  border-radius: 20px;
  padding: 30px 34px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 48px;
  box-shadow: 0 1px 2px rgba(22, 22, 26, 0.04), 0 10px 30px rgba(22, 22, 26, 0.05);
}
.ki-scope .ki-gift-deadlines.tone-white .gift-deadline-panel {
  box-shadow: none;
  border: 1px solid var(--ki-rule);
}
.ki-scope .ki-gift-deadlines .gift-deadline-head {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ki-scope .ki-gift-deadlines .gift-deadline-title {
  font-family: var(--ki-serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.18;
  color: var(--ki-ink);
  margin: 0;
}
.ki-scope .ki-gift-deadlines .gift-deadline-dates {
  flex: 1 1 520px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px 28px;
}
.ki-scope .ki-gift-deadlines .gift-deadline-date {
  font-family: var(--ki-sans);
  font-size: 18px;
  font-weight: 600;
  color: var(--ki-ink);
  margin: 0 0 2px;
}
.ki-scope .ki-gift-deadlines .gift-deadline-desc {
  font-family: var(--ki-sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ki-ink-soft);
  margin: 0;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ki-scope .ki-gift { padding: 72px 0; }

  /* Every split layout collapses to one column, and because the image is
     first in source it lands above the copy — the behaviour the handover
     asked for on phones. */
  .ki-scope .ki-gift-hero .gift-hero-grid,
  .ki-scope .ki-gift-split .gift-split-grid,
  .ki-scope .ki-gift-split.img-round .gift-split-grid {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-bottom: 56px;
  }
  .ki-scope .ki-gift-hero .gift-hero-media,
  .ki-scope .ki-gift-hero .gift-hero-copy,
  .ki-scope .ki-gift-split .gift-split-media,
  .ki-scope .ki-gift-split .gift-split-copy { order: 0; }

  .ki-scope .ki-gift-hero .gift-hero-img { max-height: 460px; }

  /* Portrait above the quote, both hard left — the quote should sit in the
     same column as every other block of text on the page. */
  .ki-scope .ki-gift-quote .gift-quote-grid {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .ki-scope .ki-gift-quote .gift-quote-fig { gap: 16px; }
  .ki-scope .ki-gift-split.img-round .gift-split-media { margin: 0 auto; }

  .ki-scope .ki-gift-deadlines .gift-deadline-panel { gap: 20px; }
  .ki-scope .ki-gift-pricing .gift-tier-price { font-size: 54px; }

  /* Flow stacks into a single column. Rather than simply dropping each step
     below the last, the badge moves beside its text so the numbers form one
     vertical line down the left edge, with the arrows continuing that line —
     the sequence reads as a single thread instead of four separate blocks. */
  .ki-scope .ki-gift-cards.variant-flow .gift-grid {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .ki-scope .ki-gift-cards.variant-flow .gift-card {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: 52px 1fr;
    column-gap: 18px;
    row-gap: 4px;
    align-items: start;
  }
  .ki-scope .ki-gift-cards.variant-flow .gift-card-kicker {
    grid-row: span 2;
    width: 52px;
    height: 52px;
    font-size: 24px;
  }
  .ki-scope .ki-gift-cards.variant-flow .gift-card-body { max-width: none; }
  .ki-scope .ki-gift-cards.variant-flow .gift-flow-arrow {
    /* Sits on the badges' centre line (52 / 2), continuing the thread. */
    align-self: flex-start;
    margin: 0 0 0 20px;
    transform: rotate(90deg);
  }
}

@media (max-width: 560px) {
  .ki-scope .ki-gift { padding: 56px 0; }
  .ki-scope .ki-gift .gift-head { margin-bottom: 32px; }
  /* Buttons stack and centre on phones. They are capped rather than run edge
     to edge: a full-bleed pill reads as a banner, and a long label like "Book
     a Zoom to plan your order" then wraps with its second line hanging left.
     Capped + centred keeps it reading as a button. */
  .ki-scope .ki-gift .gift-btns {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .ki-scope .ki-gift .gift-btn {
    width: 100%;
    max-width: 340px;
    padding: 15px 22px;
    font-size: 13px;
    letter-spacing: 0.06em;
  }
  .ki-scope .ki-gift-cards.variant-card .gift-card { padding: 28px 24px; }
  .ki-scope .ki-gift-deadlines .gift-deadline-panel { padding: 26px 24px; }
  .ki-scope .ki-gift-pricing .gift-tier { padding: 28px 24px; }

  /* A 32px italic serif pull-quote is too loud in a 300px column; drop it to
     a size that still reads as a quote without swamping the attribution. */
  .ki-scope .ki-gift-quote blockquote { font-size: 21px; line-height: 1.42; }
  .ki-scope .ki-gift-quote figcaption { font-size: 15px; line-height: 1.5; }
  .ki-scope .ki-gift-quote .gift-quote-fig { gap: 14px; }
}