/* goKalki.com
   One stylesheet, no build step. Mobile first: every block is written for a
   phone and widened from there. Motion is layered on top of a page that is
   complete without it (see the reduced-motion block at the end). */

@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* The rupee sign alone, cut from the same face, so prices never fall back. */
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-rupee.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+20B9;
}

:root {
  --cream: #FBF4E6;
  --paper: #FFFDF8;
  --sand: #F3E7D2;
  --line: #E7DAC3;
  --ink: #1B1712;
  --body-ink: #4D453C;
  --muted: #6B6157;
  --green: #0F6B4B;
  --green-deep: #083A2A;
  --mint: #CFEBDD;
  --clay: #A8431F;
  --marigold: #F6B42C;
  --bubble-me: #D9F4CF;

  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  /* Devanagari before the Latin fallbacks so Hindi never lands on a face
     without matras. Every script on the page ships with Android and iOS. */
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans",
          "Noto Sans Devanagari", "Nirmala UI", sans-serif;

  --gutter: clamp(20px, 5vw, 56px);
  --wrap: 1240px;
  --section: clamp(76px, 11vw, 156px);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

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

html {
  font-family: var(--body);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 560;
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: clamp(2.2rem, 5.4vw, 4.3rem); }
p { margin: 0; }

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: min(100% - var(--gutter) * 2, var(--wrap));
  margin-inline: auto;
}

.sub {
  margin-top: 18px;
  max-width: 40em;
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  color: var(--body-ink);
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--cream);
  padding: 10px 16px; border-radius: 10px;
}
.skip:focus { top: 12px; }

/* ------------------------------------------------------------ buttons */

.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: .6em;
  padding: .95em 1.5em;
  border-radius: 999px;
  font: 600 1rem/1 var(--body);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background-color .3s;
}
.btn svg { width: 1.3em; height: 1.3em; flex: none; }
/* A slow sweep of light across the button on hover. */
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
  translate: -110% 0;
  transition: translate .8s var(--ease);
}
.btn:hover::after { translate: 110% 0; }

.btn--wa {
  background: var(--green); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 14px 28px -12px rgba(15, 107, 75, .75);
}
.btn--wa:hover { background: #0C5C40; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 22px 36px -14px rgba(15, 107, 75, .8); }
.btn--ink { background: var(--ink); color: var(--cream); box-shadow: 0 18px 34px -14px rgba(27, 23, 18, .7); }
.btn--lg { font-size: 1.08rem; padding: 1.15em 1.75em; }
.btn--sm { font-size: .92rem; padding: .74em 1.1em; }
.btn--block { display: flex; justify-content: center; width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45em;
  font-weight: 600; text-decoration: none;
  padding-bottom: 3px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
}
.link-arrow svg { width: 1.1em; height: 1.1em; transition: translate .35s var(--ease); }
.link-arrow:hover svg { translate: 5px 0; }

/* ------------------------------------------------------------ top bar and header */

.topbar {
  display: flex; align-items: center; justify-content: center; gap: .5em;
  padding: 9px var(--gutter);
  background: var(--green-deep); color: var(--cream);
  font-size: .9rem; text-align: center; text-decoration: none;
}
.topbar svg { width: 16px; height: 16px; flex: none; transition: translate .35s var(--ease); }
.topbar:hover svg { translate: 4px 0; }

.header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--cream) 84%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  transition: translate .45s var(--ease), box-shadow .3s;
}
.header.is-hidden { translate: 0 -105%; }
.header.is-stuck { box-shadow: 0 1px 0 var(--line); }
.header__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 66px; }

.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display); font-size: 1.45rem; font-weight: 620; letter-spacing: -.02em;
  text-decoration: none;
}
.brand img { width: 30px; height: auto; transition: rotate .5s var(--ease); transform-origin: 50% 90%; }
.brand:hover img { rotate: -10deg; }
.brand--light { color: var(--cream); }

.nav { display: none; gap: 30px; }
.nav a {
  position: relative; text-decoration: none; font-weight: 500; font-size: .98rem; padding: 6px 0;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--green); scale: 0 1; transform-origin: 0 50%;
  transition: scale .35s var(--ease);
}
.nav a:hover::after { scale: 1 1; }

.header__end { display: flex; align-items: center; gap: 18px; }
.header__login, .header__lang { font-weight: 600; text-decoration: none; font-size: .98rem; }
.header__lang { padding: .3em .7em; border-radius: 999px; border: 1.5px solid var(--line); font-size: .92rem; }
.header__lang:hover { border-color: var(--green); color: var(--green); }

/* With more than two languages the switch opens a menu. Each language is
   written in its own script, so anyone can find theirs. */
.langs-menu { position: relative; }
.langs-menu summary { display: inline-flex; align-items: center; gap: .4em; list-style: none; cursor: pointer; }
.langs-menu summary::-webkit-details-marker { display: none; }
.langs-menu summary svg { width: 1.05em; height: 1.05em; }
.langs-menu[open] summary { border-color: var(--green); color: var(--green); }
.langs-menu ul {
  position: absolute; z-index: 60; top: calc(100% + 8px); right: 0;
  display: grid; grid-template-columns: repeat(2, minmax(7.5em, auto)); gap: 2px;
  margin: 0; padding: 8px; list-style: none;
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 18px 40px -18px rgba(60, 40, 10, .45);
}
.langs-menu li a, .langs-menu li span { display: block; padding: .45em .75em; border-radius: 10px; text-decoration: none; font-weight: 600; white-space: nowrap; }
.langs-menu li a:hover { background: var(--mint); color: var(--green-deep); }
.langs-menu li span { color: var(--green); background: var(--cream); }
.header__login:hover { color: var(--green); }
.header__end .btn { display: none; }

@media (min-width: 620px) { .header__end .btn { display: inline-flex; } }
@media (min-width: 1000px) { .nav { display: flex; } }

/* ------------------------------------------------------------ hero */

.hero { position: relative; padding-block: clamp(28px, 4vw, 48px) clamp(48px, 6vw, 84px); overflow: clip; }
.hero__grid { display: grid; gap: clamp(20px, 4vw, 48px); align-items: center; }

@media (min-width: 1100px) {
  .hero__grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    min-height: min(740px, calc(100svh - 150px));
  }
}
/* On a phone the scene sits right under the headline, so the first screen is
   the promise and the character. The sticky bar carries the button until the
   one in the page scrolls into view. */
