/* Kite website mockup: layout for every page. Tokens come from shared/kite-web.css.
   Homepage and pricing styles started in Direction C; product pages, nav, footer and the
   animated product components are added below. */

/* Hero */
.stage {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(90% 70% at 78% 40%, #0a1324 0%, var(--ground) 62%);
}
.stage .scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--ground) 0%, color-mix(in srgb, var(--ground) 70%, transparent) 34%, transparent 60%),
    linear-gradient(0deg, var(--ground) 0%, transparent 28%);
}
.stage .copy {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 120px;
  padding-bottom: 48px;
}
.stage .copy .display { max-width: 11ch; }
.stage .copy .lede { max-width: 34ch; margin-top: 24px; }
.stage .cta { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }

/* The four lines, listed across the foot of the hero. */
.rail {
  position: relative;
  z-index: 2;
  padding-bottom: 40px;
}
.rail .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
  box-shadow: inset 0 1px 0 var(--edge-light), inset 0 0 0 1px var(--line-strong), var(--shadow-panel);
  overflow: hidden;
}
.rail a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px 24px;
  transition: background-color var(--d-ui) ease;
}
.rail a + a { box-shadow: inset 1px 0 0 var(--line); }
.rail a:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.rail .name { display: flex; align-items: center; justify-content: space-between; font: 500 16px/1.2 var(--font-display); letter-spacing: -0.01em; }
.rail .name svg { color: var(--ink-3); transition: transform var(--d-ui) var(--ease-out), color var(--d-ui) ease; }
.rail a:hover .name svg { transform: translateX(3px); color: var(--ink); }
.rail .promise { font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--accent-hi);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
  vertical-align: middle;
  white-space: nowrap;
}

