/* KEIBIDROP theme ("kd") for keibidrop.com: the core.

   No build step, no JavaScript. A page opts in with <body class="kd">, so
   nothing here reaches a page that has not switched. Three files:

     kd.css          every kd page: tokens, base, layout, type, components,
                     header, footer
     kd-landing.css  the marketing sections (hero, features, pricing, ...)
     kd-prose.css    content pages: the site's existing components restyled

   Values come from the landing page design in Figma (snapshot 2026-10-13)
   and live in the tokens below: when the design changes, change a token.
   Mobile first: 600, 900, 1200. */

/* ---- Fonts ------------------------------------------------------------ */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/inter-latin-wght.woff2") format("woff2");
}

/* Arial scaled to Inter's metrics, so text keeps its place when the
   webfont arrives. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  size-adjust: 107.65%;
  ascent-override: 89.99%;
  descent-override: 22.41%;
  line-gap-override: 0%;
}

/* ---- Tokens ----------------------------------------------------------- */

.kd {
  --kd-bg: #0a0a0b;
  --kd-bg-end: #1b1c1e;
  --kd-black: #050607;
  --kd-night: #010203;

  --kd-ink-1: #f5f7fb;
  --kd-ink-2: #d8e0eb;
  --kd-ink-3: #b5c0cd;
  --kd-ink-4: #9ca8b7;
  --kd-ink-5: #8996a6;

  --kd-blue: #1676f9;
  --kd-blue-fill: #1370ee;
  --kd-blue-hover: #0f62d4;
  --kd-blue-soft: #69acff;
  --kd-blue-check: #4f9cff;
  --kd-blue-line: #1978fc;

  --kd-line-glass: rgba(76, 84, 94, 0.5);
  --kd-line-panel: #26394c;
  --kd-line-band: #27282a;
  --kd-line-btn: #52708d;
  --kd-line-num: #476482;
  --kd-rule: rgba(102, 108, 114, 0.55);
  --kd-glass: linear-gradient(90deg, rgba(23, 29, 36, 0.2), rgba(17, 22, 28, 0.2));
  /* The light of Figma's glass effect on a flat background: a bright rim on
     the top edge and a softer one on the bottom, each about two pixels
     deep. The inner value is the element's border, the outer a 1px line
     just outside it. */
  --kd-glass-top: rgba(255, 255, 255, 0.32);
  --kd-glass-top-out: rgba(255, 255, 255, 0.21);
  --kd-glass-bottom: rgba(255, 255, 255, 0.18);
  --kd-glass-bottom-out: rgba(255, 255, 255, 0.15);
  /* The sides keep the design's 0.8px stroke, #4c545e at half strength,
     which reads as this at 1px. */
  --kd-glass-side: rgba(76, 84, 94, 0.4);

  --kd-font: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --kd-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  /* Fluid sizes: the first value at 375px, the last at the 1728px design. */
  --kd-fs-display: clamp(2.5rem, 2.032rem + 1.996vw, 4.1875rem);
  --kd-fs-h2: clamp(1.875rem, 1.633rem + 1.035vw, 2.75rem);
  --kd-fs-h2-banner: clamp(1.5rem, 1.327rem + 0.739vw, 2.125rem);
  --kd-fs-h3: clamp(1.25rem, 1.163rem + 0.37vw, 1.5625rem);
  --kd-fs-lead: clamp(1.0625rem, 1.011rem + 0.222vw, 1.25rem);

  --kd-max: 1540px;
  --kd-gutter: clamp(16px, 5.44vw, 94px);
  --kd-space: clamp(64px, 3.28rem + 2.75vw, 100px);

  --kd-r-tile: 2px;
  --kd-r-bar: 6px;
  --kd-r-card: 10px;
  --kd-r-btn: 12px;
  --kd-r-art: 17px;
  --kd-r-panel: 20px;
}

/* ---- Base ------------------------------------------------------------- */