@media (max-width: 1099px) {
  .hero__grid { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
  .hero__copy { display: contents; }
  .eyebrow { order: 1; align-self: flex-start; }
  .hero__title { order: 2; }
  .stage { order: 3; margin-block: 0 34px; }
  .hero__lede { order: 4; }
  .hero__cta { order: 5; }
  .hero__price { order: 6; }
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .45em .95em .45em .7em;
  border-radius: 999px;
  background: var(--mint); color: var(--green-deep);
  font-weight: 600; font-size: .9rem;
}
.eyebrow svg { width: 1.15em; height: 1.15em; color: var(--green); }

.hero__title {
  margin: .32em 0 .3em;
  font-size: clamp(2.9rem, 8.7vw, 7rem);
  line-height: .94;
  letter-spacing: -.04em;
  font-weight: 580;
}
/* Beside the scene, sized so "Your new hire" always fits its column on one line. */
@media (min-width: 1100px) {
  .hero__title { font-size: clamp(2.9rem, 6.9vw, 6.3rem); }
  .hero__lede { max-width: 29em; }
}

/* Each line of the headline rises out of its own mask on load. */
.line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.line > span { display: block; }
.js .line > span { translate: 0 112%; transition: translate 1.1s var(--ease); }
.js .line:nth-child(2) > span { transition-delay: .09s; }
.js .line:nth-child(3) > span { transition-delay: .18s; }
.js.is-loaded .line > span { translate: 0 0; }

.hero__title em {
  position: relative; font-style: normal; color: var(--green);
  display: inline-block;
}
.hero__title em::after {
  content: ""; position: absolute; left: -.04em; right: -.04em; bottom: .1em; height: .3em;
  z-index: -1; border-radius: .08em;
  background: var(--marigold); opacity: .6;
  scale: 0 1; transform-origin: 0 50%;
  transition: scale .9s var(--ease) .75s;
}
.is-loaded .hero__title em::after, html:not(.js) .hero__title em::after { scale: 1 1; }

.hero__lede { max-width: 33em; font-size: clamp(1.05rem, 1.45vw, 1.24rem); color: var(--body-ink); }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 28px; }
.hero__price { margin-top: 16px; color: var(--muted); font-size: .98rem; }
.hero__price b { color: var(--ink); }

.js .eyebrow, .js .hero__lede, .js .hero__cta, .js .hero__price {
  opacity: 0; translate: 0 18px;
  transition: opacity .9s var(--ease), translate .9s var(--ease);
}
.js .hero__lede { transition-delay: .32s; }
.js .hero__cta { transition-delay: .42s; }
.js .hero__price { transition-delay: .5s; }
.js.is-loaded .eyebrow, .js.is-loaded .hero__lede, .js.is-loaded .hero__cta, .js.is-loaded .hero__price { opacity: 1; translate: 0 0; }

/* The stage: a warm glow, the flat orbit, and the 3D scene laid over it,
   with a WhatsApp chat in front. On a phone the chat tucks under the scene;
   on a wide screen it floats over the scene's lower left. */

.stage { position: relative; width: 100%; max-width: 470px; margin-inline: auto; }
.stage__scene { position: relative; aspect-ratio: 1 / .9; }
.stage__glow {
  position: absolute; inset: 9%; border-radius: 50%;
  background: radial-gradient(circle at 50% 46%, #FFE7A3 0%, #FBD27A 32%, rgba(251, 210, 122, 0) 69%);
  animation: breathe 7s ease-in-out infinite;
}
.stage__canvas {
  position: absolute; inset: -9%; width: 118%; height: 118%;
  opacity: 0; transition: opacity .9s ease;
  pointer-events: none;
}
.stage.has-gl .stage__canvas { opacity: 1; }
.stage__flat { position: absolute; inset: 0; transition: opacity .6s ease, visibility 0s .6s; }
.stage.has-gl .stage__flat { opacity: 0; visibility: hidden; }

.stage__kalki {
  position: absolute; left: 50%; top: 50%; width: 36%; height: auto;
  transform: translate(-50%, -52%);   /* not `translate`: the bob animation owns that */
  filter: drop-shadow(0 22px 16px rgba(120, 70, 30, .28));
  animation: bob 4.2s ease-in-out infinite;
}
.orbit { position: absolute; inset: 6%; }
.orbit img {
  position: absolute; left: 50%; top: 50%;
  width: 14%; height: auto; margin: -8.2% 0 0 -7%;
  transform: rotate(calc(var(--i) * 36deg)) translateY(-262%) rotate(calc(var(--i) * -36deg));
  animation: bob 3.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * -.37s);
}

/* Wide screens: the scene takes the top right and the chat the bottom left,
   so each has its own room and only their corners meet. The stage also
   reaches into the page margin on the right. */
@media (min-width: 1100px) {
  .stage {
    width: auto; max-width: none; margin-inline: 0;
    height: clamp(600px, 78svh, 720px);
    margin-right: calc(-1 * min(150px, (100vw - min(100vw - var(--gutter) * 2, var(--wrap))) / 2 - 40px));
  }
  .stage__scene { position: absolute; inset: 0 0 auto auto; width: min(600px, 75%); aspect-ratio: 1 / 1; }
}

/* ---- the WhatsApp chat */

.wa { position: relative; z-index: 3; width: min(100%, 344px); margin: -27% auto 0; }
.js .wa { opacity: 0; translate: 0 26px; transition: opacity .9s var(--ease) .55s, translate 1s var(--ease) .55s; }
.js.is-loaded .wa { opacity: 1; translate: 0 0; }

.wa__tabs { display: flex; gap: 6px; margin-bottom: 9px; }
.wa__tabs button {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  padding: .58em .5em; border-radius: 999px;
  border: 1.5px solid var(--line);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 600 .8rem/1.1 var(--body); color: var(--body-ink); white-space: nowrap;
  cursor: pointer;
  transition: background-color .35s, color .35s, border-color .35s;
}
.wa__tabs button svg { width: 1.2em; height: 1.2em; flex: none; }
.wa__tabs button:hover { border-color: var(--ink); }
.wa__tabs button.is-on { background: var(--ink); border-color: var(--ink); color: var(--cream); }

