/* app.gokalki.com
   One stylesheet, no build step, written for a phone first. The colours,
   the headline face and the planters are the same as gokalki.com, so moving
   from the site to the app feels like staying in one place. */

@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;
}
@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;
  --danger: #B3261E;
  --marigold: #F6B42C;
  --bubble-me: #D9F4CF;

  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans",
          "Noto Sans Devanagari", "Nirmala UI", sans-serif;

  --gutter: clamp(18px, 5vw, 40px);
  --wrap: 1040px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --tabbar: 68px;
}

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

html { font-family: var(--body); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh;
  background: var(--cream); color: var(--ink);
  font-size: 16.5px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

img, svg { max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3 { font-family: var(--display); font-weight: 560; line-height: 1.06; letter-spacing: -.02em; text-wrap: balance; }

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

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }

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

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 46px; padding: .7em 1.25em;
  border: 0; border-radius: 999px;
  font: 600 .98rem/1.15 var(--body); text-decoration: none; text-align: center;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .25s, opacity .25s;
}
.btn svg { width: 1.25em; height: 1.25em; flex: none; }
.btn:active { transform: scale(.97); }
.btn--wa { background: var(--green); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 12px 24px -12px rgba(15, 107, 75, .75); }
.btn--wa:hover { background: #0C5C40; }
.btn--ink { background: var(--ink); color: var(--cream); box-shadow: 0 14px 26px -14px rgba(27, 23, 18, .7); }
.btn--ink:hover { background: #2B251D; }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--dangerline { color: var(--danger); }
.btn--lg { min-height: 54px; font-size: 1.04rem; padding: .85em 1.5em; }
.btn--sm { min-height: 38px; font-size: .88rem; padding: .5em 1em; }
.btn--block { display: flex; width: 100%; }

.btn[disabled] { opacity: .75; cursor: default; }
.btn.is-busy::before {
  content: ""; width: 1.05em; height: 1.05em; flex: none; border-radius: 50%;
  border: 2.5px solid currentColor; border-right-color: transparent;
  animation: spin .7s linear infinite;
}
.btn.is-busy svg { display: none; }

.linkish {
  padding: 0; border: 0; background: none;
  color: var(--green); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.linkish--danger { color: var(--danger); }

.iconbtn {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted);
}
.iconbtn:hover { background: var(--sand); color: var(--ink); }
.iconbtn svg { width: 20px; height: 20px; }

.brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-size: 1.35rem; font-weight: 620; letter-spacing: -.02em;
  text-decoration: none; color: inherit;
}
.brand img { width: 28px; height: auto; }

.note { font-size: .88rem; color: var(--muted); }
.demo-hint { margin-top: 14px; padding: 9px 12px; border-radius: 12px; background: #FFF3CF; font-size: .88rem; color: #6B4A00; }

/* ------------------------------------------------------------ the sky

   Six skies, the same ones the scroll story on the website moves through.
   ui.js picks one from the clock. */

.sky { position: relative; overflow: hidden; color: var(--ink); isolation: isolate; }
[data-tone="dark"] .sky { color: var(--cream); }
.sky--1 { background: linear-gradient(180deg, #FFD3A6 0%, #FFE9CF 62%, #FFF2E0 100%); }
.sky--2 { background: linear-gradient(180deg, #A9D8F0 0%, #D8ECEE 60%, #F2F1DF 100%); }
.sky--3 { background: linear-gradient(180deg, #FFC15F 0%, #FFDDA6 58%, #FBE6C4 100%); }
.sky--4 { background: linear-gradient(180deg, #3B2B6B 0%, #A8527C 48%, #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% 22%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 27% 64%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 41% 14%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 56% 38%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 66% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 91% 56%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 6% 80%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 47% 86%, #fff 50%, transparent 51%),
    linear-gradient(180deg, #06051A 0%, #121038 62%, #1D1848 100%);
}

.sky__orb {
  position: absolute; z-index: -1;
  width: clamp(56px, 9vw, 96px); aspect-ratio: 1; border-radius: 50%;
  translate: 50% -50%;
  background: radial-gradient(circle at 36% 34%, #FFF6C9, #FFCC55 58%, #F6A723);
  box-shadow: 0 0 80px 30px rgba(255, 196, 70, .45);
  animation: breathe 8s ease-in-out infinite;
}
/* On a phone the sun or moon keeps to the top corner, clear of the words.
   Wider screens have room to put it where the hour says it should be. */
.sky__orb { right: 46px; top: calc(40px + env(safe-area-inset-top)); width: 44px; }
.sky--4 .sky__orb { background: radial-gradient(circle at 40% 36%, #FFE9A8, #FFB347 55%, #F0793A); box-shadow: 0 0 90px 36px rgba(255, 150, 70, .5); }
.sky--5 .sky__orb, .sky--6 .sky__orb {
  background: radial-gradient(circle at 36% 34%, #fff, #EDEBFA 55%, #C7C3E8);
  box-shadow: 0 0 70px 18px rgba(200, 200, 255, .26);
}

.login__sky .sky__orb { right: 15%; top: 21%; width: clamp(56px, 9vw, 96px); }
@media (min-width: 860px) {
  .sky__orb { width: clamp(64px, 7vw, 96px); }
  .sky--1 .sky__orb { right: 16%; top: 76%; }
  .sky--2 .sky__orb { right: 12%; top: 46%; }
  .sky--3 .sky__orb { right: 24%; top: 56%; }
  .sky--4 .sky__orb { right: 14%; top: 84%; }
  .sky--5 .sky__orb, .sky--6 .sky__orb { right: 13%; top: 52%; }
  .login__sky .sky__orb { right: 14%; top: 18%; }
}

/* ------------------------------------------------------------ log in */

.login { display: flex; flex-direction: column; min-height: 100svh; background: var(--cream); }
.login__sky {
  flex: none; height: 44svh; min-height: 290px;
  display: grid; place-items: center;
  transition: height 1s var(--ease);
}
.login__sky .brand { position: absolute; left: var(--gutter); top: calc(14px + env(safe-area-inset-top)); }
.login__line { display: none; }

.login__stage { position: relative; width: min(74vw, 36svh, 430px); aspect-ratio: 1 / 1; margin-top: 18px; }
.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;
}
[data-tone="dark"] .stage__glow { opacity: .6; }
.stage__canvas { position: absolute; inset: -9%; width: 118%; height: 118%; opacity: 0; transition: opacity .9s ease; pointer-events: none; }
.has-gl .stage__canvas { opacity: 1; }
.stage__flat { position: absolute; inset: 0; transition: opacity .6s ease, visibility 0s .6s; }
.has-gl .stage__flat { opacity: 0; visibility: hidden; }
.stage__kalki {
  position: absolute; left: 50%; top: 50%; width: 36%; height: auto;
  transform: translate(-50%, -52%);
  filter: drop-shadow(0 22px 16px rgba(60, 30, 10, .3));
  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);
}

.login__panel {
  position: relative; z-index: 2; flex: 1;
  margin-top: -28px; padding: 30px var(--gutter) calc(30px + env(safe-area-inset-bottom));
  border-radius: 28px 28px 0 0; background: var(--cream);
  box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, .35);
  transition: translate 1s var(--ease), opacity .6s ease;
}
.login__card { max-width: 400px; margin-inline: auto; }

.step { animation: rise .55s var(--ease) both; }
.step h1 { font-size: clamp(2.1rem, 8.4vw, 3rem); }
.step__sub { margin: 10px 0 24px; color: var(--body-ink); }
.step__error, .pay__error { margin: -4px 0 14px; color: var(--danger); font-weight: 600; font-size: .92rem; }
.step .note { margin-top: 14px; text-align: center; }
.step__new { margin-top: 26px; padding-top: 20px; border-top: 1.5px solid var(--line); font-size: .94rem; color: var(--body-ink); }
.step__new a { color: var(--green); font-weight: 600; }

.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field > span:first-child { font-size: .88rem; font-weight: 600; color: var(--body-ink); }
.field input, .field textarea, .phone {
  width: 100%; border: 2px solid var(--line); border-radius: 16px; background: var(--paper);
  transition: border-color .2s, box-shadow .2s;
}
.field input, .field textarea { padding: 14px 16px; font-size: 1.05rem; outline: 0; }
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field textarea:focus, .phone:focus-within { border-color: var(--green); box-shadow: 0 0 0 4px rgba(15, 107, 75, .14); }

.phone { display: flex; align-items: center; overflow: hidden; }
.phone__cc { padding: 0 4px 0 16px; font-size: 1.25rem; font-weight: 600; color: var(--muted); }
.phone input { border: 0; border-radius: 0; background: transparent; box-shadow: none !important; padding-left: 8px; font-size: 1.25rem; font-weight: 600; letter-spacing: .04em; }

/* Starting a trial: who you are starting with. */
.starting {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
  padding: 10px 14px 10px 10px; border-radius: 18px; background: var(--wash);
}
.starting__art, .who__art, .agents__art {
  display: grid; place-items: center; flex: none; border-radius: 14px; background: #fff;
}
.starting__art { width: 52px; height: 52px; }
.starting__art img, .who__art img, .agents__art img { height: auto; translate: 2px 0; }
.starting__art img { width: 34px; }
.starting > span:nth-child(2), .who__one > span:nth-child(2) { display: grid; flex: 1; line-height: 1.25; }
.starting b, .who__one b { font-family: var(--display); font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; }
.starting > span:nth-child(2) > span, .who__one > span:nth-child(2) > span { font-size: .84rem; font-weight: 600; color: var(--tint); }

/* Starting with no agent chosen: the ten, as a list. */
.who__group { margin: 18px 0 8px; font: 700 .78rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.who { display: grid; gap: 8px; }
.who__one {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px 8px 8px;
  border: 0; border-radius: 16px; background: var(--paper); text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .2s, translate .2s var(--ease);
}
.who__one:hover { box-shadow: inset 0 0 0 1.5px var(--tint); translate: 2px 0; }
.who__one > svg { width: 18px; height: 18px; color: var(--muted); }
.who__art { width: 44px; height: 44px; background: var(--wash); }
.who__art img { width: 28px; }

/* The code the customer sends on WhatsApp. */
.codecard {
  display: grid; justify-items: center; gap: 4px; margin-bottom: 16px; padding: 16px;
  border-radius: 20px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line);
}
.codecard__label { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.codecard__code { font-family: var(--display); font-size: 2.6rem; font-weight: 600; letter-spacing: .06em; line-height: 1.1; font-variant-numeric: tabular-nums; }

/* Logging in: any of the agents will take the code. */
.agents__label { margin: 18px 0 8px; font-size: .88rem; font-weight: 600; color: var(--body-ink); }
.agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.agents__one {
  display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border-radius: 14px;
  font-size: .8rem; font-weight: 600; text-align: center; text-decoration: none; line-height: 1.2;
  box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .2s;
}
.agents__one:hover { box-shadow: inset 0 0 0 1.5px var(--green); }
.agents__art { width: 42px; height: 42px; background: var(--wash); }
.agents__art img { width: 26px; }

/* Waiting for the message to arrive. */
.wait { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 18px 0 4px; font-weight: 600; color: var(--body-ink); text-align: center; }
.wait__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--marigold); animation: waitpulse 1.4s ease-in-out infinite; }
.wait.is-done { color: var(--green); }
.wait.is-done .wait__dot { background: var(--green); animation: none; }

/* In: the form drops away and the sky takes the whole screen. */
.login.is-in .login__sky { height: 100svh; }
.login.is-in .login__panel { translate: 0 110%; opacity: 0; }

/* Wide screens: the page is exactly one window tall. The sky stays still and
   only the panel on the right scrolls, without a scrollbar of its own. */
@media (min-width: 900px) {
  .login { flex-direction: row; height: 100svh; overflow: hidden; }
  .login__sky { flex: 1.2 1 0; height: auto; min-height: 0; transition: flex-grow 1s var(--ease); }
  .login__sky .brand { left: 40px; top: 32px; font-size: 1.5rem; }
  .login__stage { width: min(560px, 74%, 70svh); margin: 0; }
  .login__line {
    display: block; position: absolute; left: 40px; bottom: 28px;
    font-family: var(--display); font-weight: 600; letter-spacing: -.04em; line-height: 1;
    font-size: clamp(2.4rem, 5vw, 4.4rem); opacity: .22;
  }
  .login__panel {
    flex: .8 1 0; margin: 0; border-radius: 0; box-shadow: none;
    display: flex; flex-direction: column; padding: 40px;
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
    transition: flex-grow 1s var(--ease), opacity .5s ease, padding 1s var(--ease);
  }
  .login__panel::-webkit-scrollbar { display: none; }
  /* Centred when it fits; when it does not, it starts at the top and scrolls. */
  .login__card { width: 100%; margin-block: auto; }
  .login.is-in .login__sky { height: auto; }
  .login.is-in .login__panel { translate: none; flex-grow: .0001; padding-inline: 0; overflow: hidden; }
}

/* ------------------------------------------------------------ the frame */

.top { padding-top: env(safe-area-inset-top); }
.top__bar { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.top__nav { display: none; gap: 4px; }
.top__nav a {
  padding: 8px 16px; border-radius: 999px;
  font-weight: 600; font-size: .95rem; text-decoration: none;
  transition: background-color .25s;
}
.top__nav a:hover { background: rgba(127, 127, 127, .16); }
[data-tone="dark"] .top__nav a[aria-current] { background: rgba(255, 255, 255, .2); }
[data-tone="light"] .top__nav a[aria-current] { background: rgba(27, 23, 18, .1); }

.top__hero { position: relative; padding: 10px 0 64px; min-height: 196px; }
.hero__hi { font-weight: 600; font-size: .98rem; opacity: .86; }
.hero__title { margin: 6px 0 8px; max-width: 13em; font-size: clamp(2rem, 7.6vw, 3.5rem); letter-spacing: -.03em; }
.hero__title small { font: 500 .36em var(--body); letter-spacing: 0; opacity: .85; }
.hero__title--sm { font-size: clamp(1.6rem, 5.6vw, 2.5rem); }
.hero__sub { font-size: 1rem; opacity: .9; max-width: 28em; }

/* The team, standing on the edge of the page below. */
.lineup { position: absolute; right: 0; bottom: 27px; display: flex; align-items: flex-end; gap: 2px; }
.lineup span { display: block; transform-origin: 50% 100%; animation: hop 3.2s var(--ease) infinite; animation-delay: calc(var(--i) * .16s + .4s); }
.lineup img { display: block; width: clamp(52px, 14vw, 72px); height: auto; filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .22)); }
.lineup--kalki img { width: clamp(58px, 15vw, 84px); }
[data-screen="team"] .top__hero { padding-bottom: 112px; }

.back { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 12px -6px; font-weight: 600; font-size: .95rem; text-decoration: none; opacity: .9; }
.back svg { width: 20px; height: 20px; }

.page {
  position: relative; z-index: 1;
  margin-top: -28px; padding: 26px 0 calc(var(--tabbar) + 40px + env(safe-area-inset-bottom));
  border-radius: 28px 28px 0 0; background: var(--cream);
  min-height: 60svh;
}

.tabbar {
  position: fixed; z-index: 20; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border-top: 1px solid var(--line);
}
.tabbar a {
  display: grid; justify-items: center; gap: 3px; padding: 4px 0;
  font-size: .72rem; font-weight: 600; text-decoration: none; color: var(--muted);
}
.tabbar svg { width: 46px; height: 30px; padding: 4px 11px; border-radius: 999px; transition: background-color .3s, color .3s; }
.tabbar a[aria-current] { color: var(--green-deep); }
.tabbar a[aria-current] svg { background: var(--mint); color: var(--green); }

@media (min-width: 860px) {
  .top__nav { display: flex; }
  .tabbar { display: none; }
  .page { padding-bottom: 80px; }
  .top__bar { height: 72px; }
  .top__hero { padding-top: 22px; min-height: 230px; }
}

/* ------------------------------------------------------------ blocks of a page */

.block { margin-bottom: 36px; animation: rise .6s var(--ease) both; }
.block:nth-child(2) { animation-delay: .06s; }
.block:nth-child(3) { animation-delay: .12s; }
.block:nth-child(4) { animation-delay: .18s; }
.block__h { font-size: 1.5rem; margin-bottom: 14px; }
.block__sub { margin: -6px 0 16px; max-width: 40em; color: var(--body-ink); }
.block__group { margin: 20px 0 10px; font: 600 .78rem/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--clay); }
.block__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.block__row .block__h { margin: 0; }
.block--quiet { text-align: center; padding-top: 4px; }

.empty { display: grid; justify-items: start; gap: 14px; padding: 22px; border-radius: 22px; background: var(--paper); border: 1px solid var(--line); }

.skeleton { display: grid; gap: 14px; }
.skeleton span { height: 132px; border-radius: 24px; background: linear-gradient(100deg, var(--sand) 30%, #FAF0DE 50%, var(--sand) 70%) 0 0 / 220% 100%; animation: shimmer 1.3s linear infinite; }
.skeleton span:first-child { height: 30px; width: 46%; border-radius: 10px; }

/* ------------------------------------------------------------ an agent on your team */

.hires { display: grid; gap: 14px; }
@media (min-width: 760px) { .hires { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.hire, .panel {
  display: grid; gap: 14px; padding: 18px;
  border-radius: 26px;
  background: linear-gradient(180deg, var(--wash), var(--paper) 70%);
  border: 1px solid color-mix(in srgb, var(--tint) 20%, transparent);
  box-shadow: inset 0 1px 0 #fff, 0 22px 40px -32px rgba(70, 45, 10, .55);
}
.hire__head { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.hire__art {
  display: grid; place-items: center; flex: none; width: 62px; height: 62px; border-radius: 20px; background: #fff;
  box-shadow: 0 12px 20px -12px color-mix(in srgb, var(--tint) 70%, transparent);
}
.hire__art img { width: 42px; height: auto; translate: 3px 0; }
.hire__who { flex: 1; min-width: 0; display: grid; }
.hire__who b { font-family: var(--display); font-size: 1.4rem; font-weight: 580; letter-spacing: -.02em; line-height: 1.1; }
.hire__who span { font-size: .88rem; font-weight: 600; color: var(--tint); }
.hire__go { width: 22px; height: 22px; flex: none; color: var(--muted); transition: translate .3s var(--ease); }
.hire__head:hover .hire__go { translate: 4px 0; }
.hire__acts, .panel__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.hire__acts .btn { flex: 1 1 auto; }
.hire__acts:empty { display: none; }
.panel__acts .btn { flex: 1 1 200px; }

.chip {
  justify-self: start; display: inline-flex; align-items: center; gap: 7px;
  padding: .32em .8em; border-radius: 999px;
  font-size: .82rem; font-weight: 600; line-height: 1.3;
}
.chip--on { background: var(--mint); color: var(--green-deep); }
.chip--on i { width: 8px; height: 8px; border-radius: 50%; background: #17A36B; box-shadow: 0 0 0 0 rgba(23, 163, 107, .6); animation: pulse 2s ease-out infinite; }
.chip--trial { background: #FFE9A8; color: #5E4300; }
.chip--paused { background: #FBDDD2; color: #7E2A12; }
.chip--ending { background: var(--sand); color: var(--body-ink); }

.usage__bar { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--tint, var(--green)) 14%, #fff); overflow: hidden; }
.usage__bar span { display: block; height: 100%; width: var(--pct); border-radius: inherit; background: var(--tint, var(--green)); transform-origin: 0 50%; animation: grow .9s var(--ease) both .15s; }
.usage--low .usage__bar span { background: #D9862B; }
.usage--out .usage__bar span { background: var(--clay); }
.usage__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 8px; font-size: .95rem; }
.usage__text b { font-family: var(--display); font-size: 1.3rem; font-weight: 600; }
.usage__text span { margin-left: auto; font-size: .82rem; color: var(--muted); }
.usage--low .usage__text b { color: #A85A08; }
.usage--out .usage__text b { color: var(--clay); }

/* ------------------------------------------------------------ who else you could hire */

.shelf {
  display: grid; gap: 12px;
  grid-auto-flow: column; grid-auto-columns: min(62vw, 220px);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 16px;
  scrollbar-width: none;
}
.shelf::-webkit-scrollbar { display: none; }
@media (min-width: 760px) {
  .shelf { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; }
}

.pick {
  scroll-snap-align: start;
  display: grid; justify-items: start; align-content: start; gap: 2px;
  padding: 16px; border-radius: 22px; text-align: left;
  background: linear-gradient(180deg, var(--wash), var(--paper) 78%);
  border: 1px solid color-mix(in srgb, var(--tint) 20%, transparent);
  transition: translate .35s var(--ease), box-shadow .35s var(--ease);
}
.pick:hover { translate: 0 -4px; box-shadow: 0 22px 30px -24px rgba(70, 45, 10, .6); }
.pick__art { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 10px; border-radius: 18px; background: #fff; box-shadow: 0 10px 18px -12px color-mix(in srgb, var(--tint) 70%, transparent); }
.pick__art img { width: 38px; height: auto; translate: 3px 0; transition: rotate .4s var(--ease), scale .4s var(--ease); }
.pick:hover .pick__art img { rotate: -8deg; scale: 1.1; }
.pick b { font-family: var(--display); font-size: 1.22rem; font-weight: 580; letter-spacing: -.02em; }
.pick__role { font-size: .82rem; font-weight: 600; color: var(--tint); }
.pick__tag { margin: 8px 0 12px; font-size: .9rem; line-height: 1.35; color: var(--body-ink); }
.pick__go { margin-top: auto; padding: .42em 1em; border-radius: 999px; background: var(--tint); color: #fff; font-size: .86rem; font-weight: 600; }

/* ------------------------------------------------------------ one agent's page */

.agent-hero { display: flex; align-items: center; gap: 16px; }
.agent-hero__art { display: grid; place-items: center; flex: none; width: 96px; height: 96px; border-radius: 30px; background: #fff; box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .45); }
.agent-hero__art img { width: 64px; height: auto; translate: 4px 0; animation: bob 4s ease-in-out infinite; }
.agent-hero .hero__title { margin: 0 0 2px; }

.rows { border-radius: 22px; background: var(--paper); border: 1px solid var(--line); overflow: hidden; }
.rows div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 18px; }
.rows div + div { border-top: 1px solid var(--line); }
.rows dt { color: var(--muted); }
.rows dd { font-weight: 600; text-align: right; }
.rows + .block__sub { margin: 14px 0 0; }

.ticklist { display: grid; gap: .55em; }
.ticklist li { position: relative; padding-left: 1.6em; }
.ticklist li::before {
  content: ""; position: absolute; left: .1em; top: .42em; width: .78em; height: .42em;
  border-left: 2.5px solid var(--tint, var(--green)); border-bottom: 2.5px solid var(--tint, var(--green)); rotate: -45deg;
}

/* ------------------------------------------------------------ payments */

.plan { border-radius: 22px; background: var(--paper); border: 1px solid var(--line); overflow: hidden; }
.plan li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.plan li + li { border-top: 1px solid var(--line); }
.plan img { width: 34px; height: auto; flex: none; }
.plan__who { flex: 1; min-width: 0; display: grid; }
.plan__who span { font-size: .85rem; color: var(--muted); }
.plan__amt { font-family: var(--display); font-size: 1.25rem; font-weight: 600; }

.payline { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: .93rem; color: var(--body-ink); }
.payline svg { width: 22px; height: 22px; flex: none; color: var(--green); }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tile {
  display: grid; justify-items: center; gap: 1px; padding: 16px 6px;
  border: 1.5px solid var(--line); border-radius: 20px; background: var(--paper);
  transition: border-color .25s, translate .35s var(--ease);
}
.tile:hover { border-color: var(--ink); translate: 0 -3px; }
.tile b { font-family: var(--display); font-size: clamp(1.4rem, 6vw, 1.9rem); font-weight: 600; letter-spacing: -.02em; }
.tile span { font-size: .78rem; color: var(--muted); }
.tile em { margin-top: 8px; padding: .25em .8em; border-radius: 999px; background: var(--mint); color: var(--green-deep); font-style: normal; font-weight: 600; font-size: .88rem; }

.receipts li { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.receipts__what { flex: 1; min-width: 0; display: grid; }
.receipts__what span { font-size: .85rem; color: var(--muted); }
.receipts__amt { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ help */

.helpcard {
  display: flex; align-items: center; gap: 14px; padding: 18px;
  border-radius: 24px; background: var(--green-deep); color: var(--cream); text-decoration: none;
  box-shadow: 0 22px 36px -26px rgba(8, 58, 42, .9);
  transition: translate .35s var(--ease);
}
.helpcard:hover { translate: 0 -3px; }
.helpcard__icon { display: grid; place-items: center; width: 50px; height: 50px; flex: none; border-radius: 50%; background: var(--green); color: #fff; }
.helpcard__icon svg { width: 26px; height: 26px; }
.helpcard > span:nth-child(2) { flex: 1; display: grid; }
.helpcard b { font-family: var(--display); font-size: 1.3rem; font-weight: 580; }
.helpcard span span { font-size: .9rem; color: #BFE0CF; }
.helpcard > svg { width: 22px; height: 22px; flex: none; }

.tickets { border-radius: 22px; background: var(--paper); border: 1px solid var(--line); overflow: hidden; }
.tickets li + li { border-top: 1px solid var(--line); }
.tickets a { display: flex; align-items: center; gap: 10px; padding: 14px 16px; text-decoration: none; }
.tickets__what { flex: 1; min-width: 0; display: grid; }
.tickets__what b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tickets__what span { font-size: .85rem; color: var(--muted); }
.tickets svg { width: 20px; height: 20px; flex: none; color: var(--muted); }

.faq details { border-bottom: 1.5px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 0; cursor: pointer; list-style: none; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 20px; height: 20px; flex: none; color: var(--green); transition: rotate .35s var(--ease); }
.faq details[open] summary svg { rotate: 45deg; }
.faq details p { padding-bottom: 16px; color: var(--body-ink); }

.thread { display: grid; gap: 12px; margin-bottom: 24px; }
.thread__msg { max-width: 88%; display: grid; gap: 4px; }
.thread__msg p { padding: .7em 1em; border-radius: 18px; white-space: pre-wrap; overflow-wrap: anywhere; }
.thread__msg span { font-size: .78rem; color: var(--muted); }
.thread__msg--you { justify-self: end; justify-items: end; }
.thread__msg--you p { background: var(--bubble-me); border-top-right-radius: 6px; }
.thread__msg--kalki p { background: var(--paper); border: 1px solid var(--line); border-top-left-radius: 6px; }
.reply { display: grid; justify-items: end; }
.reply .field { width: 100%; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chipradio input { position: absolute; opacity: 0; }
.chipradio span, .chipbtn {
  display: inline-block; padding: .5em 1em; border: 1.5px solid var(--line); border-radius: 999px; background: var(--paper);
  font-size: .92rem; font-weight: 600; transition: background-color .25s, color .25s, border-color .25s;
}
.chipradio input:checked + span, .chipbtn.is-on { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.chipradio input:focus-visible + span { outline: 3px solid var(--green); outline-offset: 3px; }

/* ------------------------------------------------------------ you */

.me { display: flex; align-items: center; gap: 16px; }
.me__badge {
  display: grid; place-items: center; flex: none; width: 76px; height: 76px; border-radius: 50%;
  background: var(--marigold); color: var(--ink);
  font-family: var(--display); font-size: 2.2rem; font-weight: 600;
  box-shadow: 0 16px 28px -14px rgba(0, 0, 0, .5);
}
.me .hero__title { margin: 0 0 2px; }
.inline { display: grid; gap: 4px; justify-items: start; }
.inline .field { width: 100%; max-width: 420px; margin-bottom: 10px; }
.acts { display: flex; flex-wrap: wrap; gap: 10px; }
.demo { padding: 18px; border-radius: 22px; border: 2px dashed var(--line); }
.demo .chips { margin: 0; }

/* ------------------------------------------------------------ sheets */

.sheet {
  position: fixed; inset: auto 0 0 0; margin: 0; padding: 0;
  width: 100%; max-width: none; max-height: none;
  border: 0; background: transparent; color: var(--ink); overflow: visible;
}
.sheet::backdrop { background: rgba(27, 23, 18, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fade .3s ease both; }
.sheet__in {
  position: relative; max-height: 92svh; overflow-y: auto; overscroll-behavior: contain;
  padding: 30px var(--gutter) calc(26px + env(safe-area-inset-bottom));
  border-radius: 28px 28px 0 0; background: var(--paper);
  animation: sheet-up .45s var(--ease) both;
}
.sheet__in::before { content: ""; position: absolute; left: 50%; top: 9px; width: 42px; height: 5px; border-radius: 3px; background: var(--line); translate: -50% 0; }
.sheet.is-leaving .sheet__in { animation: sheet-down .26s ease-in both; }
.sheet.is-leaving::backdrop { animation: fade .26s ease reverse both; }
.sheet__x { position: absolute; right: 12px; top: 14px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--sand); z-index: 2; }
.sheet__x svg { width: 18px; height: 18px; }
.sheet__body h2 { font-size: clamp(1.8rem, 7vw, 2.3rem); margin-bottom: 8px; padding-right: 36px; }
.sheet__kicker { font: 600 .8rem/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--clay); margin-bottom: 6px; padding-right: 44px; }
.sheet__who { display: flex; align-items: center; gap: 10px; }
.sheet__who img { width: 34px; height: auto; flex: none; }
.sheet__who .sheet__kicker { margin: 0; }
.sheet__acts { display: grid; gap: 10px; margin-top: 22px; }
.sheet .note { margin-top: 12px; text-align: center; }

@media (min-width: 700px) {
  .sheet { inset: 0; margin: auto; width: min(480px, 92vw); height: fit-content; }
  .sheet__in { border-radius: 28px; padding: 34px 32px 28px; animation-name: sheet-pop; max-height: 88svh; }
  .sheet__in::before { display: none; }
  .sheet.is-leaving .sheet__in { animation-name: sheet-fade; }
}

.offer__art {
  display: grid; place-items: center; width: 104px; height: 104px; margin-bottom: 16px; border-radius: 32px;
  background: var(--wash); box-shadow: 0 18px 28px -16px color-mix(in srgb, var(--tint) 70%, transparent);
}
.offer__art img { width: 70px; height: auto; translate: 4px 0; animation: bob 3.6s ease-in-out infinite; }
.offer .sheet__kicker { color: var(--tint); }
.offer__tag { font-family: var(--display); font-size: 1.3rem; line-height: 1.2; margin-bottom: 10px; }
.offer__blurb { color: var(--body-ink); margin-bottom: 14px; }
.offer__price { margin: 18px 0 14px; padding: 12px 14px; border-radius: 16px; background: var(--cream); font-size: .95rem; }
.offer__price b { font-family: var(--display); font-size: 1.35rem; }
.offer__price em { font-style: normal; font-weight: 600; color: var(--green); }

.pay__what { margin-bottom: 20px; color: var(--body-ink); }
.packs .note { margin: 0 0 16px; }

.packs__list { display: grid; gap: 10px; margin: 16px 0 14px; }
.pack {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px;
  border: 2px solid var(--line); border-radius: 20px; background: var(--paper); cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.pack input { position: absolute; opacity: 0; }
.pack:has(input:checked) { border-color: var(--green); background: #F1FAF5; }
.pack:has(input:focus-visible) { outline: 3px solid var(--green); outline-offset: 3px; }
.pack__n, .pack__p { display: grid; font-family: var(--display); font-size: 1.5rem; font-weight: 600; line-height: 1.1; }
.pack__p { justify-items: end; }
.pack small { font: 500 .8rem var(--body); color: var(--muted); }

.confirm p { color: var(--body-ink); }
.confirm__art img { width: 72px; height: auto; margin-bottom: 8px; }
.choose__list { display: grid; gap: 10px; margin-top: 16px; }
.choose__one { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1.5px solid var(--line); border-radius: 18px; background: var(--paper); text-align: left; }
.choose__one:hover { border-color: var(--ink); }
.choose__one img { width: 36px; height: auto; flex: none; }
.choose__one b { flex: 1; font-family: var(--display); font-size: 1.2rem; }
.choose__one svg { width: 20px; height: 20px; color: var(--muted); }

/* The happy ending: the agent hops, and a few leaves fly. */
.done { text-align: center; padding-top: 6px; }
.done p { color: var(--body-ink); max-width: 24em; margin-inline: auto; }
.done h2 { padding: 0; }
.done__art { position: relative; display: grid; place-items: center; height: 150px; margin-bottom: 8px; }
.done__art img { width: 96px; height: auto; transform-origin: 50% 100%; animation: hop 1.8s var(--ease) infinite; }
.done__art i {
  position: absolute; left: 50%; top: 56%; width: 12px; height: 18px; border-radius: 80% 0 80% 0;
  background: var(--green); opacity: 0; animation: leaf 1.5s var(--ease) both;
}
.done__art i:nth-child(1) { --x: -110px; --y: -70px; --r: -80deg; }
.done__art i:nth-child(2) { --x: 104px; --y: -78px; --r: 70deg; background: #4FA97C; animation-delay: .05s; }
.done__art i:nth-child(3) { --x: -74px; --y: -104px; --r: -30deg; background: var(--marigold); animation-delay: .1s; }
.done__art i:nth-child(4) { --x: 70px; --y: -108px; --r: 40deg; background: #7BC79C; animation-delay: .02s; }
.done__art i:nth-child(5) { --x: -132px; --y: -18px; --r: -120deg; background: var(--marigold); animation-delay: .12s; }
.done__art i:nth-child(6) { --x: 128px; --y: -22px; --r: 110deg; animation-delay: .08s; }
.done__art i:nth-child(7) { --x: -24px; --y: -126px; --r: -10deg; background: #4FA97C; animation-delay: .14s; }
.done__art i:nth-child(8) { --x: 28px; --y: -122px; --r: 16deg; background: var(--clay); animation-delay: .04s; }

/* ------------------------------------------------------------ toasts */

#toasts { position: fixed; z-index: 100; left: 0; right: 0; bottom: calc(var(--tabbar) + 22px + env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
.toast {
  max-width: 420px; padding: 12px 18px; border-radius: 16px;
  background: var(--ink); color: var(--cream); font-size: .94rem; font-weight: 500;
  box-shadow: 0 18px 34px -14px rgba(0, 0, 0, .6);
  animation: rise .4s var(--ease) both;
}
.toast--bad { background: var(--danger); color: #fff; }
.toast.is-leaving { opacity: 0; translate: 0 10px; transition: opacity .35s, translate .35s; }
@media (min-width: 860px) { #toasts { bottom: 28px; } }

/* ------------------------------------------------------------ moving between screens */

::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }
::view-transition-group(*) { animation-duration: .45s; animation-timing-function: var(--ease); }

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

@keyframes spin { to { rotate: 360deg; } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes breathe { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }
@keyframes rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { scale: .86; } to { scale: 1; } }
@keyframes waitpulse { 50% { opacity: .35; scale: .75; } }
@keyframes blink { from { opacity: 1; } to { opacity: 0; } }
@keyframes grow { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes shimmer { to { background-position: -220% 0; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(23, 163, 107, .55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(23, 163, 107, 0); } }
@keyframes shake { 0%, 100% { translate: 0 0; } 20% { translate: -9px 0; } 40% { translate: 8px 0; } 60% { translate: -6px 0; } 80% { translate: 4px 0; } }
@keyframes sheet-up { from { translate: 0 100%; } to { translate: 0 0; } }
@keyframes sheet-down { to { translate: 0 100%; } }
@keyframes sheet-pop { from { opacity: 0; scale: .94; translate: 0 16px; } to { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes sheet-fade { to { opacity: 0; scale: .97; } }
@keyframes hop {
  0%, 46%, 100% { transform: translateY(0) scale(1, 1); }
  14% { transform: translateY(-22%) scale(.95, 1.06); }
  26% { transform: translateY(0) scale(1.07, .93); }
  34% { transform: translateY(-6%) scale(.99, 1.01); }
}
@keyframes leaf {
  0% { opacity: 0; transform: translate(-50%, 0) rotate(0) scale(.4); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), var(--y)) rotate(var(--r)) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; transition-delay: 0s !important;
  }
}