.kd {
  margin: 0;
  background: var(--kd-bg);
  color: var(--kd-ink-4);
  font: 400 1rem/1.6 var(--kd-font);
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.kd *,
.kd *::before,
.kd *::after { box-sizing: border-box; }

/* Base rules carry zero specificity (:where), so any component class wins
   without !important. */
:where(.kd) :where(h1, h2, h3, h4, p, figure, blockquote, dl, dd) { margin: 0; }
:where(.kd ul[class], .kd ol[class]) { margin: 0; padding: 0; list-style: none; }
:where(.kd) :where(img, picture, video) { display: block; max-width: 100%; height: auto; }
:where(.kd) :where(h1, h2, h3, h4) { color: var(--kd-ink-1); font-weight: 700; }

:where(.kd) a { color: var(--kd-blue-soft); text-decoration: none; }
:where(.kd) a:where(:hover) { text-decoration: underline; text-underline-offset: 0.18em; }

/* A link inside a sentence needs more than colour to stand out. */
:where(.kd) p a:where(:not([class])) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-underline-offset: 0.2em;
}
:where(.kd) p a:where(:not([class])):hover { text-decoration-color: currentColor; }
.kd :focus-visible { outline: 2px solid var(--kd-blue-soft); outline-offset: 3px; }
.kd ::selection { background: rgba(22, 118, 249, 0.45); color: #fff; }
.kd [id] { scroll-margin-top: 24px; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Text for screen readers and search engines, not drawn on screen. */
.kd-vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The symbol sheet. Kept in layout at zero size: a sheet with display:none
   loses its gradients and filters in Chrome and Firefox. */
.kd-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.kd-skip {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 8px;
  background: #fff;
  color: #000;
  font-weight: 600;
}
.kd-skip:focus { top: 12px; }

/* ---- Layout ----------------------------------------------------------- */

.kd-container {
  width: 100%;
  max-width: calc(var(--kd-max) + 2 * var(--kd-gutter));
  margin-inline: auto;
  padding-inline: var(--kd-gutter);
}

.kd-section { padding-top: var(--kd-space); }

.kd-head { margin-bottom: clamp(28px, 1rem + 2.4vw, 57px); }

/* ---- Type ------------------------------------------------------------- */

.kd-eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--kd-blue-soft);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
}

.kd-display {
  color: #f6f9ff;
  font-size: var(--kd-fs-display);
  font-weight: 700;
  line-height: 1.365;
}

.kd-h2 {
  color: var(--kd-ink-1);
  font-size: var(--kd-fs-h2);
  font-weight: 700;
  line-height: 1.25;
}

.kd-h3 {
  color: #f4f7fb;
  font-size: var(--kd-fs-h3);
  font-weight: 700;
  line-height: 1.3;
}

.kd-lead {
  max-width: 26.5em;
  color: var(--kd-ink-3);
  font-size: var(--kd-fs-lead);
  line-height: 1.925;
}

.kd-head__sub {
  margin-top: 18px;
  color: #9daabb;
  font-size: clamp(1.0625rem, 1.03rem + 0.15vw, 1.1875rem);
}

