/* KEIBIDROP theme: marketing sections. Load after kd.css.
   Sections: hero, trust bar, features, steps, security, platforms, pricing,
   open source, final call to action. Each is self-contained; a page uses the
   ones it needs. */

/* ---- Landing: hero ---------------------------------------------------- */

.kd-hero {
  position: relative;
  padding: 128px 0 72px;
  background:
    linear-gradient(rgba(13, 17, 22, 0.32), rgba(13, 17, 22, 0.32)),
    radial-gradient(107% 133% at 50% -9.5%, #3c3c3c 0%, #262626 38%, #090d12 100%);
}

/* Slot for a background image: a <picture class="kd-hero__media"> as the
   first child of .kd-hero. It sits behind the text and fills the section. */
.kd-hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.kd-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.kd-hero__inner { position: relative; z-index: 1; }

.kd-hero .kd-lead { margin-top: 22px; }

/* Hero banner beside the copy: below it on phones and tablets, the right
   column from 1200px. It is Mila's banner from KEIBIDROP_LP_PC_2, the
   desktop window with the phone screen over its corner, exported from Figma
   at 2x (see THEME.md). */
.kd-hero__shot { max-width: 885px; margin: 48px 0 0; }
.kd-banner { display: block; width: 100%; height: auto; }

.kd-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin-top: 32px;
}
.kd-cta .kd-btn { flex: 1 1 220px; }

.kd-hero__note {
  margin-top: 25px;
  color: var(--kd-ink-5);
  font-size: 0.9375rem;
  line-height: 1.6;
}

@media (min-width: 600px) {
  .kd-cta .kd-btn { flex: 0 0 auto; min-width: 248px; }
  .kd-cta .kd-btn--primary { min-width: 253px; }
}

@media (min-width: 1200px) {
  .kd-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 609px) minmax(0, 1fr);
    column-gap: clamp(24px, 1.76vw, 30.4px);
  }
  .kd-hero__shot { align-self: start; margin: 74px 0 0; }
}

@media (min-width: 900px) {
  .kd-hero { padding: 164px 0 115px; }
  .kd-hero .kd-lead { margin-top: 36px; }
  .kd-cta { margin-top: 35px; }
}

/* Line breaks the design places by hand hold only at full width. */
@media (max-width: 1199px) {
  .kd-feature__text br,
  .kd-step p br { display: none; }
}

/* ---- Landing: page body ----------------------------------------------- */

.kd-page { background: linear-gradient(180deg, var(--kd-bg) 0%, var(--kd-bg-end) 100%); }

/* Darkens towards the final call to action. */
.kd-dusk { background: linear-gradient(180deg, rgba(1, 2, 3, 0.11) 0%, var(--kd-night) 100%); }

/* ---- Landing: trust bar ----------------------------------------------- */

.kd-trust { padding-top: clamp(40px, 1.5rem + 3vw, 74px); }
.kd-trust__list {
  display: grid;
  gap: 18px;
  padding: 26px 24px;
  border-radius: var(--kd-r-bar);
}
.kd-trust__list li {
  display: flex;
  align-items: center;
  gap: 20px;
  white-space: nowrap;
  color: #dfe9f6;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  font-weight: 700;
}
.kd-trust__list .kd-icon { width: 22px; height: 22px; color: var(--kd-blue-check); }

@media (min-width: 900px) {
  .kd-trust__list {
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    align-items: center;
    min-height: 148px;
    padding: 0 24px;
  }
}

/* ---- Landing: features ------------------------------------------------ */

/* The band, its header strip and the icon squares all carry the design's
   glass effect: light on the top rim (from above on the band and strip,
   0 degrees) and a softer line at the bottom. */
.kd-features__band {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--kd-line-band);
  border-top-color: rgba(255, 255, 255, 0.4);
  border-bottom-color: rgba(255, 255, 255, 0.15);
  border-radius: var(--kd-r-panel);
  background: rgba(30, 30, 30, 0.2);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.14), 0 1px 0 rgba(255, 255, 255, 0.08);
}
.kd-feature { display: grid; grid-template-rows: auto 1fr; }
.kd-feature + .kd-feature { border-top: 1px solid var(--kd-rule); }
.kd-feature__head {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 112px;
  padding: 0 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  background: linear-gradient(180deg, rgba(59, 64, 70, 0.2) 70%, rgba(66, 71, 77, 0.24));
}
.kd-feature__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: var(--kd-r-art);
  background: rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.12), 0 1px 0 rgba(255, 255, 255, 0.1);
  color: #fff;
}
.kd-feature__icon svg { width: 30px; height: 26px; }
.kd-feature__text {
  padding: 24px 24px 30px;
  color: var(--kd-ink-4);
  font-size: 1.0625rem;
  line-height: 1.78;
}