.wa__card {
  border-radius: 24px; overflow: hidden;
  background: #EDE4D3;
  box-shadow: 0 0 0 1px rgba(70, 45, 10, .08), 0 34px 60px -30px rgba(70, 45, 10, .7), 0 10px 20px -14px rgba(70, 45, 10, .3);
}
.wa__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--green); color: #fff; }
.wa__bar img { width: 36px; height: 36px; padding: 4px 2px 3px 5px; border-radius: 50%; background: #fff; object-fit: contain; flex: none; }
.wa__bar b { display: block; font-size: .95rem; line-height: 1.2; }
.wa__bar span { display: block; font-size: .72rem; line-height: 1.2; opacity: .85; }
.wa__logo { width: 22px; height: 22px; margin-left: auto; flex: none; opacity: .92; }

.wa__chat, .wa__input {
  background-image: radial-gradient(rgba(120, 100, 60, .1) 1px, transparent 1.5px);
  background-size: 16px 16px;
}
.wa__chat {
  display: flex; flex-direction: column; gap: 7px;
  height: 240px; padding: 12px 10px 4px; overflow: hidden;
  transition: opacity .26s ease;
}
.wa.is-swapping .wa__chat { opacity: 0; }
.wa .msg { font-size: .9rem; animation: pop .45s var(--ease) both; }
.wa .msg--photo { width: 56%; }
.wa .msg--them.msg--voice { min-width: 62%; }

/* Time and ticks, tucked into the bubble's bottom corner the way WhatsApp does. */
.meta {
  float: right; display: inline-flex; align-items: center; gap: 3px;
  margin: .6em -.1em -.2em .9em;
  font-size: .66rem; line-height: 1; color: #6E7D74; white-space: nowrap;
}
.msg--photo .meta, .msg--voice .meta { margin-top: .3em; }
.seen { width: 18px; height: 12px; flex: none; color: #9DAEA5; transition: color .35s; }
.seen.is-read { color: #1FA8F0; }
.voice__mic { width: 16px; height: 16px; flex: none; color: #34B7F1; }

.typing { display: inline-flex; gap: 5px; padding: .3em .1em; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #9AA59C; animation: typing 1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }

.wa__input { display: flex; align-items: center; gap: 8px; padding: 8px 10px 11px; }
.wa__field {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 12px 0 15px; border-radius: 999px; background: #fff;
  font-size: .88rem; color: #9AA59C; white-space: nowrap; overflow: hidden;
}
.wa__typed { flex: 1; min-width: 0; overflow: hidden; }
.wa__cam { width: 20px; height: 20px; flex: none; color: #8A968E; }
.wa__thumb { display: none; width: 28px; height: 28px; border-radius: 7px; overflow: hidden; flex: none; }
.wa__thumb svg { display: block; width: 100%; height: 100%; }
.wa__send {
  position: relative; flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--green); color: #fff;
  transition: scale .3s var(--ease), background-color .3s;
}
.wa__send svg { grid-area: 1 / 1; width: 20px; height: 20px; }
.wa__send-go { opacity: 0; }

/* While a message is being written, the bar shows how it is being sent. */
.wa[data-phase="compose"] .wa__typed { color: var(--ink); }
.wa[data-phase="compose"]:not([data-mode="voice"]) .wa__send-mic { opacity: 0; }
.wa[data-phase="compose"]:not([data-mode="voice"]) .wa__send-go { opacity: 1; }

.wa[data-phase="compose"][data-mode="voice"] .wa__send { scale: 1.3; background: #0A8F5F; }
.wa[data-phase="compose"][data-mode="voice"] .wa__send::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #0A8F5F; animation: ripple 1s ease-out infinite;
}
.wa[data-phase="compose"][data-mode="voice"] .wa__typed { color: #C7302B; font-weight: 600; font-variant-numeric: tabular-nums; }
.wa[data-phase="compose"][data-mode="voice"] .wa__typed::before {
  content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%;
  background: #E5484D; animation: blink .8s steps(2, jump-none) infinite;
}
.wa[data-phase="compose"][data-mode="voice"] .wa__cam { opacity: 0; }

.wa[data-phase="compose"][data-mode="photo"] .wa__thumb { display: block; animation: pop .4s var(--ease) both; }
.wa[data-phase="compose"][data-mode="photo"] .wa__cam { color: var(--green); animation: nudge .7s var(--ease) 2; }

@media (min-width: 1100px) {
  .wa {
    position: absolute; left: 0; bottom: 0; margin: 0; width: 336px;
    transform: perspective(1400px) rotateY(calc(7deg + var(--ry, 0deg))) rotateX(calc(1deg + var(--rx, 0deg)));
    transform-origin: 0 60%;
  }
}
/* Smaller laptops: everything a notch smaller, same arrangement. */
@media (min-width: 1100px) and (max-width: 1299px) {
  .hero__title { font-size: 6.1vw; }
  .stage { height: clamp(540px, 74svh, 640px); }
  .wa { scale: .84; transform-origin: 0 100%; }
}

/* ------------------------------------------------------------ ticker */

/* The band is wider than the page and tilted, so its wrapper does the clipping. */
.ticker-clip { overflow: clip; padding-block: 18px; }
.ticker {
  position: relative; z-index: 2;
  margin: 0 -4vw;
  padding: 15px 0;
  background: var(--marigold);
  rotate: -1.4deg;
  overflow: hidden;
  box-shadow: 0 18px 30px -22px rgba(120, 70, 0, .6);
}
.ticker__track { display: flex; width: max-content; animation: ticker 30s linear infinite; }
.ticker ul { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.ticker li {
  display: flex; align-items: center;
  font-family: var(--display); font-weight: 580; letter-spacing: -.01em;
  font-size: clamp(1.15rem, 2.3vw, 1.85rem); white-space: nowrap;
}
.ticker li::after { content: "✦"; margin: 0 1.3em; font-size: .62em; color: var(--clay); }

/* ------------------------------------------------------------ languages */

.langs { padding: var(--section) 0 calc(var(--section) * .8); text-align: center; }
.langs__h { font-size: clamp(1.7rem, 3.6vw, 2.9rem); }

.hello {
  display: grid; justify-items: center; align-content: center;
  height: clamp(9rem, 26vw, 19rem);
  perspective: 900px;
}
.hello__word {
  display: block;
  font-size: clamp(4rem, 15.5vw, 11.5rem); line-height: 1.3; font-weight: 700;
  color: var(--green);
  transition: opacity .32s ease, transform .5s var(--ease);
  transform-origin: 50% 60%;
}
.hello__word.is-out { opacity: 0; transform: translateY(18%) rotateX(-75deg); }
.hello__name { font-size: .82rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

.langs__list {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  max-width: 860px; margin: 26px auto 0; padding: 0; list-style: none;
}
.langs__list li {
  padding: .5em 1.05em; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--paper);
  font-size: 1.05rem;
  transition: background-color .4s, color .4s, border-color .4s, scale .4s var(--ease);
}
.langs__list li.is-on { background: var(--green); border-color: var(--green); color: #fff; scale: 1.08; }

/* ------------------------------------------------------------ the jobs */

.story { position: relative; }
.story__head { padding-bottom: clamp(28px, 4vw, 52px); }

/* Without the pinned scroll (no script, or reduced motion) the six jobs are
   an ordinary grid of cards. */
.story__skies, .story__dots { display: none; }
.story__jobs { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.job {
  display: flex; flex-direction: column; gap: 18px;
  padding: 24px; border-radius: 28px;
  background: var(--paper); border: 1px solid var(--line);
}
.job h3 { font-size: 1.7rem; margin: .3em 0 .35em; }
.job__time {
  display: inline-block; padding: .28em .8em; border-radius: 999px;
  border: 1.5px solid currentColor;
  font: 600 .8rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .06em;
}
.job__cap { color: var(--body-ink); }
.job__phone { margin-top: auto; }

.phone {
  position: relative; display: flex; flex-direction: column;
  border-radius: 22px; overflow: hidden;
  background: #EDE4D3;
}
.phone__bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--green); color: #fff; }
.phone__bar img { width: 36px; height: 36px; padding: 4px 2px 3px 5px; border-radius: 50%; background: #fff; object-fit: contain; flex: none; }
.phone__bar b { display: block; font-size: .95rem; line-height: 1.2; }
.phone__bar span { display: block; font-size: .72rem; opacity: .8; line-height: 1.2; }
.phone__bar time { margin-left: auto; font-size: .72rem; opacity: .8; font-variant-numeric: tabular-nums; }
.phone__chat {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  padding: 16px 12px;
  background-image: radial-gradient(rgba(120, 100, 60, .1) 1px, transparent 1.5px);
  background-size: 16px 16px;
}

.msg {
  margin: 0; max-width: 88%;
  padding: .55em .8em; border-radius: 16px;
  font-size: .92rem; line-height: 1.36; color: var(--ink);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .09);
}
.msg--me { align-self: flex-end; background: var(--bubble-me); border-top-right-radius: 5px; }
.msg--them { align-self: flex-start; background: #fff; border-top-left-radius: 5px; }

.msg--sheet dl { margin: .5em 0; display: grid; gap: 3px; font-variant-numeric: tabular-nums; }
.msg--sheet dl div { display: flex; justify-content: space-between; gap: 18px; }
.msg--sheet dt { color: var(--muted); }
.msg--sheet dd { margin: 0; font-weight: 600; }
.msg--sheet .total { margin-top: 3px; padding-top: 5px; border-top: 1.5px dashed #D7CCB8; }
.msg--sheet .total dt, .msg--sheet .total dd { color: var(--green); font-weight: 700; }

.msg--photo { padding: 5px 5px .5em; width: 72%; }
.msg--photo > svg { display: block; width: 100%; height: auto; border-radius: 12px; margin-bottom: 6px; }
.msg--photo > span:not(.sr):not(.meta) { padding: 0 .4em; }

.voice { display: flex; align-items: center; gap: 8px; }
.voice svg { width: 22px; height: 22px; color: var(--green); flex: none; }
.voice__bars { display: flex; align-items: center; gap: 2px; height: 22px; }
.voice__bars i { width: 3px; height: 40%; border-radius: 2px; background: #6FA57A; }
.voice__bars i:nth-child(3n+1) { height: 85%; }
.voice__bars i:nth-child(4n+2) { height: 60%; }
.voice__bars i:nth-child(5n) { height: 100%; }
.voice__bars i:nth-child(7n+3) { height: 25%; }
.voice__len { font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.msg--voice q { display: block; margin-top: 6px; font-size: .82rem; font-style: italic; color: #47584A; }

.phone__notif {
  display: flex; align-items: center; gap: 10px;
  margin: 0 10px 12px; padding: 10px 12px; border-radius: 16px;
  background: #fff; font-size: .88rem; line-height: 1.3;
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .4);
}
.phone__notif svg { width: 26px; height: 26px; flex: none; color: #E59A0C; }
.phone__notif b { display: block; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.story__dawn { padding: clamp(40px, 6vw, 72px) 0 0; text-align: center; }
.story__line {
  max-width: 19em; margin: 0 auto 30px;
  font-family: var(--display); font-weight: 520; letter-spacing: -.02em;
  font-size: clamp(1.6rem, 4.1vw, 3.3rem); line-height: 1.08;
  text-wrap: balance;
}
.story__line em { font-style: normal; color: var(--clay); }

/* ---- pinned mode: the script adds .is-pinned when the device can carry it.
   The section becomes tall, the stage sticks, and scroll position picks the
   job. The sky behind it follows the clock from morning to midnight. */

.story.is-pinned .story__track { height: calc(var(--n, 6) * 82svh + 100svh); }
.story.is-pinned .story__pin {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  color: var(--ink);
  transition: color .8s ease;
}
.story.is-pinned .story__pin[data-tone="dark"] { color: var(--cream); }

.story.is-pinned .story__skies { display: block; position: absolute; inset: 0; }
.sky { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.sky.is-on { opacity: 1; }
.sky--1 { background: linear-gradient(180deg, #FFDDB8 0%, #FFF0DC 55%, var(--cream) 100%); opacity: 1; }
.sky--2 { background: linear-gradient(180deg, #BFE3F4 0%, #EEF4E6 58%, #FBF4E6 100%); }
.sky--3 { background: linear-gradient(180deg, #FFCB74 0%, #FFE4B5 55%, #FBE9CF 100%); }
.sky--4 { background: linear-gradient(180deg, #3B2B6B 0%, #A8527C 46%, #F0935C 100%); }
.sky--5 { background: linear-gradient(180deg, #141234 0%, #332764 62%, #5E3B78 100%); }
.sky--6 {
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 28% 62%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 41% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 57% 34%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 69% 9%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 48%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 22%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 93% 70%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 6% 78%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 48% 84%, #fff 50%, transparent 51%),
    linear-gradient(180deg, #06051A 0%, #121038 62%, #1D1848 100%);
}

.story__orb {
  position: absolute; left: var(--x, 12%); top: var(--y, 50%);
  width: clamp(64px, 9vw, 124px); aspect-ratio: 1; border-radius: 50%;
  translate: -50% -50%;
  background: radial-gradient(circle at 36% 34%, #FFF6C9, #FFCC55 58%, #F6A723);
  box-shadow: 0 0 90px 34px rgba(255, 196, 70, .5);
  transition: opacity .8s ease;
}
.story__orb--moon {
  opacity: 0;
  background: radial-gradient(circle at 36% 34%, #fff, #EDEBFA 55%, #C7C3E8);
  box-shadow: 0 0 70px 18px rgba(200, 200, 255, .28);
}
.story__pin[data-night] .story__orb--sun { opacity: 0; }
.story__pin[data-night] .story__orb--moon { opacity: 1; }

.story.is-pinned .story__jobs { display: block; position: relative; height: 100%; }
.story.is-pinned .job {
  position: absolute; inset: 0;
  display: grid; grid-template-rows: auto minmax(0, 1fr); align-items: center; justify-items: center;
  gap: 18px;
  padding: 26px 0 108px;
  background: none; border: 0; border-radius: 0;
  visibility: hidden; pointer-events: none;
  transition: visibility 0s .7s;
  text-align: center;
}
.story.is-pinned .job.is-active { visibility: visible; pointer-events: auto; transition-delay: 0s; }

.story.is-pinned .job__text {
  opacity: 0; translate: 0 46px;
  transition: opacity .5s ease, translate .8s var(--ease);
}
.story.is-pinned .job.is-past .job__text { translate: 0 -46px; }
.story.is-pinned .job.is-active .job__text { opacity: 1; translate: 0 0; transition-delay: .14s; }
.story.is-pinned .job h3 { font-size: clamp(2rem, 6.2vw, 5rem); line-height: .98; letter-spacing: -.03em; margin: .28em 0 .3em; }
.story.is-pinned .job__cap { max-width: 24em; margin-inline: auto; font-size: clamp(1.02rem, 1.7vw, 1.36rem); color: inherit; opacity: .86; }

.story.is-pinned .job__phone {
  margin: 0; opacity: 0;
  transform: perspective(1400px) translateY(24%) rotateX(22deg) rotateY(-26deg) scale(.88);
  transition: opacity .5s ease, transform 1s var(--ease);
}
.story.is-pinned .job.is-past .job__phone { transform: perspective(1400px) translateY(-24%) rotateX(-22deg) rotateY(26deg) scale(.88); }
.story.is-pinned .job.is-active .job__phone {
  opacity: 1;
  transform: perspective(1400px) rotateX(calc(4deg + var(--rx, 0deg))) rotateY(calc(var(--lean, -10deg) + var(--ry, 0deg)));
}
.story.is-pinned .job:nth-child(even) { --lean: 10deg; }

/* The handset. Sized from the shorter of the two viewport sides so the whole
   scene always fits one screen. */
.story.is-pinned .phone {
  --w: min(262px, 66vw, 31svh);
  width: var(--w); min-height: calc(var(--w) * 1.62);
  border-radius: calc(var(--w) * .13);
  border: calc(var(--w) * .03) solid #14110D;
  box-shadow:
    0 0 0 1.5px #4A4238,
    calc(var(--w) * .05) calc(var(--w) * .14) calc(var(--w) * .22) calc(var(--w) * -.1) rgba(0, 0, 0, .55),
    0 calc(var(--w) * .3) calc(var(--w) * .34) calc(var(--w) * -.2) rgba(0, 0, 0, .4);
  text-align: left;
}
.story.is-pinned .phone__bar { padding-top: 16px; }
.story.is-pinned .phone__notif { position: absolute; left: 8px; right: 8px; top: 8px; margin: 0; }

.story.is-pinned .msg, .story.is-pinned .phone__notif { opacity: 0; }
.story.is-pinned .job.is-active .msg {
  animation: pop .55s var(--ease) both;
  animation-delay: calc(var(--i) * .6s + .5s);
}
.story.is-pinned .job.is-active .phone__notif {
  animation: drop .8s var(--ease) both;
  animation-delay: calc(var(--i) * .6s + .5s);
}

.story.is-pinned .story__dots {
  display: flex; gap: 10px;
  position: absolute; left: 50%; bottom: 84px; translate: -50% 0;
  margin: 0; padding: 0; list-style: none;
}
.story__dots li { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .3; transition: opacity .4s, scale .4s var(--ease); }
.story__dots li.is-on { opacity: 1; scale: 1.6; }

.story.is-pinned .story__dawn {
  padding: 13vh 0 24vh;
  background: linear-gradient(180deg, #1D1848 0%, #3B2A66 30%, #C7607A 58%, #F6A86B 78%, #FCD9A8 90%, var(--cream) 100%);
}
.story.is-pinned .story__line { color: #fff; }
.story.is-pinned .story__line em { color: var(--marigold); }

/* Short phones: the dots give way so the handset has room. */
@media (max-width: 899px) and (max-height: 700px) {
  .story.is-pinned .story__dots { display: none; }
  .story.is-pinned .job { padding: 18px 0 78px; gap: 12px; }
  .story.is-pinned .phone__bar b { white-space: nowrap; }
}

@media (min-width: 900px) {
  .story.is-pinned .job {
    grid-template-rows: none; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 40px; padding: 0; text-align: left; justify-items: start;
  }
  .story.is-pinned .job__cap { margin-inline: 0; }
  .story.is-pinned .job__phone { justify-self: center; }
  .story.is-pinned .phone { --w: min(360px, 28vw, 48svh); }
  .story.is-pinned .msg { font-size: 1rem; }
  .story.is-pinned .story__dots {
    flex-direction: column; left: auto; right: var(--gutter); bottom: auto; top: 50%; translate: 0 -50%;
  }
}

/* ------------------------------------------------------------ the team */

.team { padding: var(--section) 0; }
.team__group {
  margin: 52px 0 0;
  font: 600 .84rem/1.2 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--clay);
}

/* A shelf you swipe on a phone, a grid on anything wider. */
.shelf {
  display: grid; gap: 16px;
  grid-auto-flow: column; grid-auto-columns: min(80vw, 310px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  padding: 16px var(--gutter) 28px;
  scrollbar-width: none;
}
.shelf::-webkit-scrollbar { display: none; }

.agent {
  position: relative; scroll-snap-align: start;
  display: flex; flex-direction: column;
  margin-top: 36px; padding: 66px 22px 22px;
  border-radius: 28px;
  background: linear-gradient(180deg, var(--wash), var(--paper) 62%);
  border: 1px solid color-mix(in srgb, var(--tint) 20%, transparent);
  box-shadow: inset 0 1px 0 #fff, 0 26px 44px -34px rgba(70, 45, 10, .5);
  transform-style: preserve-3d;
}
.agent__art {
  position: absolute; top: -36px; left: 22px;
  display: grid; place-items: center;
  width: 88px; height: 88px; border-radius: 28px;
  background: #fff;
  box-shadow: 0 18px 26px -14px color-mix(in srgb, var(--tint) 70%, transparent);
  transform: translateZ(46px);
  transition: transform .6s var(--ease);
}
.agent__art img { width: 58px; height: auto; translate: 4px 0; }
.agent:hover .agent__art { transform: translateZ(72px) rotate(-7deg) scale(1.07); }

.agent h4 { font-size: 1.65rem; }
.agent__link { text-decoration: none; }
.agent__link:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.team__all { margin-top: 24px; }
.agent__role { margin: .2em 0 .9em; font-size: .9rem; font-weight: 600; color: var(--tint); }
.agent__tag { margin-bottom: .55em; font-family: var(--display); font-size: 1.22rem; line-height: 1.18; font-weight: 500; letter-spacing: -.01em; }
.agent__blurb { margin-bottom: 1em; font-size: .95rem; color: var(--body-ink); }
.agent ul { display: grid; gap: .5em; margin: 0 0 1.4em; padding: 0; list-style: none; font-size: .92rem; }
.agent li { position: relative; padding-left: 1.55em; }
.agent li::before {
  content: ""; position: absolute; left: .1em; top: .42em;
  width: .78em; height: .42em;
  border-left: 2.5px solid var(--tint); border-bottom: 2.5px solid var(--tint);
  rotate: -45deg;
}
.agent__hire {
  display: flex; align-items: center; justify-content: space-between; gap: .5em;
  margin-top: auto; padding: .82em 1.15em;
  border-radius: 999px; background: var(--tint); color: #fff;
  font-size: .95rem; font-weight: 600; text-decoration: none;
  transition: filter .3s;
}
.agent__hire svg { width: 1.15em; height: 1.15em; transition: translate .35s var(--ease); }
.agent__hire:hover { filter: brightness(1.1); }
.agent__hire:hover svg { translate: 5px 0; }

.agent--custom {
  flex-direction: row; align-items: center; gap: 20px;
  padding: 28px; background: var(--green-deep); color: var(--cream); border: 0;
}
.agent--custom > img { width: 76px; height: auto; flex: none; animation: bob 3.8s ease-in-out infinite; }
.agent--custom h4 { font-size: 1.7rem; margin-bottom: .3em; }
.agent--custom p { margin-bottom: .9em; color: #C6E2D4; }

@media (min-width: 720px) {
  .shelf {
    grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
    overflow: visible; margin-inline: 0; padding: 24px 0 0;
  }
  .agent--custom { grid-column: span 2; }
}
@media (min-width: 1120px) {
  .shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Cards that lean toward the pointer. The script sets --rx and --ry. */
[data-tilt] {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .6s var(--ease);
  will-change: transform;
}
[data-tilt].is-tilting { transition-duration: .12s; }

/* ------------------------------------------------------------ how it works */

.how { padding: var(--section) 0; background: var(--paper); border-block: 1px solid var(--line); }
.steps { position: relative; isolation: isolate; display: grid; gap: 34px; margin: 56px 0 0; padding: 0; list-style: none; }
.steps__n {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--marigold);
  font-family: var(--display); font-size: 2.3rem; font-weight: 600;
  box-shadow: 0 0 0 9px var(--paper);
}
.steps h3 { margin: 22px 0 8px; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.steps p { max-width: 26em; color: var(--body-ink); }
.how__line { margin-top: 56px; font-family: var(--display); font-size: clamp(1.35rem, 2.8vw, 2.2rem); font-weight: 520; letter-spacing: -.015em; color: var(--clay); }

@media (min-width: 820px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; }
  /* A dotted line joins the three numbers, and fills in as you scroll. */
  .steps::before, .steps::after {
    content: ""; position: absolute; z-index: -1;
    left: 38px; right: calc((100% - 88px) / 3 - 38px); top: 37px; height: 3px; border-radius: 2px;
  }
  .steps::before { background: repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 19px); }
  .steps::after { background: var(--green); scale: var(--p, 0) 1; transform-origin: 0 50%; }
}

/* ------------------------------------------------------------ talk the way you talk */

.talk { padding: var(--section) 0; }
.bento { display: grid; gap: 18px; margin-top: 52px; }
.tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 360px; padding: 26px;
  border-radius: 30px;
}
.tile__fx { position: absolute; inset: 14px 0 44% 0; display: grid; place-items: center; }
.tile__icon { width: 32px; height: 32px; margin-bottom: 12px; }
.tile h3 { font-size: 1.75rem; margin-bottom: 6px; }
.tile p { max-width: 30em; opacity: .86; }

.tile--speak { background: var(--green-deep); color: var(--cream); }
.tile--speak .tile__icon { color: var(--marigold); }
.tile--mix { background: #FFE49B; }
.tile--show { background: #DDEBF6; }
.tile--get { background: var(--sand); }
.tile--mix .tile__icon, .tile--show .tile__icon, .tile--get .tile__icon { color: var(--green); }

.wave { display: flex; align-items: center; gap: clamp(3px, .7vw, 6px); height: 96px; }
.wave i { width: clamp(4px, .6vw, 6px); height: 100%; border-radius: 4px; background: var(--marigold); scale: 1 .18; animation: wave 1.25s ease-in-out infinite; }
.wave i:nth-child(3n+1) { animation-delay: -.25s; }
.wave i:nth-child(3n+2) { animation-delay: -.55s; }
.wave i:nth-child(4n) { animation-delay: -.85s; }
.wave i:nth-child(5n) { animation-delay: -1.1s; }
.wave i:nth-child(7n) { animation-delay: -.4s; }

.mix { padding: 0 22px; font-family: var(--display); font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 520; line-height: 1.2; text-align: center; rotate: -3deg; }
.mix b { font-weight: inherit; color: var(--clay); background: linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)) 0 88% / 100% 34% no-repeat; }

.scan__bill {
  position: relative; display: grid; gap: 9px; align-content: start;
  width: 124px; height: 146px; padding: 16px 14px;
  border-radius: 10px; background: #fff; rotate: -6deg;
  box-shadow: 0 18px 28px -16px rgba(30, 60, 100, .5);
}
.scan__bill i { height: 7px; border-radius: 4px; background: #D3DEE9; }
.scan__bill i:nth-child(2) { width: 70%; }
.scan__bill i:nth-child(3) { width: 86%; }
.scan__bill i:nth-child(4) { width: 52%; }
.scan__bill b { margin-top: auto; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.scan__bill::after {
  content: ""; position: absolute; left: -10px; right: -10px; top: 8%; height: 3px; border-radius: 2px;
  background: var(--green); box-shadow: 0 0 16px 4px rgba(15, 107, 75, .45);
  animation: scan 2.6s ease-in-out infinite alternate;
}

.files { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; padding: 0 20px; }
.files span {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .75em 1.05em; border-radius: 16px; background: #fff;
  font-weight: 600; font-size: .92rem;
  box-shadow: 0 16px 26px -16px rgba(70, 45, 10, .55);
  animation: bob 4s ease-in-out infinite;
}
.files span::before { content: ""; width: 1.25em; height: 1.5em; border-radius: 4px; background: #1D8A4F; }
.files span:nth-child(2) { animation-delay: -1.6s; rotate: 3deg; }
.files span:nth-child(2)::before { background: #D2452F; }
.files span:first-child { rotate: -3deg; }

@media (min-width: 760px) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tile--speak, .tile--get { grid-column: span 4; }
  .tile--mix, .tile--show { grid-column: span 2; }
}

/* ------------------------------------------------------------ why hire Kalki */

.why { padding: var(--section) 0; background: var(--green-deep); color: var(--cream); }
.why__list { display: grid; gap: clamp(20px, 3.4vw, 40px); margin: clamp(48px, 7vw, 88px) 0 0; padding: 0; list-style: none; }
.why__list li { display: grid; gap: 6px 32px; align-items: baseline; transition: opacity .5s ease; }
.why__list b {
  font-family: var(--display); font-weight: 560; letter-spacing: -.03em; line-height: 1;
  font-size: clamp(2.1rem, 6.6vw, 5.4rem);
  transition: color .5s ease;
}
.why__list span { font-size: clamp(1rem, 1.6vw, 1.32rem); color: #BFE0CF; }
.js .why__list li { opacity: .24; }
.js .why__list li.is-lit { opacity: 1; }
.js .why__list li.is-lit b { color: var(--marigold); }

@media (min-width: 860px) {
  .why__list li { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}

/* ------------------------------------------------------------ pricing */

.pricing { padding: var(--section) 0; text-align: center; }
.pricing h2 { max-width: 15em; margin-inline: auto; }

.price {
  position: relative;
  max-width: 460px; margin: 78px auto 0; padding: 40px 30px 28px;
  border-radius: 38px; text-align: left;
  background: var(--paper); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 #fff, 0 60px 90px -60px rgba(70, 45, 10, .65);
  transform-style: preserve-3d;
}
/* A soft light that follows the pointer across the card. */
.price::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(246, 180, 44, .2), transparent 60%);
}

.price__sticker {
  position: absolute; top: -52px; right: -10px;
  display: grid; place-items: center;
  width: 126px; height: 126px; border-radius: 50%;
  background: var(--marigold);
  box-shadow: 0 18px 30px -14px rgba(150, 95, 0, .75);
  transform: translateZ(60px) rotate(9deg);
}
.price__sticker svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 20s linear infinite; }
.price__sticker text { font: 700 9.4px var(--body); letter-spacing: .12em; fill: var(--ink); }
.price__sticker span { font-family: var(--display); font-size: 1.02rem; line-height: 1; text-align: center; }
.price__sticker b { display: block; font-size: 1.5rem; }

.price__name { font: 600 .84rem/1.2 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--clay); }
.price__amount { margin-top: .12em; font-family: var(--display); font-weight: 600; letter-spacing: -.035em; line-height: 1; font-size: clamp(4.6rem, 15vw, 6.6rem); }
.price__amount small { position: relative; top: -2.6em; font: 500 1.05rem var(--body); letter-spacing: 0; color: var(--muted); }
.price__per { margin-top: .3em; color: var(--muted); }
.price__day { margin: .45em 0 1.3em; font-weight: 600; color: var(--green); }

.ticks { display: grid; gap: .65em; margin: 0 0 1.7em; padding: 0; list-style: none; }
.ticks li { position: relative; padding-left: 2em; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .12em; width: 1.3em; height: 1.3em; border-radius: 50%;
  background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230F6B4B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 72% no-repeat;
}
.price__small { margin-top: 14px; text-align: center; font-size: .9rem; color: var(--muted); }
.pricing__more { margin-top: 40px; font-weight: 600; }
.pricing__promise { max-width: 35em; margin: 10px auto 0; color: var(--body-ink); }

@media (min-width: 560px) { .price { padding: 44px 40px 32px; } .price__sticker { right: -34px; } }
@media (max-width: 559px) { .price__sticker { right: 4px; width: 112px; height: 112px; } }

/* ------------------------------------------------------------ trust */

.trust { padding: var(--section) 0; background: var(--paper); border-block: 1px solid var(--line); }
.trust__grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 216px), 1fr)); margin: 52px 0 0; padding: 0; list-style: none; }
.trust__grid li { padding: 24px 22px; border-radius: 26px; background: var(--cream); border: 1px solid var(--line); }
.trust__grid svg { width: 30px; height: 30px; color: var(--green); }
.trust__grid h3 { margin: 14px 0 8px; font-size: 1.28rem; line-height: 1.12; }
.trust__grid p { font-size: .95rem; color: var(--body-ink); }

/* ------------------------------------------------------------ questions */

.faq { padding: var(--section) 0; }
.faq__in { display: grid; gap: 34px; }
.faq details { border-bottom: 1.5px solid var(--line); }
.faq details:first-child { border-top: 1.5px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 21px 2px; cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 520; letter-spacing: -.01em;
  font-size: clamp(1.14rem, 1.9vw, 1.46rem); line-height: 1.2;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 24px; height: 24px; flex: none; color: var(--green); transition: rotate .4s var(--ease); }
.faq details[open] summary svg { rotate: 45deg; }
.faq summary:hover { color: var(--green); }
.faq details p { max-width: 42em; margin: 0 2px 24px; color: var(--body-ink); }

@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: clip; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}

@media (min-width: 960px) {
  .faq__in { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
  .faq h2 { position: sticky; top: 110px; font-size: clamp(2.2rem, 4vw, 3.5rem); }
}

/* ------------------------------------------------------------ closing */

.closing {
  position: relative; overflow: hidden;
  padding: var(--section) 0 0; text-align: center;
  background: linear-gradient(180deg, var(--cream) 0%, #FFEBBE 48%, #FFD27A 100%);
}
.closing__sun {
  position: absolute; left: 50%; bottom: 0;
  width: min(92vw, 1080px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #FFF4C2 0%, #FFCE5C 56%, #F7AC2B 100%);
  box-shadow: 0 0 140px 50px rgba(255, 190, 70, .5);
  translate: -50% calc(58% + var(--rise, 0%));
}
.closing__in { position: relative; z-index: 1; }
.closing h2 { max-width: 11em; margin-inline: auto; font-size: clamp(2.5rem, 7.4vw, 5.8rem); letter-spacing: -.035em; }
.closing p { max-width: 31em; margin: 22px auto 30px; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--body-ink); }

.lineup {
  position: relative; z-index: 1;
  display: flex; justify-content: center; align-items: flex-end;
  gap: clamp(1px, 1.1vw, 16px);
  margin-top: clamp(44px, 7vw, 84px); padding: 0 10px;
}
.lineup img {
  width: clamp(26px, 7vw, 82px); height: auto; margin-bottom: -2px;
  transform-origin: 50% 100%;
  animation: hop 2.8s var(--ease) infinite;
  animation-delay: calc(var(--i) * .11s);
}
.lineup .lineup__kalki { width: clamp(42px, 10.5vw, 128px); }

/* ------------------------------------------------------------ footer */

.footer { padding: clamp(40px, 6vw, 72px) 0 112px; background: var(--ink); color: #CFC6B8; overflow: hidden; }
.footer__mark {
  margin: 0 0 clamp(28px, 5vw, 56px);
  font-family: var(--display); font-weight: 600; letter-spacing: -.045em; line-height: .95; white-space: nowrap;
  font-size: clamp(2.6rem, 14.6vw, 14rem);
  /* Outlined letters. The fill is the footer's own colour and is painted
     over the stroke, which hides the overlapping shapes inside each letter. */
  color: var(--ink); -webkit-text-stroke: 3px rgba(251, 244, 230, .4); paint-order: stroke fill;
}
.footer__small { margin-top: 30px; font-size: .86rem; color: #8E8577; }

/* Link columns: every agent and every kind of customer, one click from any
   page, for people and for crawlers alike. */
.footer__cols { display: grid; gap: 30px 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); margin-top: 8px; }
.footer__cols nav { display: grid; align-content: start; gap: 8px; }
.footer__cols h2 { margin: 0 0 4px; font: 600 .78rem/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #8E8577; }
.footer__cols h2:not(:first-child) { margin-top: 14px; }
.footer__cols a:not(.brand) { color: var(--cream); text-decoration: none; font-size: .95rem; }
.footer__cols a:not(.brand):hover { color: var(--marigold); }
.footer__cols .footer__line { margin-top: 12px; }

@media (min-width: 760px) { .footer { padding-bottom: 48px; } }

/* ------------------------------------------------------------ sticky bar (phones) */

.stickybar {
  position: fixed; z-index: 60;
  left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 7px 7px 20px;
  border-radius: 999px;
  background: rgba(27, 23, 18, .93); color: var(--cream);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 18px 34px -14px rgba(0, 0, 0, .65);
  font-size: .88rem; white-space: nowrap;
  translate: 0 170%;
  transition: translate .6s var(--ease);
}
.stickybar.is-on { translate: 0 0; }
.stickybar .btn { font-size: .88rem; padding: .78em 1em; }
.stickybar i { font-style: normal; }
@media (max-width: 379px) { .stickybar i { display: none; } }
@media (min-width: 760px) { .stickybar { display: none; } }

/* ------------------------------------------------------------ page not found */

.lost { min-height: 100svh; display: grid; place-items: center; padding: 40px var(--gutter); text-align: center; }
.lost img { width: 120px; height: auto; animation: bob 4s ease-in-out infinite; }
.lost h1 { margin: 26px auto 30px; max-width: 12em; font-size: clamp(2.2rem, 6vw, 4.2rem); }

/* ------------------------------------------------------------ reveal on scroll */

.js [data-reveal] {
  opacity: 0; translate: 0 30px;
  transition: opacity .9s var(--ease), translate 1s var(--ease);
  transition-delay: calc(var(--d, 0) * .1s);
}
.js [data-reveal].is-in { opacity: 1; translate: 0 0; }

/* ------------------------------------------------------------ keyframes */

@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes breathe { 0%, 100% { scale: 1; opacity: .95; } 50% { scale: 1.06; opacity: 1; } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes ticker { to { translate: -33.3333% 0; } }
@keyframes typing { 0%, 60%, 100% { translate: 0 0; opacity: .5; } 30% { translate: 0 -4px; opacity: 1; } }
@keyframes pop { from { opacity: 0; translate: 0 12px; scale: .9; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes drop { from { opacity: 0; translate: 0 -150%; } to { opacity: 1; translate: 0 0; } }
@keyframes wave { 0%, 100% { scale: 1 .18; } 50% { scale: 1 1; } }
@keyframes scan { from { top: 8%; } to { top: 90%; } }
@keyframes ripple { from { scale: 1; opacity: .8; } to { scale: 1.9; opacity: 0; } }
@keyframes blink { from { opacity: 1; } to { opacity: .2; } }
@keyframes nudge { 0%, 100% { scale: 1; } 50% { scale: 1.35; } }
@keyframes hop {
  0%, 46%, 100% { transform: translateY(0) scale(1, 1); }
  14% { transform: translateY(-24%) scale(.95, 1.06); }
  26% { transform: translateY(0) scale(1.07, .93); }
  34% { transform: translateY(-7%) scale(.99, 1.01); }
}

/* ------------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; transition-delay: 0s !important;
  }
  .js [data-reveal], .js .eyebrow, .js .hero__lede, .js .hero__cta, .js .hero__price, .js .wa { opacity: 1; translate: 0 0; }
  .js .line > span { translate: 0 0; }
  .js .why__list li { opacity: 1; }
  .wave i { scale: 1 .6; }
}