.kd-more {
  margin-top: 22px;
  color: var(--kd-ink-5);
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* KEIBIDROP wordmark inside a sentence, sized to the text's cap height. */
.kd-wm { white-space: nowrap; }
.kd-wm svg {
  display: inline-block;
  width: 6.69em;
  height: 1.1em;
  vertical-align: -0.17em;
  fill: currentColor;
}

/* ---- Components -------------------------------------------------------- */

.kd-icon { display: inline-block; flex: none; width: 1em; height: 1em; }

.kd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-height: 52px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: var(--kd-r-btn);
  color: #fff;
  font: 700 1.0625rem/1.2 var(--kd-font);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.kd-btn .kd-icon { width: 0.95em; height: 0.95em; }
.kd-btn--primary { background: var(--kd-blue-fill); }
.kd-btn--primary:hover { background: var(--kd-blue-hover); }
.kd-btn--ghost { border-color: var(--kd-line-btn); background: var(--kd-black); }
.kd-btn--ghost:hover { border-color: #84a3c2; background: #0b1016; }
.kd-btn--lg { min-height: 72px; padding: 0 40px; }
.kd-btn--block { display: flex; width: 100%; }

/* Segmented label row. Each cell has its own stroke, bright on the left and
   fading to the right, drawn as a masked ring so the inside stays clear. */
.kd-pills { display: flex; width: max-content; margin-bottom: 30px; }
.kd-pills li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 99px;
  height: 33px;
  padding: 0 14px;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
}
.kd-pills li::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: var(--kd-pill-stroke);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.kd-pills li + li { margin-left: -1.5px; }
/* One stroke per divider: the first cell draws no right side, the last no
   left side, so the shared edges are not stroked twice. */
.kd-pills li:nth-child(1)::before { padding: 1.5px 0 1.5px 1.5px; }
.kd-pills li:nth-child(3)::before { padding: 1.5px 1.5px 1.5px 0; }
.kd-pills li:nth-child(1) { --kd-pill-stroke: linear-gradient(90deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.62)); border-radius: 10px 0 0 10px; }
.kd-pills li:nth-child(2) { --kd-pill-stroke: linear-gradient(90deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.22)); z-index: 1; }
.kd-pills li:nth-child(3) { --kd-pill-stroke: linear-gradient(90deg, rgba(255, 255, 255, 0.27), rgba(255, 255, 255, 0.19)); border-radius: 0 10px 10px 0; }
@media (min-width: 900px) {
  .kd-pills li { font-size: 0.75rem; }
}

/* Glass surface: the trust bar, step cards and platform tiles. The design
   gives them Figma's glass effect (frost 4, light 0.8 from 180 degrees,
   refraction 0.8, depth 20). Over the flat page there is nothing behind to
   frost or bend, so what shows is the light on the rim, drawn here with the
   border and two 1px shadows. */
.kd-glass {
  border: 1px solid var(--kd-glass-side);
  border-top-color: var(--kd-glass-top);
  border-bottom-color: var(--kd-glass-bottom);
  background: var(--kd-glass);
  box-shadow: 0 -1px 0 var(--kd-glass-top-out), 0 1px 0 var(--kd-glass-bottom-out);
}

.kd-num {
  display: grid;
  place-items: center;
  width: 55px;
  height: 51px;
  border: 1px solid var(--kd-line-num);
  border-radius: 11px;
  background: var(--kd-black);
  color: #dde9f9;
  font-size: 1.125rem;
  font-weight: 700;
}

.kd-checks { display: grid; gap: 26px; }
.kd-checks li {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  color: #afbac8;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.kd-checks .kd-icon {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--kd-blue);
}

/* Illustration box: the three step pictures, 413 by 142. The pictures are
   Figma's own renders, so they carry the design's 1px inner stroke and
   rounded corners themselves. */
.kd-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 413 / 142;
  overflow: hidden;
  border-radius: var(--kd-r-art);
}
.kd-art text { font-family: var(--kd-font); }
.kd-art img { width: 100%; height: 100%; object-fit: cover; }
.kd-art--layered { position: relative; }
.kd-art--layered svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* A link that looks like the text around it until hovered: for headings and
   phrases inside a designed block, where an underline would break it. */
.kd-quiet { color: inherit; text-decoration: none; }
.kd-quiet:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }

/* ---- Header ----------------------------------------------------------- */

.kd-header {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: var(--kd-night);
}

/* On the landing page the header sits on the hero's own background. */
.kd-landing .kd-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  border-bottom: 0;
  background: none;
}

.kd-header__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
}
.kd-landing .kd-header__bar { padding-top: 16px; }

.kd-logo {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-right: auto;
  color: #fff;
}
.kd-logo svg { width: 122px; height: 20px; fill: currentColor; }

.kd-nav { display: none; }
.kd-nav a {
  color: var(--kd-ink-2);
  font-size: 0.9375rem;
  white-space: nowrap;
}
.kd-nav a:hover { color: #fff; text-decoration: none; }

.kd-header__cta { display: none; min-height: 44px; padding: 0 16px; font-size: 0.9375rem; }

.kd-menu > summary {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--kd-line-btn);
  border-radius: 10px;
  background: var(--kd-black);
  color: #fff;
  list-style: none;
  cursor: pointer;
}
.kd-menu > summary::-webkit-details-marker { display: none; }
.kd-menu > summary svg { width: 22px; height: 22px; }
.kd-menu__close,
.kd-menu[open] .kd-menu__open { display: none; }
.kd-menu[open] .kd-menu__close { display: block; }