@media (min-width: 900px) {
  .kd-features__band { grid-template-columns: repeat(3, 1fr); }
  .kd-feature + .kd-feature { border-top: 0; border-left: 1px solid var(--kd-rule); }
  .kd-feature__head { gap: 35px; min-height: 160px; padding: 0 clamp(24px, 2.9vw, 50px); }
  .kd-feature__icon { width: 75px; height: 75px; }
  .kd-feature__text { padding: 51px clamp(24px, 2.9vw, 50px) 49px; font-size: 1.125rem; line-height: 1.778; }
}

@media (min-width: 900px) and (max-width: 1199px) {
  .kd-feature__head { flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px; padding-block: 28px; }
  .kd-feature__icon svg { width: 35px; height: 29px; }
}

/* ---- Landing: steps --------------------------------------------------- */

.kd-steps .kd-head { margin-bottom: clamp(20px, 0.5rem + 1.35vw, 31px); }
.kd-steps__list { display: grid; gap: 52px 40px; padding-top: 25px; }
.kd-step {
  --kd-glass-bottom: rgba(255, 255, 255, 0.26);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 52px 24px 26px;
  border-radius: var(--kd-r-card);
}
.kd-step .kd-num { position: absolute; top: -25px; left: 24px; }
.kd-step h3 {
  margin-bottom: 8px;
  color: var(--kd-ink-1);
  font-size: clamp(1.25rem, 1.198rem + 0.222vw, 1.4375rem);
  line-height: 1.45;
}
.kd-step p { color: var(--kd-ink-4); font-size: 1.0625rem; line-height: 1.88; }
.kd-step .kd-art { margin-top: auto; }
.kd-step p + .kd-art { margin-top: 20px; }

@media (min-width: 900px) {
  .kd-steps__list { grid-template-columns: repeat(3, 1fr); }
  .kd-step { padding: 63px clamp(20px, 2.1vw, 36px) 37px; }
  .kd-step .kd-num { left: 33px; }
}

/* ---- Landing: security ------------------------------------------------ */

.kd-security__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--kd-r-panel);
  background: var(--kd-black);
}
/* The photo fades with a mask, so the panel itself shows through it. A layer
   of the panel colour over the photo does not hold: Brave on a Mac drew that
   layer darker than the panel (1 against 6 in a screenshot), a band with a
   hard edge. The same goes for the plan photos. */
.kd-security__photo {
  position: relative;
  height: 200px;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent);
  mask-image: linear-gradient(180deg, #000 30%, transparent);
}
.kd-security__photo img { width: 100%; height: 100%; object-fit: cover; }
.kd-security__text { position: relative; z-index: 1; padding: 8px 24px 32px; }
.kd-security__title {
  color: #fff;
  font-size: var(--kd-fs-h2-banner);
  line-height: 1.53;
}
.kd-security__text p {
  max-width: 32em;
  margin-top: 18px;
  color: #a5b4c6;
  font-size: 1.0625rem;
  line-height: 1.88;
}

@media (min-width: 900px) {
  .kd-security__panel { display: block; min-height: 343px; }
  /* The design's fade (layer Rectangle 37256) is solid 7px left of the photo
     and clear 201px into it: the photo goes from hidden at its left edge to
     full over its first 201px. */
  .kd-security__photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 59.4%;
    height: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 201px);
    mask-image: linear-gradient(90deg, transparent, #000 201px);
  }
  /* A narrower panel trims the photo on the right. The left part, the dark
     water the fade runs over, stays in view at every width, so the fade
     always runs over what it does in the design. Trimmed from the left, the
     bright streak met the fade and showed as a hard start. */
  .kd-security__photo img { object-position: 0 50%; }
  .kd-security__text { padding: 45px 35px 48px; }
}

/* ---- Landing: platforms ----------------------------------------------- */

