/* A copy of WebApp/styles/app.css (3 October 2026), so the Comrade portal
   looks and moves exactly like the customer app. Change the original first,
   then copy it here again. The portal's own rules are in comrade.css. */

/* 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;
  }
}