.kd-menu__panel {
  position: absolute;
  top: calc(100% - 4px);
  right: var(--kd-gutter);
  left: var(--kd-gutter);
  display: grid;
  padding: 8px;
  border: 1px solid var(--kd-line-panel);
  border-radius: 14px;
  background: rgba(5, 6, 7, 0.97);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}
.kd-menu__panel a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 8px;
  color: var(--kd-ink-2);
}
.kd-menu__panel a:hover { background: rgba(255, 255, 255, 0.05); text-decoration: none; }

@media (min-width: 420px) {
  .kd-header__cta { display: inline-flex; }
}

/* Interior pages get a compact bar; the landing page keeps the design's
   65px button and wide spacing. */
@media (min-width: 900px) {
  .kd-header__bar { min-height: 64px; padding-top: 10px; padding-bottom: 10px; }
  .kd-landing .kd-header__bar { min-height: 65px; padding-top: 32px; padding-bottom: 0; }
  .kd-logo svg { width: 146px; height: 24px; }
  .kd-nav { display: flex; gap: clamp(24px, 0.5rem + 2vw, 48px); }
  .kd-header__cta { min-height: 46px; margin-left: clamp(12px, 0.5rem + 2vw, 40px); padding: 0 22px; font-size: 1rem; }
  /* Six links: the gap runs from the design's 79px at 1728 down to 45px at
     1200, so the wordmark keeps its distance from the first link. */
  .kd-landing .kd-nav { gap: clamp(24px, 6.4vw - 2rem, 80px); }
  .kd-landing .kd-header__cta {
    min-height: 65px;
    min-width: 199px;
    margin-left: clamp(12px, 0.5rem + 5.3vw, 100px);
    padding: 0 26px;
    font-size: 1.0625rem;
  }
  .kd-menu { display: none; }
}

@media (min-width: 900px) and (max-width: 1199px) {
  .kd-nav,
  .kd-landing .kd-nav { gap: clamp(16px, 5vw - 29px, 28px); }
  .kd-landing .kd-header__cta { min-width: 0; margin-left: 28px; padding: 0 22px; font-size: 1rem; }
}

/* The six links and the button fill the bar at 900px: smaller text until 1024. */
@media (min-width: 900px) and (max-width: 1023px) {
  .kd-nav a { font-size: 0.9375rem; }
}

/* ---- Footer ----------------------------------------------------------- */

.kd-footer {
  padding: 56px 0 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: var(--kd-night);
  color: var(--kd-ink-5);
  font-size: 0.9375rem;
}
.kd-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 24px;
}
.kd-footer__brand { grid-column: 1 / -1; max-width: 340px; }
.kd-footer__brand p { margin-top: 14px; line-height: 1.6; }
.kd-footer__h {
  margin-bottom: 14px;
  color: var(--kd-blue-soft);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
}
.kd-footer ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.kd-footer li a { display: inline-block; padding: 5px 0; color: var(--kd-ink-4); }
.kd-footer li a:hover { color: #fff; }
.kd-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.8125rem;
}
.kd-footer__legal a { color: var(--kd-ink-4); }

@media (min-width: 900px) {
  .kd-footer__grid { grid-template-columns: 1.5fr repeat(5, minmax(0, 1fr)); }
  .kd-footer__brand { grid-column: auto; }
}

/* ---- Accessibility and print ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .kd *,
  .kd *::before,
  .kd *::after { transition: none !important; }
}

@media (forced-colors: active) {
  .kd-pills li,
  .kd-btn,
  .kd-tile,
  .kd-plan,
  .kd-glass { border: 1px solid CanvasText; }
}

@media print {
  .kd { background: #fff; color: #000; }
  .kd-header,
  .kd-final,
  .kd-sprite,
  .kd-menu { display: none !important; }
  .kd :where(h1, h2, h3, h4) { color: #000; }
  .kd a { color: #000; text-decoration: underline; }
}