.kd-platforms .kd-head { margin-bottom: clamp(24px, 1rem + 1.4vw, 40px); }
.kd-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kd-tile {
  --kd-glass-top: rgba(255, 255, 255, 0.22);
  --kd-glass-top-out: rgba(255, 255, 255, 0.22);
  --kd-glass-bottom: rgba(255, 255, 255, 0.14);
  --kd-glass-bottom-out: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 92px;
  padding: 0 14px;
  border-radius: var(--kd-r-tile);
  color: #afbac8;
  font-size: 1.0625rem;
  line-height: 1.47;
  text-decoration: none;
  transition: border-color 0.15s, background-color 0.15s;
}
.kd-tile:hover {
  --kd-glass-top: rgba(255, 255, 255, 0.42);
  --kd-glass-bottom: rgba(255, 255, 255, 0.24);
  border-right-color: rgba(140, 152, 166, 0.75);
  border-left-color: rgba(140, 152, 166, 0.75);
  background-color: rgba(30, 36, 44, 0.35);
}
/* A 48px slot; each icon keeps the size the design gives it and is centred. */
.kd-tile__icon { display: grid; flex: none; place-items: center; width: 48px; height: 48px; }
.kd-tile__icon svg { flex: none; fill: #fff; overflow: visible; }

@media (min-width: 900px) {
  .kd-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.13vw, 19.5px); }
  .kd-tile { gap: clamp(20px, 2.84vw, 49px); min-height: 148px; padding: 0 16px 0 clamp(20px, 2.72vw, 47px); }
}

/* ---- Landing: pricing ------------------------------------------------- */

.kd-plans { display: grid; gap: 24px; }
.kd-plan {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 33px 24px 27px;
  border: 1px solid var(--kd-line-panel);
  border-radius: var(--kd-r-panel);
  background: var(--kd-black);
  transition: border-color 0.2s, box-shadow 0.2s;
}
/* No card is highlighted at rest. Hover, keyboard focus or a press lights the
   card's outline and fills its button blue, the state the design shows on
   the Business card. */
.kd-plan:hover,
.kd-plan:focus-within,
.kd-plan:active { border-color: var(--kd-blue-line); box-shadow: 0 0 0 1px var(--kd-blue-line); }
.kd-plan:hover .kd-btn,
.kd-plan:focus-within .kd-btn,
.kd-plan:active .kd-btn { border-color: transparent; background: var(--kd-blue-fill); }
.kd-plan .kd-btn:hover { background: var(--kd-blue-hover); }
.kd-plan .kd-eyebrow { margin-bottom: 14px; font-size: 0.8125rem; }
.kd-plan__price {
  color: #f8faff;
  font-size: clamp(1.375rem, 1.3rem + 0.35vw, 1.625rem);
  line-height: 1.3;
}
.kd-plan .kd-checks { margin: 30px 0 32px; }
.kd-plan .kd-btn { min-height: 59px; margin-top: auto; }

/* Photos sit behind the text, where the design puts them. Each box keeps the
   proportions of the design's crop and takes its height from the card, so a
   narrower or taller card shows the same picture, scaled, and never a new
   edge of it. The fades are masks, as on the security photo, so the card
   shows through: the box fades in over its first 40px, and the Community
   photo fades out from halfway down, where the design's gradient starts,
   to clear at its bottom edge. Box and img each carry one mask, and the two
   multiply. */