/* Product switcher */
.head-row { display: flex; align-items: end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.seg-scroll { max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.seg-scroll::-webkit-scrollbar { display: none; }
.lines { display: grid; margin-top: 48px; }
.lines > .line-panel {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: center;
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.lines > .line-panel[hidden] {
  display: grid !important;
  visibility: hidden;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
.line-panel .name { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font: 500 15px/1 var(--font-body); }
.line-panel .name svg { color: var(--accent-hi); }
.line-panel .h2 { margin-top: 18px; }
.outcomes { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 0; }
.outcomes li { display: grid; grid-template-columns: 26px 1fr; gap: 4px; padding: 16px 0; box-shadow: inset 0 1px 0 var(--line); }
.outcomes li:last-child { box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
.outcomes li > svg { color: var(--accent-hi); margin-top: 5px; }
.outcomes b { display: block; font-weight: 500; color: var(--ink); }
.outcomes span { color: var(--ink-2); font-size: 15px; }
.line-panel .link { margin-top: 28px; }

.shot-wrap { position: relative; }
.shot-wrap .frame { transform: translateX(0); }
.shot-wrap .shot { aspect-ratio: 16 / 10; }
.shot-wrap .shot.wide { aspect-ratio: 1440 / 640; }
.shot-wrap .chip { position: absolute; z-index: 2; }
/* An iPhone holding a real screenshot of the Kite app. Same top light and shadow as .frame.
   Every inner size is a percentage, so the phone scales with its width. */
.iphone { position: relative; margin: 0; width: 196px; aspect-ratio: 1206 / 2622; border-radius: 21.5% / 9.9%; background: linear-gradient(160deg, #3a3c41 0%, #1c1d20 38%, #141518 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 50px 90px -30px rgba(0, 0, 0, 0.9), 0 18px 40px -20px rgba(0, 0, 0, 0.7); }
.iphone::before { content: ""; position: absolute; right: -1.2%; top: 26%; width: 1.6%; height: 13%; border-radius: 0 2px 2px 0; background: linear-gradient(90deg, #2a2b2f, #4a4c52); }
.iphone::after { content: ""; position: absolute; left: 50%; top: 2.6%; width: 30%; height: 3.4%; transform: translateX(-50%); border-radius: 999px; background: #000; z-index: 1; }
.iphone .screen { position: absolute; inset: 1.65% 3.6%; border-radius: 19% / 8.7%; overflow: hidden; background: #0c0c0c; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8); }
.iphone img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
/* Over the bottom-right corner of a desktop shot. */
.shot-wrap .iphone, .hero-shot .iphone { position: absolute; z-index: 3; width: 24%; right: -4%; bottom: -10%; }
.hero-shot .iphone { width: 18%; right: -3%; bottom: 7%; }
.shot-wrap .chip.tl { top: -14px; left: 28px; }
.shot-wrap .chip.br { bottom: 28px; right: -14px; }
.ring { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-hi); position: relative; }
.ring::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--accent-hi);
  animation: ring 1.6s var(--ease-out) infinite;
}
@keyframes ring { from { transform: scale(0.6); opacity: 0.9; } to { transform: scale(1.8); opacity: 0; } }

/* Seats: one company, mixed products */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; }
.facts { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 14px; }
.facts li { display: flex; gap: 12px; align-items: baseline; color: var(--ink-2); }
.facts svg { flex: none; color: var(--accent-hi); transform: translateY(2px); }
.seats { padding: 8px; }
.seats .top { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 12px; }
.seats .top b { font: 500 15px/1 var(--font-display); letter-spacing: -0.01em; }
.seats table { width: 100%; border-collapse: collapse; font-size: 14px; }
.seats td { padding: 12px 16px; box-shadow: inset 0 1px 0 var(--line); white-space: nowrap; }
.seats table { table-layout: auto; }
.seats td.who > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.seats .plan-access { font-size: 13px; color: var(--ink-2); white-space: normal; }
@media (max-width: 1280px) { .seats .hide-s { display: none; } }
.seats td.who { display: flex; align-items: center; gap: 12px; }
.seats .av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 500 11px/1 var(--font-body); color: var(--ink); background: var(--well); box-shadow: inset 0 0 0 1px var(--line-strong); flex: none; }
.seats .who small { display: block; color: var(--ink-3); font-size: 12.5px; }
.seats .num { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2); }
.seat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12.5px;
  background: var(--well);
  box-shadow: inset 0 0 0 1px var(--line);
}
.seat i { width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--accent-hi)); }
.seat.s-phone { --c: #a9cdff; }
.seat.s-sales { --c: #2f7bff; }
.seat.s-support { --c: #7aa6d9; }
.seat.s-mkt { --c: #5b8cff; }
.seats .bill { display: flex; justify-content: space-between; padding: 14px 16px; box-shadow: inset 0 1px 0 var(--line); }

/* Proof */
.proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; }
.proof .stat { padding: 8px 32px 8px 0; }
.proof .stat + .stat { padding-left: 32px; box-shadow: inset 1px 0 0 var(--line); }
.info {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-left: 4px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  vertical-align: -4px;
  transition: color var(--d-ui) ease;
}
.info:hover { color: var(--ink); }
.pop {
  position: fixed;
  inset: auto;
  margin: 0;
  max-width: 300px;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--r-small);
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.5;
  background: var(--raised);
  box-shadow: inset 0 1px 0 var(--edge-light), inset 0 0 0 1px var(--line-strong), 0 24px 48px -16px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transform: translateY(4px) scale(0.98);
  transform-origin: top left;
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out), overlay 160ms allow-discrete, display 160ms allow-discrete;
}
.pop:popover-open { opacity: 1; transform: none; }
@starting-style { .pop:popover-open { opacity: 0; transform: translateY(4px) scale(0.98); } }

/* Integrations */
.logos { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin-top: 40px; }
.logo-tile {
  position: relative;
  height: 96px;
  display: grid;
  place-items: center;
  border-radius: var(--r-small);
  background: var(--panel);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--edge-light) 60%, transparent), inset 0 0 0 1px var(--line);
}
.logo-tile img { height: 28px; width: auto; max-width: 70%; filter: saturate(0.9); }
.logo-tile .tag { position: absolute; top: 8px; right: 8px; }
.logo-tile small { position: absolute; bottom: 8px; font-size: 11.5px; color: var(--ink-3); }

/* Pricing preview */
.tiers-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; }
.mini { padding: 24px; display: flex; flex-direction: column; min-height: 220px; }
.mini .nm { font: 500 15px/1 var(--font-body); color: var(--ink-2); display: flex; justify-content: space-between; align-items: center; }
.mini .from { margin-top: auto; font-size: 13px; color: var(--ink-3); }
.mini .pr { font: 400 40px/1 var(--font-mono); letter-spacing: -0.04em; margin-top: 8px; font-variant-numeric: tabular-nums; }
.mini .pr small { font: 400 13px/1 var(--font-body); letter-spacing: 0; color: var(--ink-3); margin-left: 6px; }
.mini .ln { margin-top: 14px; font-size: 14px; color: var(--ink-2); line-height: 1.45; }