.kd-plan__photo {
  position: absolute;
  z-index: -1;
  max-width: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px);
  mask-image: linear-gradient(90deg, transparent, #000 40px);
}
.kd-plan__photo img { width: 100%; height: 100%; object-fit: cover; }
.kd-plan__photo--community { top: 2px; right: 0; height: 64.8%; aspect-ratio: 422 / 273; border-radius: 17px 17px 0 0; }
.kd-plan__photo--community img {
  -webkit-mask-image: linear-gradient(180deg, #000 48.7%, transparent);
  mask-image: linear-gradient(180deg, #000 48.7%, transparent);
}
/* The box is a stacking context of its own (z-index), so the design's
   LIGHTEN blend goes on the box. On the img it blends with nothing, and the
   black of the photo darkens the card into a visible rectangle. */
.kd-plan__photo--business { top: 2px; right: 2px; height: 95.7%; aspect-ratio: 389 / 403; border-radius: 0 16px 16px 0; mix-blend-mode: lighten; }
.kd-plan__photo--business img { opacity: 0.89; }
.kd-plan__photo--enterprise { top: 0; right: 0; height: 100%; aspect-ratio: 331 / 420; border-radius: 0 19px 19px; }
.kd-plan__photo--enterprise img { opacity: 0.7; }

/* One column: the text runs across the photo, and the box ends above the
   button. Its left half and its bottom fade into the card. */
@media (max-width: 899px) {
  .kd-plan__photo {
    opacity: 0.55;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%);
    mask-image: linear-gradient(90deg, transparent, #000 55%);
  }
  .kd-plan__photo--community,
  .kd-plan__photo--business,
  .kd-plan__photo--enterprise { height: 72%; }
  .kd-plan__photo img {
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
    mask-image: linear-gradient(180deg, #000 60%, transparent);
  }
}

@media (min-width: 900px) {
  .kd-plans { grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 2.8vw, 48px); }
  .kd-plan { min-height: 421px; padding: 33px clamp(20px, 1.8vw, 31px) 27px clamp(20px, 1.85vw, 32px); }
}

/* ---- Landing: open source --------------------------------------------- */

.kd-oss { padding-top: clamp(28px, 1rem + 1vw, 37px); }
.kd-oss__panel {
  display: grid;
  gap: 20px;
  padding: 28px 24px;
  border: 1px solid var(--kd-line-panel);
  border-radius: var(--kd-r-panel);
  background: var(--kd-black);
}
/* The Octocat is a link to the repository too, like the button. */
.kd-oss__icon { display: block; width: 56px; height: 56px; color: #fff; transition: opacity 0.15s; }
.kd-oss__icon:hover { opacity: 0.75; }
.kd-oss__icon svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.kd-oss .kd-eyebrow { margin-bottom: 6px; font-size: 0.8125rem; }
.kd-oss__title { color: #fff; font-size: clamp(1.25rem, 1.163rem + 0.37vw, 1.5625rem); line-height: 1.4; }
.kd-oss__text p { margin-top: 6px; color: #a3b0c0; font-size: 0.9375rem; line-height: 1.6; }
.kd-oss .kd-btn { min-height: 59px; }

@media (min-width: 900px) {
  .kd-oss__panel {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0 clamp(28px, 3.5vw, 60px);
    min-height: 152px;
    padding: 28px 48px 28px 60px;
  }
  .kd-oss__icon { width: 74px; height: 74px; }
  .kd-oss .kd-btn { min-height: 66px; min-width: 262px; }
}

/* ---- Landing: planet (final call to action and footer) ---------------- */

/* The horizon photo sits behind the last call to action and the footer row,
   as in the design. */
.kd-planet { position: relative; overflow: hidden; background: var(--kd-night); }
.kd-planet__bg { position: absolute; right: 0; bottom: 0; left: 0; z-index: 0; }
.kd-planet__bg img {
  width: 100%;
  min-height: 340px;
  object-fit: cover;
  object-position: 50% 0;
  opacity: 0.8;
}
.kd-planet::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 30%;
  background: linear-gradient(180deg, rgba(1, 2, 3, 0) 0%, var(--kd-night) 100%);
  pointer-events: none;
}

.kd-final { position: relative; z-index: 1; padding: 55px 0 0; text-align: center; }
.kd-final p {
  margin-top: 8px;
  color: #9daabb;
  font-size: clamp(1.0625rem, 1.03rem + 0.15vw, 1.1875rem);
}
.kd-final .kd-btn { margin-top: 30px; min-width: 253px; }

.kd-pfoot { position: relative; z-index: 2; padding: 120px 0 28px; color: var(--kd-ink-2); font-size: 0.9375rem; }
.kd-pfoot__row { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.kd-pfoot__brand { display: grid; justify-items: center; gap: 6px; text-align: center; }
.kd-pfoot .kd-logo { min-height: 0; margin: 0; }
.kd-pfoot__legal { color: var(--kd-ink-5); font-size: 0.75rem; }
.kd-pfoot__legal a { color: inherit; text-decoration: none; }
.kd-pfoot__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 32px; }
.kd-pfoot__nav a { color: var(--kd-ink-2); }
.kd-pfoot__nav a:hover { color: #fff; text-decoration: none; }
.kd-pfoot__rule { width: 1px; height: 27px; background: rgba(216, 224, 235, 0.3); }
.kd-pfoot__eu { display: inline-flex; align-items: center; gap: 26px; white-space: nowrap; }
.kd-pfoot__eu svg { flex: none; }

@media (max-width: 599px) {
  .kd-pfoot__rule { display: none; }
}

@media (min-width: 900px) {
  .kd-planet__bg { top: -41px; right: auto; bottom: auto; left: 50%; width: max(100%, 1728px); max-width: none; transform: translateX(-50%); }
  .kd-planet__bg img { min-height: 0; }
  .kd-planet::after { height: 156px; }
  .kd-pfoot { padding: 67px 0 34px; }
  .kd-pfoot__row { flex-direction: row; align-items: center; justify-content: space-between; }
  .kd-pfoot__brand { justify-items: start; text-align: left; }
  .kd-pfoot__nav { flex-wrap: nowrap; gap: 0 44px; }
  .kd-pfoot__rule { margin-right: -12px; }
}