/* Closing */
.closing { position: relative; overflow: hidden; text-align: center; }
.closing .cta { display: flex; gap: 12px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }

.review-note {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 60;
  padding: 8px 12px;
  border-radius: 999px;
  font: 500 12px/1 var(--font-mono);
  color: #fbb56a;
  background: color-mix(in srgb, var(--raised) 92%, transparent);
  box-shadow: inset 0 0 0 1px rgba(251, 181, 106, 0.3);
}

/* ---------- Pricing page ---------- */
.p-hero { position: relative; padding: 168px 0 48px; overflow: hidden; text-align: center; }
.p-hero .lede { margin: 20px auto 0; max-width: 40ch; }
.controls { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 44px; }
.billing { display: flex; align-items: center; gap: 12px; }
.billing .save { font: 500 12.5px/1 var(--font-mono); color: var(--accent-hi); transition: opacity var(--d-ui) ease; }
.billing[data-mode="monthly"] .save { opacity: 0.45; }

.tiers { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.tiers.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin: 0 auto; }
.tiers.one { grid-template-columns: minmax(0, 1fr); max-width: 820px; margin: 0 auto; }
.tier { display: flex; flex-direction: column; padding: 28px; border-radius: var(--r-frame); }
.tier.rec {
  box-shadow: inset 0 1px 0 rgba(169, 205, 255, 0.4), inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent), 0 30px 80px -30px rgba(0, 113, 252, 0.45), var(--shadow-panel);
}
.tier.rec::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(70% 45% at 50% 0%, rgba(0, 113, 252, 0.14), transparent 70%);
}
.tier > * { position: relative; z-index: 1; }
.tier .t-head { display: flex; justify-content: space-between; align-items: center; min-height: 22px; }
.tier .t-name { font: 500 18px/1 var(--font-display); letter-spacing: -0.01em; }
.tier .price { display: flex; align-items: baseline; gap: 8px; margin-top: 22px; min-height: 52px; }
.tier .amt {
  display: inline-block;
  font: 400 48px/1 var(--font-mono);
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.tier .amt.out { opacity: 0; transform: translateY(-6px); }
.tier .amt.pre { opacity: 0; transform: translateY(6px); transition: none; }
.tier .unit { font-size: 13px; color: var(--ink-3); line-height: 1.35; }
.tier .note { margin-top: 6px; min-height: 20px; font-size: 13px; color: var(--ink-3); }
.tier .line1 { margin-top: 14px; color: var(--ink-2); font-size: 15px; min-height: 46px; }
.tier .btn { margin-top: 22px; width: 100%; }
.tier .plus { margin-top: 26px; padding-top: 22px; box-shadow: inset 0 1px 0 var(--line); font-size: 13.5px; color: var(--ink-3); }
.tier ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 11px; flex: 1; align-content: start; }
.tier li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.4; }
.tier li svg { flex: none; color: var(--accent-hi); margin-top: 2px; }
.tier li .tag { margin-left: 4px; }
.tier .fair { margin-top: 24px; padding-top: 16px; box-shadow: inset 0 1px 0 var(--line); }
/* An optional add-on under a tier's features: one line, its price follows the billing toggle. */
.tier .t-addon { margin-top: 10px; padding: 12px 14px; border-radius: 12px; display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.tier ul + .t-addon { margin-top: 18px; }
.tier .t-addon .plus-i { color: var(--accent-hi); font-weight: 600; }
.tier .t-addon .amt-i { color: var(--ink); white-space: nowrap; }
.tier .t-addon .amt { font: inherit; letter-spacing: 0; display: inline-block; }
.addon { margin-top: 16px; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 24px; border-radius: var(--r-card); }
.addon b { font-weight: 500; }
.addon .amt-s { font: 400 22px/1 var(--font-mono); letter-spacing: -0.03em; white-space: nowrap; }
.addon .amt-s small { font: 400 12.5px/1 var(--font-body); color: var(--ink-3); letter-spacing: 0; }
.addon .amt { font: inherit; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); display: inline-block; }
.addon .amt.out { opacity: 0; transform: translateY(-6px); }
.addon .amt.pre { opacity: 0; transform: translateY(6px); transition: none; }

.incl { margin-top: 28px; text-align: center; color: var(--ink-3); font-size: 14px; }

.compare-wrap { margin-top: 24px; overflow-x: auto; border-radius: var(--r-card); }
.compare { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 640px; }
.compare th, .compare td { padding: 14px 20px; text-align: left; }
.compare thead th { position: static; background: var(--panel); font: 500 15px/1 var(--font-display); color: var(--ink); box-shadow: inset 0 -1px 0 var(--line-strong); }
.compare thead th:first-child { color: var(--ink-3); font: 400 13px/1 var(--font-body); }
.compare td:not(:first-child), .compare th:not(:first-child) { text-align: center; width: 20%; }
.compare tbody td { box-shadow: inset 0 1px 0 var(--line); color: var(--ink-2); }
.compare tbody td:first-child { color: var(--ink); }
.compare tr.grp td { padding-top: 30px; font: 500 13px/1 var(--font-body); color: var(--ink-3); box-shadow: none; }
.compare .yes { color: var(--accent-hi); }
.compare .no { color: var(--ink-3); opacity: 0.6; }
.compare .v { font-family: var(--font-mono); font-size: 13px; color: var(--ink); }
.compare col.rec { background: color-mix(in srgb, var(--accent) 5%, transparent); }

.faq { margin-top: 40px; max-width: 760px; }
.faq details { box-shadow: inset 0 -1px 0 var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px 0;
  font: 500 17px/1.35 var(--font-display);
  letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; color: var(--ink-3); transition: transform var(--d-ui) var(--ease-out); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { padding: 0 48px 24px 0; color: var(--ink-2); max-width: 62ch; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .logos { grid-template-columns: repeat(4, 1fr); }
  .tiers-mini { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .stage .scrim {
    background:
      linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--ground) 30%, transparent) 40%, var(--ground) 78%);
  }
  .stage .copy { justify-content: flex-end; padding-top: 42vh; }
  .rail .grid { grid-template-columns: 1fr 1fr; }
  .rail a:nth-child(3) { box-shadow: inset 0 1px 0 var(--line); }
  .rail a:nth-child(4) { box-shadow: inset 1px 0 0 var(--line), inset 0 1px 0 var(--line); }
  .rail a { padding: 18px; }
  .lines > .line-panel, .split { grid-template-columns: 1fr; gap: 36px; }
  .shot-wrap .chip.br { right: 12px; }
  .shot-wrap .iphone, .hero-shot .iphone { width: 22%; right: -2%; bottom: -12%; }
  .hero-shot .iphone { bottom: 6%; }
  .proof { grid-template-columns: 1fr; }
  .proof .stat, .proof .stat + .stat { padding: 24px 0; box-shadow: inset 0 1px 0 var(--line); }
  .tiers, .tiers.two { grid-template-columns: 1fr; }
  .seats .hide-s { display: none; }
}
@media (max-width: 560px) {
  .rail .promise { font-size: 13px; }
  .logos { grid-template-columns: repeat(2, 1fr); }
  .tiers-mini { grid-template-columns: 1fr; }
  .mini { min-height: 0; }
  .addon { flex-direction: column; align-items: flex-start; }
  .p-hero { padding-top: 128px; }
  .controls .seg button { padding: 0 14px; }
  .faq details p { padding-right: 0; }
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }