/* mobile first: the rules outside a media query lay out a 360px phone; each min-width block adds the wider layout (641px, 761px, 901px, 1081px, 1200px) */
:root {
  --night: #0d1318;
  --night-2: #131b22;
  --night-line: rgba(236, 233, 229, .12);
  --night-dots: rgba(236, 233, 229, .22);
  --paper: #f5f3ef;
  --paper-2: #ece9e5;
  --white: #fff;
  --ink: #171b1f;
  --ink-2: #59616a;
  --ink-3: #8b929a;
  --line: rgba(23, 27, 31, .1);
  --line-2: rgba(23, 27, 31, .2);
  --cream: #ece9e5;
  --cream-2: #a9b0b7;
  --brand: #2b5e7f;
  --brand-2: #234d69;
  --sky: #66b4e8;
  --sky-hover: #86c5ef;
  --sans: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gutter: clamp(20px, 5vw, 72px);
  --max: 1240px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  /* the nav's height at every width: 12px + 44px controls + 12px below 1081px, 14px + 40px buttons + 14px above, plus the 1px border */
  --nav-h: 69px;
  --strip-h: 84px;
}

* { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* the canvas past a short page, and the overscroll below the footer, continue the dark footer; iOS keeps the font sizes in landscape */
html { background: var(--night); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 500; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
i { font-style: normal; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the skip link waits above the page and drops in on focus */
.skip { position: absolute; top: 8px; left: 8px; z-index: 40; padding: 10px 16px; background: var(--cream); color: var(--night); font-size: 15px; font-weight: 500; transform: translateY(-200%); }
.skip:focus { transform: none; }
/* keyboard focus: a 2px ring in the text colour, which meets 3:1 on every background here; a ring inside the element where an outside one would be clipped or leave the screen */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.skip:focus-visible, .bar:focus-visible, .nav__menu summary:focus-visible { outline-offset: -4px; }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.h2 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -.025em; font-weight: 500; }
.lead { font-size: clamp(17px, 1.3vw, 19px); color: var(--ink-2); max-width: 46ch; }

/* buttons: the app's button, a 6px radius and, on the line variants, a 1px border; a <button> drops the browser's own border, so it matches a link */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px;
  font-size: 15px; font-weight: 500; white-space: nowrap;
  border: 0; border-radius: 6px; cursor: pointer;
  transition: background .2s, color .2s, transform .25s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn--lg { height: 54px; padding: 0 26px; font-size: 17px; }
.btn--accent { background: var(--sky); color: var(--night); }
.btn--accent:hover { background: var(--sky-hover); }
.btn--light { background: var(--cream); color: var(--night); }
.btn--light:hover { background: var(--white); }
.btn--line, .btn--line-light { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.btn--line { color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--paper); }
.btn--line-light { color: var(--cream); }
.btn--line-light:hover { background: var(--cream); color: var(--brand); }

/* announcement bar */
.bar {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 9px var(--gutter); background: var(--cream); color: var(--night);
  font-size: 14px; text-align: center;
}
.bar__tag { padding: 1px 8px; background: var(--brand); color: var(--cream); font-size: 13px; font-weight: 500; }
.bar__more { display: none; }
.bar .ico { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.bar:hover .ico { transform: translateX(3px); }

/* nav: brand, the call to action and the menu below 1081px; brand, section links and both buttons above. The brand column can shrink so a narrow phone never scrolls sideways */
.nav {
  position: sticky; top: 0; z-index: 30;
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 8px; align-items: center;
  padding: 12px var(--gutter);
  color: var(--cream);
  background: rgba(13, 19, 24, .78);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.nav.is-scrolled { border-bottom-color: var(--night-line); }
.nav__brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.nav__links { display: none; gap: 30px; font-size: 15px; }
.nav__links a { opacity: .8; transition: opacity .2s; }
.nav__links a:hover { opacity: 1; }
.nav__cta { display: flex; gap: 10px; justify-content: flex-end; }
.nav__cta .btn--line { display: none; }
.nav .btn { height: 44px; padding: 0 14px; }
.nav .btn--line { color: var(--cream); }
.nav .btn--line:hover { background: var(--cream); color: var(--night); }
.nav .btn--ghost { background: transparent; color: var(--cream); }
.nav .btn--ghost:hover { background: rgba(236, 233, 229, .12); }

/* the landing's header: no fill over the paper hero, ink type and small black buttons; a paper blur once the page scrolls */
.nav--light { color: var(--ink); background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; transition: border-color .3s, background .3s; }
.nav--light.is-scrolled { border-bottom-color: var(--line); background: rgba(245, 243, 239, .85); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.nav.nav--light .btn { height: 34px; padding: 0 14px; font-size: 14px; background: var(--ink); color: var(--paper); box-shadow: none; }
.nav.nav--light .btn:hover { background: var(--night); color: var(--paper); }
.nav.nav--light .btn--ghost { background: transparent; color: var(--ink); }
.nav.nav--light .btn--ghost:hover { background: rgba(23, 27, 31, .07); color: var(--ink); }
.nav--light .nav__sheet { background: var(--paper); border-color: var(--line); }
/* at the top the brand is the name; once the page scrolls the K takes its place */
.nav--light .nav__brand { position: relative; }
.nav--light .nav__brand img { position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity .3s; }
.nav--light .nav__brand span { transition: opacity .3s; }
.nav--light.is-scrolled .nav__brand img { opacity: 1; }
.nav--light.is-scrolled .nav__brand span { opacity: 0; }
.nav--light .nav__sheet a { border-bottom-color: var(--line); }
/* the menu: a details element; its sheet drops below the header as a full-width panel. The summary's negative margin lines the icon up with the gutter */
.nav__menu summary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; height: 44px; margin-right: -12px; padding: 0 12px;
  font-size: 15px; cursor: pointer; list-style: none;
  opacity: .85; transition: opacity .2s;
}
.nav__menu summary::-webkit-details-marker { display: none; }
.nav__menu summary:hover, .nav__menu[open] summary { opacity: 1; }
.nav__menu .ico { width: 22px; height: 22px; }
.nav__menu-close, .nav__menu[open] .nav__menu-open { display: none; }
.nav__menu[open] .nav__menu-close { display: block; }
.nav__menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav__sheet {
  position: absolute; top: 100%; left: 0; right: 0;
  display: flex; flex-direction: column;
  max-height: calc(100vh - var(--nav-h)); max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; overscroll-behavior: contain;
  padding: 4px var(--gutter) 16px;
  background: var(--night);
  border-top: 1px solid var(--night-line); border-bottom: 1px solid var(--night-line);
}
.nav__sheet a { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--night-line); font-size: 17px; opacity: .85; transition: opacity .2s; }
.nav__sheet a:hover { opacity: 1; }
.nav__sheet a:last-child { border-bottom: 0; }

/* hero: Harvey's layout, the title on the left, the description and the calls to action on the right, and below them a stage that plays the film behind the app window, which the stage's bottom edge cuts */
.hero {
  position: relative; overflow: hidden;
  margin-top: calc(var(--nav-h) * -1); padding: calc(var(--nav-h) + clamp(56px, 10vh, 112px)) var(--gutter) 0;
  background: var(--paper); color: var(--ink);
}
.hero__copy { position: relative; z-index: 1; max-width: 1680px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: end; }
.hero__title { font-size: clamp(36px, 6vw, 104px); line-height: 1; letter-spacing: -.04em; font-weight: 500; }
.hero__title .w { display: inline-block; white-space: nowrap; opacity: 0; transform: translateY(.3em); filter: blur(8px); animation: word .9s var(--ease) forwards; }
@keyframes word { to { opacity: 1; transform: none; filter: none; } }
.hero__sub { max-width: 26em; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.4; text-wrap: pretty; color: var(--ink); }
.hero__actions { margin-top: 28px; }
/* the e-mail form: the field takes the row, the button keeps its width, and a narrow screen puts the button under the field; a touch target of 44px below 1081px, as the nav */
.lead-form { display: flex; flex-wrap: wrap; gap: 8px; max-width: 30em; }
.lead-form .btn { height: 44px; }
.lead-form__input {
  flex: 1 1 14em; min-width: 0; height: 44px; padding: 0 14px;
  font: inherit; font-size: 16px; color: var(--ink);
  background: var(--white); border: 1px solid var(--ink-2); border-radius: 6px;
}
.lead-form__input::placeholder { color: var(--ink-2); }
.lead-form__input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--night); }
.btn--ink:focus-visible { outline-color: var(--ink); }

/* the stage is wider than the copy, with rounded corners, and the film fills it; lighten lets the stage gradient show wherever a frame is darker */
.hero__stage {
  position: relative; overflow: hidden; max-width: 1680px; margin-top: clamp(48px, 8vh, 96px);
  padding: clamp(24px, 5vw, 80px) clamp(16px, 7vw, 140px) 0; border-radius: 10px 10px 0 0;
  background: radial-gradient(120% 90% at 85% 20%, #1a2e3d 0%, var(--night) 60%);
}
.hero__film { position: absolute; inset: 0; max-width: none; pointer-events: none; mix-blend-mode: lighten; }
.hero__film video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 66% 50%; opacity: .7; }
.hero__film::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .25); }
.hero__app { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; border-radius: 10px 10px 0 0; overflow: hidden; box-shadow: 0 0 0 1px rgba(236, 233, 229, .12), 0 -24px 80px -24px rgba(0, 0, 0, .5); }
.hero__app .kapp { width: 100%; height: 520px; border-radius: 0; box-shadow: none; }
/* the pause button: in the hero's bottom corner, shown only with JS, since only a script pauses the film; it pauses the film, every marquee and the integrations search */
.motion {
  display: none; position: absolute; right: var(--gutter); bottom: 16px; z-index: 2;
  place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--night-line); background: rgba(13, 19, 24, .4); color: var(--cream);
  cursor: pointer; opacity: .7; transition: opacity .2s;
}
.js .motion { display: grid; }
.motion:hover, .motion:focus-visible { opacity: 1; }
.motion .ico { width: 16px; height: 16px; }
.motion__play, .motion[aria-pressed="true"] .motion__pause { display: none; }
.motion[aria-pressed="true"] .motion__play { display: block; }
.motion-paused .strip__track { animation-play-state: paused; }

/* premise: the problem and the answer, two cards, each its text over its picture; side by side from 761px.
   From 761px, with JS and motion, the cards play once as they come into view; otherwise both show finished */
.premise { --bs: .55; background: var(--paper); padding: clamp(80px, 11vw, 150px) var(--gutter); }
.premise__cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.premise__card { --pad: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; overflow: hidden; border-radius: 10px; }
.premise__card--problem { background: var(--paper-2); }
.premise__card--solution { background: radial-gradient(120% 90% at 85% 20%, #1a2e3d 0%, var(--night) 60%); }
.premise__text { padding: var(--pad); }
.premise__art { position: relative; flex: 1 0 380px; overflow: hidden; }
.premise__card--problem .premise__art { background-image: radial-gradient(rgba(23, 27, 31, .14) 1px, transparent 1.2px); background-size: 10px 10px; }

/* the text: the key, the title and the lead; ink on the paper card, cream on the night card */
.premise__key { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--ink-2); }
.premise__num, .about-num { display: inline-grid; place-items: center; flex: none; width: 32px; height: 26px; font-size: 13px; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px var(--line-2); }
.premise__title { margin-top: 20px; max-width: 32ch; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.18; letter-spacing: -.02em; font-weight: 500; color: var(--ink); text-wrap: balance; }
.premise__lead { margin-top: 14px; max-width: 42ch; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.premise__lead em { font-style: normal; color: var(--ink); }
.premise__card--solution .premise__key, .premise__card--solution .premise__lead { color: var(--cream-2); }
.premise__card--solution .premise__title { color: var(--cream); }
.premise__card--solution .premise__num { background: var(--cream); color: var(--night); box-shadow: none; }

/* the loose tools: a 680 by 640 board in the middle of the picture, scaled by --bs, each tool tied to its neighbours by a broken dashed line */
.premise__board { position: absolute; left: 50%; top: 50%; width: 680px; height: 640px; margin: -320px 0 0 -340px; transform: scale(var(--bs)); }
.premise__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.premise__wires line { stroke: var(--ink-3); stroke-width: 1.25; stroke-dasharray: 3 4; stroke-linecap: round; }
.premise__wires circle { fill: var(--paper-2); stroke: var(--ink-3); stroke-width: 1.25; }
.premise__frag { position: absolute; width: 236px; transform: rotate(var(--r)); }
.premise__frag--nf { --r: -4deg; --i: 0; left: 20px; top: 20px; }
.premise__frag--meta { --r: 3deg; --i: 1; left: 440px; top: 0; }
.premise__frag--sheet { --r: -2deg; --i: 2; left: 230px; top: 250px; }
.premise__frag--mail { --r: 2.5deg; --i: 3; left: 10px; top: 510px; }
.premise__frag--chat { --r: -3deg; --i: 4; left: 440px; top: 516px; }
.premise .kchart .ki { display: block; width: 18px; height: 18px; margin: 0; color: var(--k-muted); }
.premise__frag .kchart__head > div:first-child { min-width: 0; }
.premise__frag .kchart__head b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.premise__frag .kbook--sm .kcover { width: 27px; height: 36px; }
.premise__mail { margin-top: 8px; color: var(--k-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.premise__fx {
  display: flex; align-items: center; gap: 8px; height: 24px; margin-top: 10px; padding: 0 8px; border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--k-line); font: 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.premise__fx i { color: var(--k-faint); font-style: italic; }
.premise__sheet {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr); margin-top: 8px;
  border-top: 1px solid var(--k-line); border-left: 1px solid var(--k-line); font-variant-numeric: tabular-nums;
}
.premise__sheet > * { height: 20px; padding: 0 6px; border-right: 1px solid var(--k-line); border-bottom: 1px solid var(--k-line); line-height: 19px; white-space: nowrap; overflow: hidden; }
.premise__sheet i { padding: 0; background: var(--k-well); color: var(--k-faint); font-size: 11px; text-align: center; }
.premise__sheet span:nth-child(3n) { text-align: right; }
.premise__sheet .is-sel { box-shadow: inset 0 0 0 2px var(--k-brand); font-weight: 500; }
.premise__who { display: flex; align-items: center; gap: 8px; }
.premise__who span { margin-left: auto; font-size: 12px; color: var(--k-muted); }
.premise__bubble { margin-top: 10px; padding: 8px 10px; border-radius: 10px 10px 10px 3px; background: var(--k-well); }

/* the app: the site's .kapp from the text's left edge, cut by the card's right and bottom edges; the main column only on a phone */
.premise__win { position: absolute; left: var(--pad); top: 0; width: 440px; height: 560px; }
.premise .premise__kapp { width: 100%; height: 100%; grid-template-rows: 48px minmax(0, 1fr); border-radius: 8px 0 0 0; box-shadow: none; }
.premise .kapp__page { padding: 16px; }
@keyframes premise-drift { to { transform: translate3d(0, -7px, 0) rotate(.6deg); } }

/* marquee strip */
.strip { overflow: hidden; background: var(--paper); color: var(--ink); box-shadow: inset 0 -1px var(--line); }
.strip__track { display: flex; align-items: center; width: max-content; animation: marquee 40s linear infinite; }
.strip__track span { display: flex; align-items: center; gap: 8px; height: var(--strip-h); padding: 0 clamp(28px, 3.5vw, 52px); font-size: 20px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.strip__track img { width: auto; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* sections */
section { padding: clamp(80px, 11vw, 150px) var(--gutter); }
section > * { max-width: var(--max); margin-left: auto; margin-right: auto; }

/* app screens: the Kafka app rebuilt with its production tokens (13px UI text, #333 ink, #e6e6e6 hairlines, #f4f4f4 rails, Phosphor icons); a phone shows the main column only, the sidebar joins from 761px */
.kapp {
  --k-ink: #333; --k-nav: #484848; --k-muted: #666; --k-faint: #999;
  --k-line: #e6e6e6; --k-hair: rgba(230, 230, 230, .6); --k-well: #f4f4f4; --k-on: #e1e1e1;
  --k-ok: oklch(.55 .14 145); --k-warn: oklch(.55 .16 70); --k-bad: oklch(.55 .2 27); --k-info: oklch(.55 .18 240); --k-brand: #2b5e7f;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 48px minmax(0, 1fr);
  width: 1040px; height: 680px; overflow: hidden;
  background: #fff; color: var(--k-ink); text-align: left;
  font-size: 13px; line-height: 18px; font-weight: 400;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(23, 27, 31, .1), 0 32px 64px -32px rgba(13, 19, 24, .35);
  -webkit-user-select: none; user-select: none;
}
.kapp b { font-weight: 500; }
.ki { width: 18px; height: 18px; flex: none; fill: currentColor; }

.kapp__top {
  grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; align-items: center; gap: 8px;
  padding: 0 16px; background: var(--k-well); border-bottom: 1px solid var(--k-line);
}
.kapp__ws, .kapp__tools { display: flex; align-items: center; gap: 4px; }
.kapp__tools { justify-content: flex-end; color: var(--k-nav); }
.kapp__switch { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; font-weight: 500; line-height: 20px; white-space: nowrap; }
.kapp__switch .ki { width: 12px; height: 12px; color: var(--k-muted); }
.kmark, .kface {
  display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 4px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--k-line); font-size: 11px; font-weight: 400; color: var(--k-muted);
}
.kface { border-radius: 50%; }
.kapp__search {
  display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border-radius: 6px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--k-line); color: var(--k-faint); white-space: nowrap; overflow: hidden;
}
.kapp__search .ki { width: 16px; height: 16px; }
.kapp__search kbd { margin-left: auto; padding: 1px 4px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--k-line); font: 11px/16px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--k-muted); }
.kicon { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 6px; color: var(--k-muted); }
.kicon .ki { width: 16px; height: 16px; }
.kapp__top .kicon { color: inherit; }
.kicon--bell { position: relative; }
.kicon__badge { position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; background: var(--k-ink); color: #fff; font-style: normal; font-size: 9px; font-weight: 500; line-height: 15px; text-align: center; }
.kapp__top .kicon .ki { width: 20px; height: 20px; }

.kapp__side { flex-direction: column; min-height: 0; background: var(--k-well); border-right: 1px solid var(--k-line); }
.kapp__side, .kapp__top > :not(.kapp__ws) { display: none; }
.kapp__nav { flex: 1; padding: 8px 8px 4px; }
.kapp__group { display: flex; flex-direction: column; gap: 1px; }
.kapp__group + .kapp__group { margin-top: 16px; }
.kapp__group p { padding: 4px 8px; font-weight: 500; color: var(--k-muted); }
.kapp__item { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px; border-radius: 4px; color: var(--k-nav); letter-spacing: -.025em; white-space: nowrap; }
.kapp__item .ki { opacity: .9; }
.kapp__item--sub { padding-left: 24px; }
.kapp__item--sub .ki { width: 14px; height: 14px; opacity: .6; }
.kapp__item.is-on { background: var(--k-on); color: var(--k-ink); font-weight: 500; }
.kapp__foot { padding: 8px; border-top: 1px solid var(--k-line); }
.kapp__foot .ki { width: 16px; height: 16px; }

.kapp__main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.kapp__title { display: flex; align-items: center; gap: 8px; flex: none; height: 48px; padding: 0 24px; border-bottom: 1px solid var(--k-line); font-size: 15px; line-height: 20px; font-weight: 500; letter-spacing: -.025em; }
.kapp__title .kbtn { margin-left: auto; letter-spacing: 0; }
.kapp__page { display: flex; flex-direction: column; gap: 16px; min-height: 0; padding: 16px 24px 24px; }

.kstrip { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: none; height: 50px; padding: 0 16px; border: 1px solid var(--k-line); border-radius: 8px; }
.kstrip > span { display: flex; align-items: center; gap: 8px; }
.kbtn { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 32px; padding: 1px 12px 0; border-radius: 6px; font-weight: 500; line-height: 16px; white-space: nowrap; }
.kbtn--line { padding: 1px 10px 0; box-shadow: inset 0 0 0 1px var(--k-line); }
.kbtn--line .ki { width: 14px; height: 14px; opacity: .8; }
.kbtn--dark { background: var(--k-ink); color: #fff; }
.kbtn--dark .ki { width: 16px; height: 16px; }
.kbtn--wide { justify-content: center; width: 100%; height: 40px; }
.kview { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; font-weight: 500; white-space: nowrap; }
.kview .ki { width: 16px; height: 16px; color: var(--k-muted); }
.kview .ki:last-child { width: 12px; height: 12px; }
.kview i { font-weight: 400; color: var(--k-muted); }
.kicon--search .ki { width: 18px; height: 18px; }
.kicon--dark { background: var(--k-ink); color: #fff; }
.kicon--dark .ki { width: 18px; height: 18px; }
.kicon.is-off { opacity: .45; }

.ktable { flex: none; border: 1px solid var(--k-line); border-radius: 8px; overflow: hidden; }
.ktable table { width: 100%; border-collapse: collapse; }
.ktable th, .ktable td { height: 48px; padding: 0 8px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--k-line); }
.ktable th { font-weight: 400; color: var(--k-muted); }
.ktable tr:last-child td { border-bottom: 0; }
.ktable th:first-child, .ktable td:first-child { padding-left: 24px; }
.ktable th:last-child, .ktable td:last-child { padding-right: 24px; }
.ktable .kcheck { width: 48px; }
.ktable .kcheck + * { border-right: 1px solid rgba(230, 230, 230, .6); }
.ktable--tall td { height: 80px; }
.kbox { display: block; width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--k-faint); }
.kmuted { color: var(--k-muted); }
.knum { font-weight: 500; }
.kfoot { align-self: flex-end; font-size: 11px; line-height: 16px; color: var(--k-muted); font-variant-numeric: tabular-nums; }

.kpill { display: inline-flex; align-items: center; height: 20px; padding: 1px 6px 0; border-radius: 4px; font-size: 12px; line-height: 1; white-space: nowrap; }
.kpill--muted { background: var(--k-well); color: var(--k-muted); }
.kpill--ok { background: oklch(.55 .14 145 / 15%); color: var(--k-ok); }
.kpill--warn { background: oklch(.75 .16 70 / 15%); color: var(--k-warn); }
.kpill--bad { background: oklch(.55 .2 27 / 15%); color: var(--k-bad); }
.kpill--info { background: oklch(.55 .18 240 / 15%); color: var(--k-info); }
.kpill--brand { background: rgba(43, 94, 127, .14); color: var(--k-brand); }
.kpills { display: flex; gap: 4px; }
.kact { display: inline-flex; align-items: center; height: 28px; padding: 0 8px; border-radius: 6px; font-weight: 500; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--k-line); }
.kact--ok { color: var(--k-ok); box-shadow: inset 0 0 0 1px oklch(.55 .14 145 / 50%); }
.kact--warn { color: var(--k-warn); box-shadow: inset 0 0 0 1px oklch(.75 .16 70 / 50%); }
.kacts { display: flex; gap: 2px; margin: 0 -8px; }

.kbook { display: flex; align-items: center; gap: 16px; font-weight: 500; line-height: 20px; }
.kbook--sm { gap: 12px; }
.kcover { display: flex; justify-content: center; flex: none; width: 48px; height: 64px; border-radius: 4px; background: var(--k-well); overflow: hidden; }
.kbook--sm .kcover { width: 30px; height: 40px; border-radius: 3px; }
.kcover i { width: 67%; flex: none; }
.kbook--sm .kcover i { width: 67%; }
.kcover img { width: 100%; height: 100%; object-fit: cover; }
img.kmark, img.kface { object-fit: cover; box-shadow: none; }
.kcover--item { align-items: center; color: var(--k-muted); }
.kcover--item .ki { width: 16px; height: 16px; }
.kc1 { background: linear-gradient(#1d4e5a 0 38%, #efe6d2 38% 60%, #1d4e5a 60%); }
.kc2 { background: #6d1f2c; box-shadow: inset 0 0 0 3px #6d1f2c, inset 0 0 0 4px #c9a55a; }
.kc3 { background: repeating-linear-gradient(0deg, #d49a2a 0 6px, #2d2a26 6px 7px); }
.kc4 { background: radial-gradient(circle at 50% 38%, #e8d9a8 0 26%, transparent 27%), #2f6b4a; }
.kc5 { background: linear-gradient(135deg, #ece4d0 0 52%, #1b1b1b 52% 60%, #ece4d0 60%); }
.kc6 { background: linear-gradient(#a4432a 0 64%, #e3c48f 64%); }
.kc7 { background: linear-gradient(#c8372d, #c8372d) 50% 34% / 44% 30% no-repeat, #262626; }
.kc8 { background: linear-gradient(90deg, #22386b 0 58%, #efe6d2 58% 72%, #22386b 72%); }
.kwho { display: flex; align-items: center; gap: 12px; }
.kwho .kface { width: 28px; height: 28px; background: var(--k-well); box-shadow: none; }
.kscope { display: flex; gap: 8px; flex: none; }
.kscope span { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--k-line); font-weight: 500; white-space: nowrap; }
.kscope span.is-on { background: var(--k-well); box-shadow: none; }
.kscope i { font-weight: 400; color: var(--k-muted); }
.kfield { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--k-line); color: var(--k-faint); white-space: nowrap; }
.kfield .ki { width: 16px; height: 16px; }

/* stats: the bar above a list */
.kstats { display: flex; flex: none; padding: 16px 0; border: 1px solid var(--k-line); border-radius: 8px; }
.kstats > span { display: flex; flex-direction: column; gap: 4px; padding: 0 24px; border-right: 1px solid var(--k-line); white-space: nowrap; }
.kstats > span:last-child { border-right: 0; }
.kstats i { font-size: 11px; line-height: 16px; color: var(--k-muted); }
.kstats b { font-size: 20px; line-height: 1.2; letter-spacing: -.01em; }

/* Início: the greeting with the assistant, the quiet row and the board. The board reads its own width (khome), each row its widget's (kwid):
   P and M take half the board from 560px and P a quarter from 900px; a narrow widget drops the sales, the change, then Repor */
.khome { container: khome / inline-size; }
.kwelcome { display: flex; flex-direction: column; align-items: center; flex: none; padding: 16px 0 8px; text-align: center; }
.kgreet { font-size: 24px; line-height: 28px; font-weight: 500; letter-spacing: -.02em; }
.kask { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 672px; height: 44px; margin-top: 16px; padding: 0 6px 0 12px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--k-line); color: var(--k-faint); text-align: left; }
.kask > .ki { width: 16px; height: 16px; color: var(--k-muted); }
.kask > span:not(.kask__send) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kask__send { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: rgba(43, 94, 127, .3); color: #fff; }
.kask__send .ki { width: 16px; height: 16px; }
.kprompts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.kprompts span { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--k-line); font-size: 12px; white-space: nowrap; }
.kprompts span:nth-child(n+3) { display: none; }
.kquick { display: flex; align-items: center; justify-content: flex-end; gap: 4px; flex: none; margin-bottom: -4px; }
.kghost { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border-radius: 6px; font-weight: 500; white-space: nowrap; }
.kghost .ki { width: 16px; height: 16px; color: var(--k-muted); }
.kghost span { display: none; }
.kquick__rule { width: 1px; height: 16px; margin: 0 4px; background: var(--k-line); }
.kboard { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; flex: none; }
.kwid { container: kwid / inline-size; grid-column: span 12; min-width: 0; border: 1px solid var(--k-line); border-radius: 8px; overflow: hidden; }
.kwid__head { display: flex; flex-direction: column; padding: 6px 16px; border-bottom: 1px solid var(--k-hair); }
.kwid__head > b { display: block; font-size: 14px; line-height: 28px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kwid__period, .kwid__fixed { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; height: 24px; font-size: 11px; line-height: 16px; color: var(--k-muted); white-space: nowrap; }
.kwid__period { margin-left: -8px; padding: 0 8px; border-radius: 6px; }
.kwid__period .ki { width: 12px; height: 12px; }
/* a row: the tile or cover, the title over its note, then its figures; the overdue note is red, the stale one amber */
.klines > * + * { border-top: 1px solid var(--k-hair); }
.klines--two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--k-hair); }
.klines--two > * { background: #fff; }
.klines--two > * + * { border-top: 0; }
.kline { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px; }
.kwid--p .kline { gap: 8px; }
.kline > .kcover { width: 32px; height: 48px; border-radius: 3px; }
.kline__text { flex: 1; min-width: 0; }
.kline__text b, .kline__text i { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kline__text i { font-size: 11px; line-height: 16px; color: var(--k-muted); }
.kline__text .is-warn { color: var(--k-warn); }
.kline__text .is-bad { color: var(--k-bad); }
.kline__fig { flex: none; font-weight: 500; white-space: nowrap; }
.kline__fig--col { width: 56px; }
.kline__delta { display: none; flex: none; width: 56px; }
.kline__meta { display: none; flex: none; width: 84px; font-size: 11px; line-height: 16px; color: var(--k-muted); white-space: nowrap; }
.kline .kact { display: none; }
.kline__go { display: inline-grid; place-items: center; flex: none; color: var(--k-faint); }
.kline__go .ki { width: 16px; height: 16px; }
.krise { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; line-height: 16px; font-weight: 500; color: var(--k-ok); white-space: nowrap; }
.krise .ki { width: 9px; height: 9px; }
.ktile { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 4px; overflow: hidden; }
.ktile .ki { width: 16px; height: 16px; }
.ktile img { width: 100%; height: 100%; }
.ktile--ops { background: oklch(.93 .034 264); color: oklch(.4 .102 264); }
.ktile--fis { background: oklch(.93 .034 290); color: oklch(.4 .102 290); }
.ktile--fin { background: oklch(.93 .034 145); color: oklch(.4 .102 145); }
.ktile--bad { background: oklch(.55 .2 27 / 12%); color: var(--k-bad); }
.ktile--initials { background: var(--k-well); color: var(--k-muted); font-size: 11px; font-weight: 500; }
/* the totals: a cell per fact, or one sum over a bar per category, each bar scaled to the largest */
.kcells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--k-hair); border-bottom: 1px solid var(--k-hair); }
.kcells > span { min-width: 0; padding: 10px 16px; background: #fff; }
.kcells i { display: block; font-size: 12px; line-height: 16px; color: var(--k-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kcells b { display: block; margin-top: 2px; font-size: 16px; line-height: 22px; white-space: nowrap; }
.ksum { padding: 12px 16px 4px; }
.ksum > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.ksum b { font-size: 20px; line-height: 24px; letter-spacing: -.01em; white-space: nowrap; }
.ksum p { font-size: 11px; line-height: 16px; color: var(--k-muted); }
.kbars { padding: 4px 0; }
.kbars > span { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 16px; }
.kbars__label { flex: none; width: 36%; max-width: 168px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kbar { flex: 1; min-width: 0; height: 8px; border-radius: 3px; background: var(--k-well); overflow: hidden; }
.kbar i { display: block; height: 100%; border-radius: 3px; background: var(--k-brand); }
.kbars__value { flex: none; width: 92px; white-space: nowrap; }
.kbars .kline__go { display: none; }
@container khome (min-width: 560px) {
  .kprompts span:nth-child(n+3) { display: inline-flex; }
  .kghost span { display: inline; }
  .kwid--p, .kwid--m { grid-column: span 6; }
}
@container khome (min-width: 900px) { .kwid--p { grid-column: span 3; } }
@container kwid (min-width: 320px) { .kline .kact { display: inline-flex; } }
@container kwid (min-width: 360px) { .kbars .kline__go { display: inline-grid; } .kline__delta { display: flex; } }
@container kwid (min-width: 460px) { .kline__meta { display: block; } }
@container kwid (min-width: 640px) { .klines--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* PDV: the register takes the whole screen */
.kapp--pos { grid-template-columns: minmax(0, 1fr) 320px; width: 780px; }
.kapp--pos .kapp__top { grid-template-columns: 1fr auto; }
.kpos__sale { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 16px 24px; }
.kpos__sale .kfield { height: 40px; font-size: 13px; }
.kpos__sale .kfield .ki { width: 20px; height: 20px; color: var(--k-ink); }
.kqty { display: inline-flex; align-items: center; gap: 10px; height: 28px; padding: 0 4px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--k-line); font-variant-numeric: tabular-nums; }
.kqty i { display: inline-grid; place-items: center; width: 20px; color: var(--k-muted); }
.kpos__pay { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 20px; background: var(--k-well); border-left: 1px solid var(--k-line); }
.kpos__pay dl { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin: 0; }
.kpos__pay dt { color: var(--k-muted); }
.kpos__pay dd { margin: 0; text-align: right; }
.kpos__total { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--k-line); border-bottom: 1px solid var(--k-line); }
.kpos__total b { font-size: 28px; line-height: 1.15; letter-spacing: -.02em; }
.kpay { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kpay span { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--k-line); font-weight: 500; }
.kpay span.is-on { box-shadow: inset 0 0 0 1.5px var(--k-ink); }
.kpay .ki { width: 18px; height: 18px; color: var(--k-muted); }
.kpos__who { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--k-line); }
.kpos__who .ki { color: var(--k-muted); }
.kpos__who > span:nth-child(2) { flex: 1; }

/* Configurações: the settings shell replaces the app frame. The exit sits above the menu card (the workspace, Buscar, three groups),
   the page is a panel under a title band; a phone shows the panel only, the exit and the menu join from 761px */
.kapp--settings { display: block; padding: 24px; }
.kset { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; align-items: start; }
.kset > .kicon { margin-bottom: 16px; }
.kset > .kicon .ki { width: 20px; height: 20px; }
.kset__nav { border: 1px solid var(--k-line); border-radius: 8px; overflow: hidden; }
.kset__nav, .kset > .kicon { display: none; }
.kset__who, .kset__band { background: #f9f9f9; border-bottom: 1px solid rgba(230, 230, 230, .7); }
.kset__who { display: flex; align-items: center; gap: 16px; padding: 16px; }
.kset__who .kmark { width: 48px; height: 48px; border-radius: 6px; }
.kset__who > span { min-width: 0; }
.kset__who b, .kset__who i { display: block; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kset__who i { font-size: 11px; line-height: 16px; color: var(--k-muted); }
.kset__list { padding: 16px; }
.kset__search { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border-radius: 6px; background: var(--k-well); color: var(--k-faint); }
.kset__search .ki { width: 16px; height: 16px; }
.kset__groups { margin-top: 16px; }
.kset__groups hr { margin: 8px 0; border: 0; border-top: 1px solid var(--k-hair); }
.kset__group { display: flex; flex-direction: column; gap: 1px; }
.kset__item { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border-radius: 4px; color: var(--k-muted); white-space: nowrap; }
.kset__item .ki { width: 16px; height: 16px; opacity: .8; }
.kset__item.is-on { background: var(--k-well); color: var(--k-ink); font-weight: 500; }
.kset__item.is-on .ki { opacity: 1; }
.kset__panel { min-width: 0; max-width: 768px; border: 1px solid var(--k-line); border-radius: 8px; overflow: hidden; }
.kset__band { padding: 16px 24px; }
.kset__band h4 { margin: 0; font-size: 20px; line-height: 1.2; font-weight: 500; }
.kset__band p { margin-top: 4px; color: var(--k-muted); }
.kset__body { display: flex; flex-direction: column; gap: 48px; padding: 24px; }
.kset__body h5 { margin: 0 0 16px; font-size: 13px; line-height: 18px; font-weight: 600; }
/* the tables reach the panel's edges, the rows on hairlines */
.kset__body .ktable { margin: 0 -24px; border: 0; border-radius: 0; }
.kset__body .ktable td:last-child { text-align: right; }
.kset__body .kwho { gap: 8px; font-weight: 500; }
.kset__body .kwho .kface { width: 24px; height: 24px; font-size: 11px; }
.kset__members { display: flex; flex-direction: column; gap: 4px; }
.kset__role { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; width: 160px; height: 32px; padding: 0 8px; border-radius: 6px; background: var(--k-well); }
.kset__role .ki { width: 16px; height: 16px; color: var(--k-faint); }
.kset__add { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; height: 28px; font-weight: 500; }
.kset__add .ki { width: 12px; height: 12px; }
.kset__links { display: inline-flex; gap: 16px; font-weight: 500; }

/* the journey's Consignação: one card in a narrow window, so the crop keeps the balances in view */
.kapp--narrow { width: 640px; }
.kapp--narrow .kapp__top { grid-template-columns: auto minmax(0, 1fr) auto; }

/* decisions: three question tabs over one panel; with JS the selected tab's bar fills and then selects the next, and the track slides each scene in over its picture */
.decisions { background: var(--paper); }
.decisions__stage { margin-top: clamp(40px, 6vw, 80px); }
.decisions__tabs { display: grid; gap: 20px; }
.decisions__tab { position: relative; display: block; width: 100%; padding: 18px 0 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink-3); }
.decisions__bar { position: absolute; top: 0; left: 0; right: 0; height: 2px; overflow: hidden; background: var(--line-2); }
.decisions__fill { position: absolute; inset: 0; background: var(--brand); transform-origin: left; transform: scaleX(0); }
.decisions__tab[aria-selected="true"] .decisions__fill { transform: scaleX(1); }
.js .decisions__tab[aria-selected="true"] .decisions__fill { transform: scaleX(0); animation: decisions-fill var(--dur) linear forwards; }
.js .decisions__stage.is-paused .decisions__fill, .js .decisions__stage.is-idle .decisions__fill { animation-play-state: paused; }
@keyframes decisions-fill { to { transform: scaleX(1); } }
.decisions__team { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; transition: color .3s; }
.decisions__team::before { content: ""; width: 7px; height: 7px; background: currentColor; }
.decisions__question { display: block; margin-top: 10px; font-size: clamp(20px, 1.85vw, 26px); line-height: 1.2; letter-spacing: -.02em; font-weight: 500; transition: color .3s; }
.decisions__text { display: block; margin-top: 10px; font-size: 15px; color: var(--ink); transition: opacity .4s, transform .7s var(--ease-out); }
.decisions__text span { display: block; max-width: 40ch; }
.decisions__tab:hover .decisions__question { color: var(--ink-2); }
.decisions__tab[aria-selected="true"] .decisions__team { color: var(--brand); }
.decisions__tab[aria-selected="true"] .decisions__question { color: var(--ink); }
.js .decisions__tab:not([aria-selected="true"]) .decisions__text { display: none; }

/* each picture is cut to 2000x968 and covers its slide; it drifts against the track */
.decisions__panel { position: relative; overflow: hidden; margin-top: 24px; background: var(--paper-2); }
.decisions__track { display: flex; transition: transform 1s var(--ease-out); }
.decisions__slide { position: relative; overflow: hidden; flex: 0 0 100%; display: grid; align-content: start; gap: 12px; min-height: 420px; padding: 16px 16px 76px; }
.decisions__art { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.08) translateX(var(--drift, 0)); transition: transform 1.1s var(--ease-out); }
.decisions__art::after { content: ""; position: absolute; inset: 0; background: rgba(13, 19, 24, .12); }
.decisions__slide .kchart { position: relative; }
.decisions__slide .kchart--main { width: 100%; max-width: 560px; }
.decisions__slide .kchart--side { justify-self: end; width: min(280px, 88%); opacity: 0; transform: translateX(48px); transition: opacity .45s, transform .9s var(--ease-out); }
.decisions__slide.is-on .kchart--side { opacity: 1; transform: none; transition-delay: .55s; }
.decisions__slide.is-on .kchart--side.is-waiting { opacity: 0; transform: translateX(48px); transition-delay: 0s; }

/* the note and the credit: two chips on the picture's bottom-right corner, in the ink the slide's data-corner sets */
.decisions__note { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: grid; justify-items: end; gap: 4px; max-width: calc(100% - 24px); pointer-events: none; }
.decisions__note span {
  padding: 3px 8px; border-radius: 4px; font-size: 12px; line-height: 16px; text-align: right;
  color: var(--note-ink, rgba(255, 255, 255, .9)); background: var(--note-halo, rgba(13, 19, 24, .45));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: color .8s var(--ease-out), background .8s var(--ease-out), opacity .25s;
}
.decisions__note .decisions__credit.is-swapping { opacity: 0; }

/* the scenes' app cards, on the .kapp tokens */
.kchart {
  --k-ink: #333; --k-muted: #666; --k-faint: #999; --k-line: #e6e6e6; --k-well: #f4f4f4;
  --k-warn: oklch(.62 .15 65); --k-brand: #2b5e7f;
  --t1: #171b1f; --t2: #2b5e7f; --t3: #66b4e8; --t4: #a9b0b7; --t5: #d6d2cc;
  z-index: 1; padding: 14px 16px 16px; background: #fff; color: var(--k-ink); font-size: 13px; line-height: 18px; text-align: left;
  border-radius: 10px; box-shadow: 0 0 0 1px rgba(23, 27, 31, .1), 0 28px 56px -28px rgba(13, 19, 24, .4);
  -webkit-user-select: none; user-select: none;
}
.kchart b { font-weight: 500; }
.kchart__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.kchart__head span { display: block; color: var(--k-muted); }
.kchart__head .kpill { display: inline-flex; flex: none; }
.kchart__big { margin-top: 10px; font-size: 26px; line-height: 30px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kchart__sub { color: var(--k-muted); }
.kchart svg { display: block; width: 100%; height: auto; overflow: visible; margin-top: 14px; }
.kchart text { font: 10px var(--sans); fill: var(--k-faint); }
.kchart text.is-now { fill: var(--k-ink); font-weight: 500; }
.krows { display: grid; margin-top: 10px; }
.krows li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 8px; height: 28px; padding: 0 6px; margin: 0 -6px; border-radius: 4px; cursor: default; }
.krows li.is-hl { background: var(--k-well); }
.krows li i { width: 8px; height: 8px; border-radius: 2px; }
.krows li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.krows li em { font-style: normal; color: var(--k-muted); font-variant-numeric: tabular-nums; }
.krows li.krows__total { grid-template-columns: minmax(0, 1fr) auto; margin-top: 4px; border-top: 1px solid var(--k-line); border-radius: 0; }
.krows li.krows__total em { color: var(--k-ink); font-weight: 500; }
.kfacts { display: grid; margin-top: 8px; }
.kfacts span { display: flex; justify-content: space-between; align-items: center; height: 28px; border-bottom: 1px solid var(--k-line); color: var(--k-muted); }
.kfacts span:last-child { border-bottom: 0; }
.kfacts b { color: var(--k-ink); font-variant-numeric: tabular-nums; }
.klegend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 12px; color: var(--k-muted); font-size: 12px; }
.klegend span { display: inline-flex; align-items: center; gap: 6px; }
.klegend i { width: 8px; height: 8px; border-radius: 2px; }
.ktip {
  position: absolute; z-index: 3; left: 0; top: 0; min-width: 132px; padding: 8px 10px; pointer-events: none;
  background: var(--night); color: var(--cream); font-size: 12px; line-height: 16px; border-radius: 6px;
  opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s;
}
.ktip.is-on { opacity: 1; transform: none; }
.ktip b { display: block; margin-bottom: 4px; color: #fff; }
.ktip span { display: flex; justify-content: space-between; gap: 16px; color: var(--cream-2); }
.ktip span i { color: var(--cream); font-variant-numeric: tabular-nums; }
/* the cursor tag: who on the team is looking */
.ctag { position: absolute; z-index: 2; display: flex; align-items: flex-start; pointer-events: none; opacity: 0; transform: translate(-6px, 8px); transition: opacity .35s var(--ease-out), transform .5s var(--ease-out); }
.ctag.is-on { opacity: 1; transform: none; }
.ctag svg { width: 16px; height: 16px; flex: none; }
.ctag span {
  margin: 12px 0 0 -2px; padding: 3px 10px 3px 8px; font-size: 12px; font-weight: 500; white-space: nowrap;
  background: var(--sky); color: var(--night); border-radius: 4px;
}
/* over an app mock the visitor's pointer becomes the teammate's cursor */
.ctag--follow { position: fixed; left: 0; top: 0; z-index: 30; transition: opacity .15s var(--ease-out); }
.ctag--follow path { fill: var(--tag, var(--sky)); }
.ctag--follow span { background: var(--tag, var(--sky)); }
.is-pointing, .is-pointing * { cursor: none !important; }
.is-pointing .ctag:not(.ctag--follow) { opacity: 0; }
/* costs: stacked columns grow from the baseline one after another */
.kcol { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform .7s var(--ease-out), opacity .2s; }
.is-run .kcol { transform: none; }
.kcols.is-focus .kcol:not(.is-hl) { opacity: .3; }
/* spotlight: titles race month by month */
.krace { position: relative; margin-top: 14px; }
.krace__row { position: absolute; left: 0; right: 0; display: grid; grid-template-columns: 104px minmax(0, 1fr) 52px; align-items: center; gap: 8px; height: 28px; transition: transform .6s var(--ease); }
.krace__row > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.krace__track { height: 16px; }
.krace__bar { height: 100%; width: 0; border-radius: 0 3px 3px 0; transition: width .6s var(--ease), background .3s; }
.krace__row:hover .krace__bar { filter: brightness(1.12); }
.krace__val { text-align: right; font-variant-numeric: tabular-nums; color: var(--k-muted); }
.trend-up { background: var(--t3); }
.trend-flat { background: var(--t2); }
.trend-down { background: var(--k-warn); }
.kmonths { display: flex; gap: 2px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--k-line); }
.kmonths button { flex: 1; height: 26px; border: 0; border-radius: 4px; background: none; color: var(--k-faint); font-size: 12px; cursor: pointer; }
.kmonths button:hover { background: var(--k-well); color: var(--k-ink); }
.kmonths button[aria-pressed="true"] { background: var(--k-well); color: var(--k-ink); font-weight: 500; }
/* fair: six boxes of 40 fill cell by cell */
.kcrates { display: grid; grid-template-columns: repeat(2, auto); justify-content: space-between; gap: 10px; margin-top: 16px; }
.kcrate { display: grid; grid-template-columns: repeat(8, 11px); gap: 3px; padding: 6px; border: 1px dashed #d4d4d4; border-radius: 3px; }
.kcell { width: 11px; height: 11px; border-radius: 2px; transform: scale(0); transition: opacity .2s; }
.is-run .kcell { animation: kcell-pop .35s var(--ease-out) forwards; animation-delay: calc(var(--i) * 6ms + 350ms); }
.kcrates.is-focus .kcell:not(.is-hl) { opacity: .16; }
@keyframes kcell-pop { to { transform: scale(1); } }

@media (min-width: 641px) {
  .kcrates { grid-template-columns: repeat(3, auto); }
  .krace__row { grid-template-columns: 150px minmax(0, 1fr) 52px; }
}
/* from 1081px the questions sit in one row, each on one line, and the cards float on a 600px picture */
@media (min-width: 1081px) {
  .decisions__tabs { display: flex; align-items: flex-start; gap: clamp(28px, 3vw, 48px); }
  .decisions__tab { flex: 1 1 0; min-width: max-content; }
  .decisions__question { white-space: nowrap; }
  .decisions__text { width: 0; min-width: 100%; }
  .js .decisions__tab:not([aria-selected="true"]) .decisions__text { display: block; opacity: 0; transform: translateX(-12px); }
  .js .decisions__tab[aria-selected="true"] .decisions__text { transition-delay: .15s; }
  .decisions__panel { margin-top: 28px; }
  .decisions__slide { display: block; height: 600px; padding: 0; }
  .decisions__slide .kchart { position: absolute; }
  .decisions__slide .kchart--main { left: calc(50% - 470px); top: 9%; width: 460px; max-width: none; }
  .decisions__slide .kchart--side { left: calc(50% + 60px); top: 26%; width: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  .decisions__text, .decisions__note span, .decisions__art, .decisions__track, .decisions__slide .kchart--side, .kcol, .krace__row, .krace__bar, .ctag { transition: none !important; }
  .is-run .kcell { animation: none; transform: none; }
}

/* journey: an accordion of steps beside one night panel; with JS one step opens at a time, its rule fills and then opens the next, and the panel crossfades to a close crop of its screen */
.journey { background: var(--paper); }
.journey__title, .about-section__head { margin-bottom: clamp(40px, 5vw, 64px); }
.journey__body { display: grid; gap: 40px; max-width: var(--max); margin: 0 auto; }
.journey__item { position: relative; padding-bottom: 8px; }
.journey__head {
  position: relative; display: block; width: 100%; padding: 22px 0 14px; border: 0; background: none; cursor: pointer;
  text-align: left; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.2; letter-spacing: -.015em; color: var(--ink-2); transition: color .25s;
}
.journey__head:hover, .journey__item.is-open .journey__head { color: var(--ink); }
.journey__bar { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line-2); }
.journey__fill { position: absolute; left: 0; right: 0; top: -.5px; height: 2px; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.journey__item.is-open .journey__fill { transform: scaleX(1); }
.js .journey__item.is-open .journey__fill { transform: scaleX(0); animation: journey-fill var(--journey-dur, 8s) linear forwards; }
.js .journey__body.is-idle .journey__fill, .js .journey__body.is-hovered .journey__fill, .js .journey__body.is-focused .journey__fill, .motion-paused .journey__fill { animation-play-state: paused; }
.js .journey__body.is-held .journey__item.is-open .journey__fill { animation: none; transform: scaleX(1); }
@keyframes journey-fill { to { transform: scaleX(1); } }
.journey__lead { display: grid; grid-template-rows: 1fr; }
.journey__lead > div { min-height: 0; overflow: hidden; }
.journey__lead p { max-width: 46ch; padding-bottom: 20px; font-size: 16px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.js .journey__lead { transition: grid-template-rows .5s var(--ease-out), opacity .35s, visibility .5s; }
.js .journey__item:not(.is-open) .journey__lead { grid-template-rows: 0fr; opacity: 0; visibility: hidden; }
/* the panel: the app window inset from the top left and cut by the right and bottom edges, close enough to read */
.journey__panel { display: none; }
.js .journey__panel {
  position: relative; display: block; overflow: hidden; aspect-ratio: 5 / 4; border-radius: 10px;
  background: radial-gradient(120% 90% at 85% 20%, #1a2e3d 0%, var(--night) 60%);
}
.journey__shot {
  position: absolute; top: 24px; left: 24px; transform-origin: 0 0;
  opacity: 0; visibility: hidden; transform: translate3d(0, 24px, 0) scale(var(--zoom, .5));
  transition: opacity .5s, transform .9s var(--ease-out), visibility .5s;
}
.journey__shot.is-on { opacity: 1; visibility: visible; transform: scale(var(--zoom, .5)); }
.journey__shot .kapp { height: 900px; border-radius: 8px 0 0 0; box-shadow: none; }
.journey__shot .kapp--narrow { border-radius: 8px 8px 0 0; }
/* the crop drops the app's menu, so the screen's own content fills the panel */
.journey__shot .kapp:not(.kapp--settings):not(.kapp--pos) { grid-template-columns: minmax(0, 1fr); }
.journey__shot .kapp__side { display: none; }

@media (min-width: 761px) {
  .journey__shot { top: 40px; left: 40px; --zoom: .78; }
}
@media (min-width: 1081px) {
  .journey__body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 6vw, 112px); align-items: start; }
  .js .journey__panel { position: sticky; top: calc(var(--nav-h) + 32px); aspect-ratio: auto; height: clamp(480px, 42vw, 620px); }
  .journey__shot { top: 48px; left: 48px; --zoom: .86; }
}
@media (min-width: 1500px) {
  .journey__shot { --zoom: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .js .journey__lead, .journey__shot { transition: none; }
  .js .journey__item.is-open .journey__fill { animation: none; transform: scaleX(1); }
}

/* onboarding: a bento on paper. The migration leads with the import of the current system; each help is a tile whose piece of the app its bottom edge cuts */
.onboarding { background: var(--paper); }
.onboarding__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.onboarding__tile, .about-panel { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 10px; background: var(--white); box-shadow: inset 0 0 0 1px rgba(23, 27, 31, .06); }
.onboarding__tile--paper, .about-panel--paper { background: var(--paper-2); box-shadow: none; }
.onboarding__text { padding: 28px 24px 0; }
.onboarding__text h3, .about-panel__title, .about-story__title { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.2; letter-spacing: -.015em; }
.onboarding__text p, .about-panel__text { margin-top: 10px; max-width: 42ch; font-size: 15px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.onboarding__stage { position: relative; display: flex; justify-content: center; flex: none; height: 228px; margin-top: 28px; padding: 0 24px; overflow: hidden; }
.onboarding__lead .onboarding__text { padding: 32px 24px 0; }
.onboarding__lead h2 { max-width: 15ch; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -.025em; }
.onboarding__lead p { margin-top: 18px; max-width: 46ch; font-size: clamp(15px, 1.2vw, 17px); }
.onboarding__form { margin-top: 28px; }
.onboarding__lead .onboarding__stage { height: 300px; margin-top: 40px; }

/* the pieces of the app, on the .kapp tokens */
.onboarding__frag {
  --k-ink: #333; --k-muted: #666; --k-faint: #999; --k-line: #e6e6e6; --k-well: #f4f4f4;
  align-self: flex-start; width: 100%; max-width: 340px; padding: 20px 20px 24px;
  background: #fff; color: var(--k-ink); text-align: left; font-size: 13px; line-height: 18px;
  border-radius: 8px 8px 0 0; box-shadow: 0 0 0 1px rgba(23, 27, 31, .1), 0 24px 48px -28px rgba(13, 19, 24, .35);
  -webkit-user-select: none; user-select: none;
}
.onboarding__frag b { font-weight: 500; }
.onboarding__frag .ki { width: 16px; height: 16px; }
.onboarding__frag .kbtn--wide { margin-top: 16px; }
.onboarding__label { margin: 14px 0 6px; font-weight: 500; }
.onboarding__otp-head + .onboarding__label { margin-top: 18px; }
.onboarding__otp-head { text-align: center; }
.onboarding__otp-head b { display: block; font-size: 15px; line-height: 20px; }
.onboarding__otp-head span { display: block; margin-top: 4px; color: var(--k-muted); overflow-wrap: anywhere; }
.onboarding__otp-head span i { color: var(--k-ink); }
.onboarding__otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.onboarding__otp > span { display: grid; place-items: center; height: 44px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--k-line); font-size: 18px; font-weight: 500; }
.onboarding__otp i { display: block; }
/* the Empresa step as the app draws it: small faint captions over filled fields 32px apart, then the Receita's facts; the stage's edge cuts the button */
.onboarding__tile--setup .onboarding__stage { height: 336px; }
.onboarding__step { font-size: 20px; line-height: 28px; font-weight: 500; }
.onboarding__field { display: flex; flex-direction: column; gap: 8px; margin-top: 32px; }
.onboarding__step + .onboarding__field { margin-top: 24px; }
.onboarding__caption, .onboarding__facts dt { font-size: 11px; line-height: 16px; font-weight: 500; color: var(--k-faint); }
.onboarding__input { display: flex; align-items: center; height: 32px; padding: 0 8px; border-radius: 6px; background: var(--k-well); white-space: nowrap; overflow: hidden; }
.onboarding__key { font-style: normal; }
.onboarding__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 32px 0 0; }
.onboarding__facts > div { min-width: 0; }
.onboarding__facts dt { margin-bottom: 4px; }
.onboarding__facts dd { margin: 0; }
.onboarding__facts .kpill { margin-left: 8px; }
.onboarding__fact--wide { grid-column: 1 / -1; }
.onboarding__frag .onboarding__create { margin-top: 48px; }
.onboarding__days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-bottom: 12px; }
.onboarding__days span { display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-radius: 6px; color: var(--k-muted); }
.onboarding__days span b { color: var(--k-ink); font-size: 15px; line-height: 20px; }
.onboarding__days span.is-on { background: var(--k-well); }
.onboarding__slots { display: grid; gap: 6px; }
.onboarding__slot { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 12px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--k-line); color: var(--k-muted); }
.onboarding__slot--booked { height: auto; padding: 10px 12px; background: var(--k-ink); color: #fff; box-shadow: none; }
.onboarding__slot--booked > span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.onboarding__slot--booked > span i { color: rgba(255, 255, 255, .7); }
.onboarding__faces { display: flex; }
.onboarding__faces .kface { width: 24px; height: 24px; background: #fff; color: var(--k-ink); box-shadow: 0 0 0 2px var(--k-ink); }
.onboarding__faces .kface + .kface { margin-left: -6px; }
.onboarding__mail-subject { margin-bottom: 12px; font-size: 15px; line-height: 20px; font-weight: 500; }
.onboarding__mail-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.onboarding__mail-row > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onboarding__mail-row > i { flex: none; color: var(--k-muted); font-size: 12px; }
.onboarding__mail-row .kface, .onboarding__mail-row .kmark { flex: none; width: 28px; height: 28px; background: var(--k-well); box-shadow: none; }
.onboarding__mail-row .kmark { background: var(--k-ink); color: #fff; }
.onboarding__mail-old { padding-bottom: 12px; border-bottom: 1px solid var(--k-line); }
.onboarding__mail-old > span { color: var(--k-muted); }
.onboarding__mail-new { padding-top: 12px; }
.onboarding__mail-body { margin-top: 10px; padding-left: 38px; line-height: 20px; }
.onboarding__mail-body + .onboarding__mail-body { margin-top: 8px; }
.onboarding__lead .onboarding__frag { max-width: 460px; padding: 0; }
.onboarding__imp-head { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 20px; border-bottom: 1px solid var(--k-line); font-size: 15px; font-weight: 500; letter-spacing: -.025em; }
.onboarding__imp-file { display: flex; align-items: center; gap: 12px; padding: 16px 20px 0; }
.onboarding__imp-file .kcover { width: 32px; height: 40px; }
.onboarding__imp-file > span { display: flex; flex-direction: column; min-width: 0; }
.onboarding__imp-file > span b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onboarding__bar { height: 4px; margin: 16px 20px 4px; border-radius: 2px; background: var(--k-well); overflow: hidden; }
.onboarding__fill { display: block; height: 100%; background: var(--k-ink); transform-origin: 0 50%; }
.onboarding__imp-table { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin: 8px 0 0; }
.onboarding__imp-table > * { display: block; height: 40px; margin: 0; padding: 0 16px; border-bottom: 1px solid var(--k-line); line-height: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onboarding__imp-table > :nth-child(odd) { padding-left: 20px; }
.onboarding__imp-table dd { font-weight: 500; font-variant-numeric: tabular-nums; }
.onboarding__imp-table .onboarding__th { height: 32px; line-height: 32px; color: var(--k-muted); font-weight: 400; }

/* each tile plays once from .is-idle: the import's bar fills, the CNPJ types in key by key, and each part (--n is its order) rises in.
   The start shows only under reveal-ready, so without the script every tile stands finished */
@media (prefers-reduced-motion: no-preference) {
  .onboarding__fill { transition: transform 1.6s var(--ease-out); }
  .onboarding__part { transition: opacity .3s var(--ease), transform .45s var(--ease-out); transition-delay: calc(var(--n) * 110ms + 200ms); }
  .onboarding__key { transition: opacity 0s linear calc(var(--n) * 45ms + 300ms); }
  .reveal-ready .onboarding__tile.is-idle .onboarding__fill { transform: scaleX(0); }
  .reveal-ready .onboarding__tile.is-idle .onboarding__part { opacity: 0; transform: translate3d(0, 6px, 0); }
  .reveal-ready .onboarding__tile.is-idle .onboarding__key { opacity: 0; }
  .reveal-ready .onboarding__tile.is-idle .onboarding__slot--booked { transform: scale(.96); }
}

/* integrations: one grouped list of tiles, a dotted paper sheet on a phone. From 761px, with JS and motion, the list leaves the screen for screen readers only and the app's ⌘K search plays over a dimmed app, answering each query from the list; from 1081px the list comes back small under the lead */
.integrations { background: var(--paper); }
.integrations__in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.integrations__title { max-width: 14ch; font-size: clamp(34px, 4vw, 56px); line-height: 1.08; letter-spacing: -.025em; font-weight: 500; color: var(--ink); text-wrap: balance; }
.integrations__lead { max-width: 46ch; margin-top: 20px; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }

/* the list: a dotted paper panel, a numbered key per group, a sheet of equal cells on hairlines */
.integrations__panel {
  padding: 20px 12px 12px; border-radius: 10px;
  background-color: var(--paper-2);
  background-image: radial-gradient(rgba(23, 27, 31, .14) 1px, transparent 1.2px);
  background-size: 10px 10px;
}
.integrations__group + .integrations__group { margin-top: clamp(32px, 4vw, 48px); }
.integrations__key { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--ink-2); }
.integrations__num { display: inline-grid; place-items: center; flex: none; width: 32px; height: 26px; font-size: 13px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.integrations__name { padding: 0 6px 0 2px; background: var(--paper-2); }
.integrations__sheet {
  --cols: 2; --row: 72px; --logo: 20px;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows: var(--row);
  margin: 0; padding: 0; list-style: none;
  background-color: var(--paper);
  background-image:
    linear-gradient(to right, transparent calc(100% - 1px), var(--line) calc(100% - 1px)),
    linear-gradient(to bottom, transparent calc(100% - 1px), var(--line) calc(100% - 1px));
  background-size: calc(100% / var(--cols)) var(--row);
  box-shadow: inset 1px 1px 0 var(--line);
}
.integrations__tile { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 14px; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); }
.integrations__tile img { flex: none; width: auto; max-width: 100%; height: var(--logo); object-fit: contain; object-position: left center; }
.integrations__tile--word img { flex: 0 1 auto; }

/* the stage: the hero's night panel, drawn only while the search plays */
.integrations__stage { display: none; position: relative; overflow: hidden; height: 584px; border-radius: 10px; background: radial-gradient(120% 90% at 85% 20%, #1a2e3d 0%, var(--night) 60%); }

/* the app behind: the site's .kapp, framed like a window and cut by the panel's foot */
.integrations__win { position: absolute; left: 24px; right: 24px; top: 24px; height: 680px; overflow: hidden; border-radius: 12px; box-shadow: 0 32px 64px -24px rgba(0, 0, 0, .6); }
.integrations .ki { width: 16px; height: 16px; flex: none; fill: currentColor; }
.integrations .kapp:not(.kapp--settings):not(.kapp--pos) { width: 100%; height: 100%; grid-template-columns: 184px minmax(0, 1fr); border-radius: 0; box-shadow: none; }
.integrations .kapp__top { grid-template-columns: 168px minmax(0, 1fr) auto; padding: 0 8px; }
.integrations .kapp__ws .kicon { display: none; }
.integrations .kapp__search kbd { transition: background .15s, box-shadow .15s; }
.integrations .kapp__search kbd.is-press { background: var(--k-on); box-shadow: none; }
.integrations .kapp__page { padding: 16px 20px; }
.integrations__dim { position: absolute; inset: 0; z-index: 1; background: rgba(13, 19, 24, .5); opacity: 0; transition: opacity .3s var(--ease-out); }

/* the search, on the app's tokens */
.integrations__pal {
  --k-ink: #333; --k-muted: #666; --k-faint: #999; --k-line: #e6e6e6; --k-well: #f4f4f4; --k-on: #e1e1e1;
  position: absolute; z-index: 2; left: 50%; top: 64px; width: min(540px, calc(100% - 48px));
  overflow: hidden; border-radius: 12px; background: #fff; color: var(--k-ink);
  font-size: 13px; line-height: 18px; text-align: left;
  box-shadow: 0 0 0 1px rgba(23, 27, 31, .1), 0 24px 48px -16px rgba(0, 0, 0, .5);
  transform: translate3d(-50%, -8px, 0) scale(.98); opacity: 0;
  transition: opacity .22s var(--ease-out), transform .28s var(--ease-out);
  -webkit-user-select: none; user-select: none;
}
.integrations__stage.is-open .integrations__dim { opacity: 1; }
.integrations__stage.is-open .integrations__pal { transform: translate3d(-50%, 0, 0); opacity: 1; }
.integrations__field { position: relative; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; border-bottom: 1px solid var(--k-line); color: var(--k-faint); }
/* the visitor's input lies over the played query: invisible until it takes over */
.integrations__input {
  position: absolute; inset: 0; width: 100%; padding: 0 64px 0 42px; border: 0; background: none; outline: none;
  font: inherit; font-size: 15px; color: var(--k-ink); opacity: 0; cursor: text; -webkit-user-select: text; user-select: text; -webkit-appearance: none; appearance: none;
}
.integrations__input::-webkit-search-cancel-button { display: none; }
.integrations__input::placeholder { color: var(--k-faint); }
.integrations__stage.is-user .integrations__input { opacity: 1; }
.integrations__stage.is-user .integrations__q { visibility: hidden; }
.integrations__stage.is-user .integrations__field { box-shadow: inset 0 -2px 0 var(--sky); }
.integrations__hit { cursor: default; }
.integrations__field .ki { width: 18px; height: 18px; }
.integrations__q { display: flex; align-items: center; flex: 1; min-width: 0; height: 20px; font-size: 15px; white-space: nowrap; overflow: hidden; }
.integrations__typed { color: var(--k-ink); border-radius: 2px; }
.integrations__typed.is-sel { background: rgba(43, 94, 127, .2); }
.integrations__caret { flex: none; width: 1.5px; height: 18px; margin: 0 1px; background: var(--k-ink); animation: integrations-blink 1s steps(1) infinite; }
.motion-paused .integrations__caret { animation: none; }
.integrations__ph { overflow: hidden; text-overflow: ellipsis; }
.integrations__typed:not(:empty) ~ .integrations__ph { display: none; }
.integrations kbd { flex: none; padding: 1px 5px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--k-line); font: 11px/16px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--k-muted); transition: background .15s; }
.integrations__res { max-height: 340px; padding: 6px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--k-line) transparent; }
.integrations__grp + .integrations__grp { margin-top: 2px; }
.integrations__grp p { height: 28px; padding: 8px 8px 0; font-size: 12px; line-height: 18px; font-weight: 500; color: var(--k-muted); }
.integrations__grp ul { margin: 0; padding: 0; list-style: none; }
.integrations__hit { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px; border-radius: 6px; color: var(--k-muted); white-space: nowrap; }
.integrations__hit.is-on { background: var(--k-well); }
.integrations__hit kbd { margin-left: auto; background: #fff; }
.integrations__hit b { overflow: hidden; text-overflow: ellipsis; font-weight: 400; }
.integrations__hit mark { background: none; color: var(--k-ink); font-weight: 500; }
.integrations__q0 .integrations__hit b { color: var(--k-ink); }
.integrations__sug .integrations__hit b { flex: none; width: 112px; }
.integrations__why { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--k-faint); }
.integrations__logo { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; overflow: hidden; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--k-line); color: var(--k-muted); }
.integrations__logo img { display: block; width: auto; max-width: 16px; height: auto; max-height: 16px; }
.integrations__logo--crop { justify-content: flex-start; padding-left: 3px; }
.integrations__logo--crop img { max-width: none; }
.integrations__logo--ico { background: var(--k-well); box-shadow: none; }
@keyframes integrations-blink { 50% { opacity: 0; } }

/* pricing on the night: the listed plans as cards, the recommended one on paper; a custom plan is a strip beside the app window its edges cut */
.pricing { background: var(--night); color: var(--cream); }
.pricing__head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
/* the toggle: a cream pill, the period on screen a night pill inside it; hidden until landing.js drives it */
.pricing__toggle { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--cream); color: var(--night); }
.pricing__toggle[hidden] { display: none; }
.pricing__period {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px;
  border: 0; border-radius: 999px; background: transparent; color: var(--ink);
  font-size: 15px; font-weight: 500; cursor: pointer; transition: background-color .2s, color .2s;
}
.pricing__period:hover { background: rgba(23, 27, 31, .06); }
.pricing__period[aria-pressed="true"] { background: var(--night); color: var(--cream); }
.pricing__period:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pricing__gift { font-weight: 400; color: var(--brand); }
.pricing__period[aria-pressed="true"] .pricing__gift { color: var(--sky); }

.pricing__plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: clamp(40px, 5vw, 64px); }
.plan {
  display: flex; flex-direction: column; min-width: 0; padding: 28px 24px 32px; border-radius: 10px;
  background: rgba(236, 233, 229, .05); box-shadow: inset 0 0 0 1px var(--night-line); color: var(--cream);
}
.plan__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; }
.plan__top h3 { font-size: clamp(21px, 1.7vw, 24px); line-height: 1.15; letter-spacing: -.02em; }
.plan__tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--paper-2); color: var(--ink); font-size: 13px; white-space: nowrap; }
.plan__for { margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--cream-2); text-wrap: pretty; }
.plan__price { display: flex; align-items: baseline; gap: 6px; margin-top: 28px; }
.plan__cur { font-size: 18px; color: var(--cream-2); }
.plan__amt { display: inline-block; font-size: 40px; line-height: 1; font-weight: 500; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.plan__per { font-size: 15px; color: var(--cream-2); }
.plan__bill { margin-top: 8px; font-size: 13px; color: var(--cream-2); }
.plan__amt.is-flip { animation: plan-flip .4s var(--ease-out); }
@keyframes plan-flip { from { opacity: 0; transform: translateY(8px); } }
.plan .btn { width: 100%; margin-top: 24px; }
.plan__go { box-shadow: inset 0 0 0 1px var(--night-line); }
.plan__go:hover { background: var(--cream); color: var(--night); box-shadow: none; }
.plan .plan__go:focus-visible, .pricing__talk:focus-visible { outline-color: var(--cream); }
.plan__list { display: grid; gap: 12px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--night-line); font-size: 15px; line-height: 1.45; }
.plan__list li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; }
.plan__list .ki { width: 16px; height: 16px; margin-top: 3px; color: var(--sky); }
.plan__list small { display: block; font-size: 14px; color: var(--cream-2); }
/* the recommended plan: a paper card, ink text and a black button with an ink ring */
.plan--hi { background: var(--paper); box-shadow: none; color: var(--ink); }
.plan--hi .plan__for, .plan--hi .plan__cur, .plan--hi .plan__per, .plan--hi .plan__bill, .plan--hi .plan__list small { color: var(--ink-2); }
.plan--hi .plan__list { border-top-color: var(--line); }
.plan--hi .plan__list .ki { color: var(--brand); }

/* the custom plan: the night gradient with its own hairline on top of the window, so the strip reads as a panel on the night */
.pricing__ent {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 12px; overflow: hidden; border-radius: 10px;
  background: radial-gradient(120% 90% at 85% 20%, #1a2e3d 0%, var(--night) 60%); color: var(--cream);
}
.pricing__ent::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--night-line); pointer-events: none; }
.pricing__ent-text { display: flex; flex-direction: column; padding: clamp(28px, 3vw, 44px); }
.pricing__custom { margin-top: 28px; font-size: 36px; line-height: 1; font-weight: 500; letter-spacing: -.03em; }
.pricing__talk { align-self: flex-start; margin-top: 24px; }
.pricing__art { position: relative; height: 340px; overflow: hidden; }
.pricing__win { position: absolute; left: 20px; top: 0; width: 640px; height: 560px; }
.pricing .pricing__win .kapp.pricing__kapp {
  position: relative; width: 100%; height: 100%;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: 48px minmax(0, 1fr);
  border-radius: 10px 0 0 0; box-shadow: 0 0 0 1px rgba(236, 233, 229, .14);
}
.pricing__win .kapp__top { grid-template-columns: auto minmax(0, 1fr) auto; }
.pricing__win .kapp__switch { border-radius: 6px; background: var(--k-on); }
.pricing__win .kapp__page { padding: 16px 20px; }
.pricing__note { margin-top: 22px; font-size: 15px; color: var(--cream-2); }

/* the app's company switcher, open: the workspace's companies, then its actions and its plan */
.kmenu { position: absolute; left: 12px; top: 44px; z-index: 2; width: 268px; padding: 6px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--k-line), 0 16px 32px -12px rgba(13, 19, 24, .35); }
.kmenu > p { padding: 6px 8px 4px; font-weight: 500; color: var(--k-muted); }
.kmenu__co { display: grid; grid-template-columns: 28px minmax(0, 1fr) 16px; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 4px; }
.kmenu__co .kmark { width: 28px; height: 28px; background: var(--k-well); box-shadow: none; }
.kmenu__co span b, .kmenu__co span i { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kmenu__co span i { font-size: 12px; line-height: 16px; font-style: normal; color: var(--k-muted); }
.kmenu__co .ki { width: 16px; height: 16px; }
.kmenu__co.is-on { background: var(--k-well); }
.kmenu hr { margin: 6px -6px; border: 0; border-top: 1px solid var(--k-line); }
.kmenu__item { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border-radius: 4px; color: var(--k-nav); }
.kmenu__item .ki { width: 16px; height: 16px; color: var(--k-muted); }
.kmenu__plan { display: flex; justify-content: space-between; gap: 12px; padding: 6px 8px 4px; }

/* faq: the title beside an accordion with thin rules. With the script one answer opens at a time and its rule fills with ink; without it every answer shows */
.faq { background: var(--paper); color: var(--ink); }
.faq__wrap { display: grid; grid-template-columns: minmax(0, 1fr); }
.faq__list { margin-top: clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--line-2); }
.faq__item { position: relative; }
.faq__rule { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line-2); pointer-events: none; }
.faq__fill { position: absolute; left: 0; right: 0; top: -.5px; height: 2px; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.faq.is-accordion .faq__fill { transition: transform .5s var(--ease-out); }
.faq.is-accordion .faq__item.is-open .faq__fill { transform: scaleX(1); }
.faq__q { font-size: inherit; font-weight: 400; }
.faq__head {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; padding: 22px 0; border: 0; background: none; cursor: pointer; text-align: left;
  font-size: clamp(18px, 1.55vw, 22px); line-height: 1.25; letter-spacing: -.015em; color: var(--ink);
}
.faq__head:focus-visible { outline-offset: -2px; border-radius: 4px; }
.faq.is-accordion .faq__head { color: var(--ink-2); transition: color .25s; }
.faq.is-accordion .faq__head:hover, .faq.is-accordion .faq__item.is-open .faq__head { color: var(--ink); }
/* the +/- mark: two 1.5px bars; the upright one lies flat as the row opens */
.faq__mark { display: none; position: relative; flex: none; width: 14px; height: 14px; }
.faq.is-accordion .faq__mark { display: block; }
.faq__mark::before, .faq__mark::after { content: ""; position: absolute; left: 0; top: 6.25px; width: 14px; height: 1.5px; border-radius: 1px; background: currentColor; }
.faq__mark::after { transform: rotate(90deg); transition: transform .35s var(--ease-out); }
.faq__item.is-open .faq__mark::after { transform: rotate(0deg); }
/* the answer: a grid row from 0fr to 1fr, so the height opens smoothly */
.faq__a { display: grid; grid-template-rows: 1fr; }
.faq__a > div { min-height: 0; overflow: hidden; }
.faq__a p { max-width: 56ch; padding: 0 34px 24px 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.faq.is-accordion .faq__a { transition: grid-template-rows .45s var(--ease-out), opacity .3s, visibility .45s; }
.faq.is-accordion .faq__item:not(.is-open) .faq__a { grid-template-rows: 0fr; opacity: 0; visibility: hidden; }

/* closing: the joke on the night, edge to edge above the footer, under one gradient and its dots. The about page's closing band (.cta, from layout.call_to_action) shares the night */
.closing-ask, .cta {
  position: relative; overflow: hidden; color: var(--cream); border-bottom: 1px solid var(--night-line);
  background: radial-gradient(70% 60% at 85% 10%, #1a2e3d 0%, transparent 100%), radial-gradient(70% 60% at 12% 100%, #1a2e3d 0%, transparent 100%), var(--night);
}
.closing-ask::before, .cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background-image: radial-gradient(var(--night-dots) 1px, transparent 1.4px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, .3));
  mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, .3));
}
.closing-ask__in, .cta__in { position: relative; }
.closing-ask__title { font-size: clamp(40px, 7.6vw, 112px); line-height: 1.02; letter-spacing: -.04em; }
.closing-ask__row { display: inline; }
.closing-ask__word { white-space: nowrap; }
.closing-ask__del { position: relative; display: inline-block; }
.closing-ask__ink { display: inline-block; opacity: .38; }
.closing-ask__rule { position: absolute; left: -.04em; right: -.03em; top: 52%; height: .065em; min-height: 3px; border-radius: 2px; background: var(--sky); transform-origin: left center; }
/* the joke plays once: the "in" stands at full ink, the sky rule strikes it, then it fades */
.closing-ask.is-armed .closing-ask__ink { opacity: 1; }
.closing-ask.is-armed .closing-ask__rule { transform: scaleX(0); }
.closing-ask.is-done .closing-ask__rule { transform: none; transition: transform .45s var(--ease-out); }
.closing-ask.is-done .closing-ask__ink { opacity: .38; transition: opacity .5s var(--ease) .3s; }
.closing-ask__foot, .cta__actions { margin-top: clamp(40px, 5vw, 72px); padding-top: 24px; border-top: 1px solid var(--night-line); }
.cta__title { max-width: 16ch; font-size: clamp(36px, 5.6vw, 88px); line-height: 1.02; letter-spacing: -.04em; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta .btn--line-light:hover { color: var(--night); }
.closing-ask a:focus-visible, .cta a:focus-visible { outline-color: var(--cream); outline-offset: 3px; }

/* footer: the brand above five link columns, two per row on a phone, three from 641px, five from 901px; from 1081px the brand sits beside them. Auto columns size to their links, so the e-mail address keeps one line */
.foot { padding: 64px var(--gutter) calc(36px + var(--consent-h, 0px)); background: var(--night); color: var(--cream); }
.foot__top { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; max-width: var(--max); margin: 0 auto; }
.foot__brand { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; font-size: 19px; font-weight: 600; }
.foot nav { display: grid; grid-template-columns: repeat(2, auto); gap: 32px 24px; }
.foot nav div { display: grid; gap: 10px; align-content: start; font-size: 15px; }
.foot nav p { margin-bottom: 4px; font-size: 15px; font-weight: 500; color: var(--cream-2); }
.foot nav a { opacity: .85; overflow-wrap: break-word; }
.foot nav a:hover, .foot nav a[aria-current="page"] { opacity: 1; }
.foot__by { max-width: var(--max); margin: 64px auto 0; padding-top: 22px; border-top: 1px solid var(--night-line); font-size: 14px; color: var(--cream-2); }
/* main takes the focus from the skip link and from a consent button the choice hides; it shows no ring */
#top:focus { outline: none; }
.foot__consent { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; opacity: .85; }
.foot__consent:hover { opacity: 1; }

/* cookie banner: consent.js shows it only when the site has an analytics ID, and sets --consent-h to its height, which the footer and the focus scroll keep clear of.
   The banner, the dialog and the footer button carry the hidden attribute, so no rule here sets their display */
html { scroll-padding-bottom: var(--consent-h, 0px); }
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 18px var(--gutter) calc(18px + env(safe-area-inset-bottom));
  background: var(--night); color: var(--cream);
  border-top: 1px solid var(--night-line);
}
.consent__inner { display: grid; gap: 14px; max-width: var(--max); margin: 0 auto; }
.consent__copy { display: grid; gap: 4px; justify-items: start; font-size: 15px; line-height: 1.45; }
.consent__copy p { max-width: 72ch; }
.consent__policy { display: inline-flex; align-items: center; min-height: 44px; color: var(--cream-2); text-decoration: underline; text-underline-offset: 3px; transition: color .2s; }
.consent__policy:hover { color: var(--cream); }
/* Recusar and Aceitar share one class and grow alike; Preferências wraps to its own row when the three do not fit */
.consent__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.consent__actions .btn { flex: 1 1 0; min-width: max-content; height: 44px; }
.btn--line-light.consent__more:hover { color: var(--night); }

/* preferences dialog: one row per purpose, the name and its sentence beside the switch */
.consent-dialog {
  width: calc(100% - 32px); max-width: 520px;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto;
  padding: 20px 24px 24px; border: 1px solid var(--night-line);
  background: var(--night); color: var(--cream);
}
.consent-dialog::backdrop { background: rgba(13, 19, 24, .6); }
.consent-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--night-line); }
.consent-dialog__head h2 { font-size: 22px; line-height: 1.2; letter-spacing: -.02em; }
.consent-dialog__close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-right: -12px; padding: 0; border: 0; background: none; cursor: pointer; opacity: .8; transition: opacity .2s; }
.consent-dialog__close:hover { opacity: 1; }
.consent-dialog__close:focus-visible { outline-offset: -4px; }
.consent-dialog__purpose { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--night-line); }
.consent-dialog__purpose label { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.consent-dialog__purpose .switch { grid-column: 2; grid-row: 1 / span 2; }
.consent-dialog__purpose p { grid-column: 1; font-size: 15px; color: var(--cream-2); }
.consent-dialog__save { width: 100%; height: 44px; margin-top: 24px; }

/* a switch: a checkbox drawn as a square track; off is an outline with the thumb at the start, on is filled sky with the thumb at the end */
.switch {
  -webkit-appearance: none; appearance: none;
  position: relative; width: 46px; height: 26px; margin: 0;
  border: 1.5px solid var(--cream-2); background: transparent; cursor: pointer;
  transition: background .2s, border-color .2s;
}
.switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; background: var(--cream-2); transition: transform .25s var(--ease), background .2s; }
.switch:checked { border-color: var(--sky); background: var(--sky); }
.switch:checked::before { background: var(--night); transform: translateX(20px); }
.switch:disabled { cursor: default; opacity: .6; }
/* the track is 26px tall; the hit area reaches 46px */
.switch::after { content: ""; position: absolute; inset: -11px -4px; }
.switch:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }

/* reveal: hidden only when JS runs, since only landing.js shows it again;
   when landing.js never runs (blocked, failed), the blocks show after 3 s */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js:not(.reveal-ready) .reveal { animation: reveal-fallback .8s var(--ease) 3s forwards; }
.js .reveal.is-in { opacity: 1; transform: none; }
@keyframes reveal-fallback { to { opacity: 1; transform: none; } }
.hero .reveal { transition-delay: .45s; }
/* the hero recedes as the page scrolls, from landing.js */
.hero__copy, .hero__film { will-change: transform; }

/* wider screens: each block adds to the phone layout above */
@media (min-width: 641px) {
  .bar__more { display: inline; }
  .nav .btn { padding: 0 18px; }
  .nav__menu summary { padding: 0 14px; margin-right: -14px; }
  .nav__menu-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .foot nav { grid-template-columns: repeat(3, auto); }
}
@media (min-width: 761px) {
  .closing-ask__row { display: block; }
  body { font-size: 17px; }
  .consent__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 40px; }
  .consent__actions { flex-wrap: nowrap; }
  .consent__actions .btn { flex: none; }
  .hero__app .kapp { height: 620px; }
  .kapp:not(.kapp--settings):not(.kapp--pos) { grid-template-columns: 244px minmax(0, 1fr); }
  .kapp__side, .kapp__top > :not(.kapp__ws) { display: flex; }
  .kapp__top { grid-template-columns: 1fr minmax(0, 576px) 1fr; }
  .kset { grid-template-columns: 248px minmax(0, 1fr); }
  .kset__nav { display: block; grid-column: 1; grid-row: 2; }
  .kset > .kicon { display: inline-grid; grid-column: 1; grid-row: 1; }
  .kset__panel { grid-column: 2; grid-row: 2; }
  .nav__cta .btn--line { display: inline-flex; }
  .premise { --as: .6; }
  .premise__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .premise__art { flex-basis: 300px; }
  .premise__win { width: calc(860px * var(--as)); height: calc(660px * var(--as)); }
  .premise .premise__kapp { width: 860px; height: 660px; border-radius: calc(8px / var(--as)) 0 0 0; transform: scale(var(--as)); transform-origin: 0 0; }
  .premise .premise__kapp.kapp { grid-template-columns: 200px minmax(0, 1fr); }
  .premise .kapp__page { padding: 16px 24px 24px; }
  .hero__copy, .about-head__in { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 120px); }
  .onboarding__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .onboarding__lead { grid-column: 1 / -1; }
  .onboarding__text { padding: 32px 32px 0; }
  .onboarding__stage { padding: 0 32px; }
  .onboarding__lead .onboarding__text { padding: 44px 44px 0; }
  .onboarding__lead .onboarding__stage { height: 340px; justify-content: flex-start; padding: 0 0 0 44px; }
  .onboarding__lead .onboarding__frag { flex: none; width: calc(100% + 24px); max-width: none; border-radius: 8px 0 0 0; }
  .onboarding__lead .onboarding__imp-table { grid-template-columns: 220px minmax(0, 1fr); }
  .onboarding__lead .onboarding__imp-table > * { padding: 0 20px; }
  .integrations__in { gap: 56px; }
  .integrations__panel { padding: clamp(24px, 3vw, 40px); }
  .integrations__sheet { --cols: 4; --row: 84px; --logo: 22px; }
  .integrations__tile { padding: 0 20px; font-size: 16px; }
  /* the search plays full width; the list stays for screen readers only */
  .integrations--search .integrations__stage { display: block; }
  .integrations--search .integrations__panel { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .pricing__head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .pricing__plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plan { padding: 28px 20px 32px; }
  .pricing__plans .plan__for { min-height: 4.35em; }
  .pricing__ent { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing__art { height: auto; min-height: 460px; }
  .pricing__win { left: 0; top: 44px; width: 760px; }
  .kmenu { width: 292px; }
}
/* the premise plays once from .is-idle: the tools drop in, the wires follow, the window rises and builds part by part, the cursor comes last.
   Then the tools drift until the page's pause button stops them */
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .premise__frag { transition: opacity .45s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(var(--i) * 90ms); }
  .premise__wires { transition: opacity .5s var(--ease-out) .5s; }
  .premise__win { transition: opacity .6s var(--ease-out) .55s, transform .8s var(--ease-out) .55s; }
  .premise__part { transition: opacity .4s var(--ease-out), transform .5s var(--ease-out); transition-delay: calc(.7s + var(--i) * 60ms); }
  .reveal-ready .premise.is-idle .premise__frag { opacity: 0; transform: translate3d(0, -24px, 0) rotate(calc(var(--r) * 1.8)); }
  .reveal-ready .premise.is-idle .premise__wires { opacity: 0; }
  .reveal-ready .premise.is-idle .premise__win { opacity: 0; transform: translate3d(0, 40px, 0); }
  .reveal-ready .premise.is-idle .premise__part { opacity: 0; transform: translate3d(0, 10px, 0); }
  .reveal-ready .premise:not(.is-idle) .premise__frag > .kchart { animation: premise-drift 5.2s ease-in-out 1.6s infinite alternate; }
  .reveal-ready .premise:not(.is-idle) .premise__frag--meta > .kchart { animation-duration: 6.1s; animation-delay: 1.9s; }
  .reveal-ready .premise:not(.is-idle) .premise__frag--sheet > .kchart { animation-duration: 4.6s; animation-delay: 1.75s; }
  .reveal-ready .premise:not(.is-idle) .premise__frag--mail > .kchart { animation-duration: 5.8s; animation-delay: 2.05s; }
  .reveal-ready .premise:not(.is-idle) .premise__frag--chat > .kchart { animation-duration: 4.9s; animation-delay: 1.85s; }
  .reveal-ready.motion-paused .premise .premise__frag > .kchart { animation-play-state: paused; }
}
@media (min-width: 901px) {
  .foot nav { grid-template-columns: repeat(5, auto); justify-content: space-between; }
}
@media (min-width: 1081px) {
  .nav { grid-template-columns: 1fr auto 1fr; column-gap: 0; padding: 14px var(--gutter); }
  .nav__links { display: flex; }
  .nav__brand { min-height: 40px; }
  .nav .btn { height: 40px; }
  .lead-form .btn, .lead-form__input { height: 40px; }
  .nav__menu { display: none; }
  .pricing__period { height: 40px; padding: 0 18px; }
  .onboarding__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .onboarding__lead { grid-column: 1 / 8; grid-row: 1 / 3; }
  .onboarding__tile--signup { grid-column: 8 / 13; grid-row: 1; }
  .onboarding__tile--setup { grid-column: 8 / 13; grid-row: 2; }
  .onboarding__tile--training { grid-column: 1 / 6; grid-row: 3; }
  .onboarding__tile--support { grid-column: 6 / 13; grid-row: 3; }
  .onboarding__lead .onboarding__text { padding: 56px 56px 0; }
  .onboarding__lead .onboarding__stage { flex: 1 0 auto; height: auto; min-height: 360px; margin-top: 48px; padding-left: 56px; }
  .onboarding__lead .onboarding__frag { position: absolute; top: 0; left: 56px; right: -24px; width: auto; }
  .onboarding__tile--support .onboarding__frag { max-width: 420px; }
  .plan { padding: 32px 28px 36px; }
  .pricing__plans .plan__for { min-height: 2.9em; }
  .pricing__ent { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .pricing__ent .plan__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .pricing__win { top: 48px; }
  .faq__wrap, .about-section--split .about-section__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 6vw, 112px); align-items: start; }
  .faq__title, .about-section--split .about-section__head { position: sticky; top: calc(var(--nav-h) + 32px); }
  .faq__list { margin-top: 0; }
  .closing-ask__foot, .cta__actions { padding-top: 32px; }
  .foot__top { flex-direction: row; }
  .foot nav { column-gap: clamp(32px, 5vw, 96px); }
  .premise { --as: .74; }
  .premise__cards { gap: 20px; }
  .premise__card { height: clamp(600px, 50vw, 720px); }
  .premise__art { flex: 1 1 0; min-height: 0; }
  .integrations__sheet { --cols: 6; --row: 96px; }
  .integrations__tile { padding: 0 22px; }
  /* the head and the small list share the left column; the stage spans both rows on the right */
  .integrations--search .integrations__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; gap: 40px clamp(48px, 6vw, 96px); align-items: start; }
  .integrations--search .integrations__head { grid-column: 1; grid-row: 1; padding-bottom: 8px; }
  .integrations--search .integrations__stage { grid-column: 2; grid-row: 1 / span 2; height: 600px; }
  .integrations--search .integrations__panel { grid-column: 1; grid-row: 2; align-self: start; position: static; width: auto; height: auto; margin: 8px 0 0; padding: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; background: none; border-radius: 0; }
  .integrations--search .integrations__group + .integrations__group { margin-top: 24px; }
  .integrations--search .integrations__key { margin-bottom: 10px; font-size: 13px; }
  .integrations--search .integrations__num { width: 28px; height: 22px; font-size: 12px; background: var(--paper); }
  .integrations--search .integrations__name { background: none; }
  .integrations--search .integrations__sheet { --cols: 3; --row: 48px; --logo: 16px; }
  .integrations--search .integrations__tile { padding: 0 12px; font-size: 13px; }
}

/* the card under the pointer stays; the other fades. The row lets the pointer through, so the gap between the cards fades neither */
@media (min-width: 1081px) and (hover: hover) {
  .premise__cards { pointer-events: none; }
  .premise__card { pointer-events: auto; transition: opacity .35s var(--ease-out); }
  .premise__cards:hover .premise__card:not(:hover) { opacity: .5; }
}

@media print {
  .consent { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero__title .w { opacity: 1; transform: none; filter: none; }
  .js .reveal { opacity: 1; transform: none; }
  .js .motion { display: none; }
  .premise .premise__frag > .kchart { animation: none; }
  .faq.is-accordion .faq__a, .faq.is-accordion .faq__fill, .faq.is-accordion .faq__head, .faq__mark::after { transition: none; }
}

/* the 404 page: a dark head under the nav, the only thing in main, so it takes the hero's height and the footer follows it */
.page-head {
  margin-top: calc(var(--nav-h) * -1);
  padding: calc(var(--nav-h) + clamp(72px, 13vh, 150px)) var(--gutter) clamp(72px, 10vw, 130px);
  background: radial-gradient(120% 90% at 85% 20%, #1a2e3d 0%, var(--night) 60%);
  color: var(--cream);
}
.page-head h1 { max-width: 17ch; font-size: clamp(40px, 5.4vw, 80px); line-height: 1.02; letter-spacing: -.035em; }
.page-head p { max-width: 54ch; margin-top: 28px; font-size: clamp(17px, 1.4vw, 21px); color: var(--cream-2); }
.page-head:only-child { min-height: min(78vh, 760px); }

/* about page (sobre/): the landing's paper, type and panels. The head opens like the hero under the light header; a split section puts its
   title beside the body from 1081px, like the questions, whose accordion it shares; the closing band is the landing closing's night */
.about-head {
  margin-top: calc(var(--nav-h) * -1);
  padding: calc(var(--nav-h) + clamp(56px, 10vh, 112px)) var(--gutter) 0;
  background: var(--paper); color: var(--ink);
}
.about-head__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: end; }
.about-head__title { max-width: 18ch; font-size: clamp(36px, 4.8vw, 72px); line-height: 1.02; letter-spacing: -.04em; }
.about-head__lead { max-width: 30em; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.45; color: var(--ink-2); }
.about-section { background: var(--paper); }
.about-section--split .about-section__head { margin-bottom: clamp(32px, 4vw, 48px); }
.about-section__lead { margin-top: 20px; }

/* who it is for: rows on thin rules, as the questions draw them */
.about-audiences { border-bottom: 1px solid var(--line-2); }
.about-audiences__row {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 16px; align-items: start; padding: 22px 0; border-top: 1px solid var(--line-2);
  font-size: clamp(18px, 1.55vw, 22px); line-height: 1.25; letter-spacing: -.015em;
}
.about-audiences__row .ico { margin-top: .2em; color: var(--ink-3); }

/* panels: the onboarding's tiles, each opened by an app icon or a numbered key; a step's button sits at the panel's foot */
.about-modules, .about-steps, .about-support { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.about-panel { padding: 28px 24px 32px; }
.about-panel__icon { display: inline-grid; place-items: center; align-self: flex-start; flex: none; width: 40px; height: 40px; margin-bottom: 24px; border-radius: 8px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.about-panel__icon .ki { width: 20px; height: 20px; }
.about-num { align-self: flex-start; margin-bottom: 24px; color: var(--ink-2); }
.about-panel__foot { margin-top: auto; padding-top: 28px; }
.about-panel__text a, .about-story a, .about-facts a, .faq__a a { color: var(--ink); text-underline-offset: 3px; }
.about-panel__text a:hover, .about-story a:hover, .about-facts a:hover, .faq__a a:hover { text-decoration: underline; }

/* support: the app's top bar, its left end cut by the panel's edge and its foot by the panel's, with the Pedido de suporte marked */
.about-panel--app { padding-bottom: 0; }
.about-panel--app > div:first-child { padding-bottom: 32px; }
.about-bar { position: relative; flex: none; height: 120px; margin: auto -24px 0; overflow: hidden; }
.about-bar .about-bar__app { position: absolute; top: 0; right: 24px; width: 760px; height: 200px; border-radius: 8px 8px 0 0; }
.about-bar .kapp__top { grid-template-columns: auto minmax(0, 1fr) auto; }
.about-bar .kapp__top > * { display: flex; }
.about-bar .kapp__tools > :nth-child(2) { background: var(--k-on); color: var(--k-ink); }

/* who makes it: the founder's paper panel with the round photo, and the story */
.about-team { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.about-founder__who { display: flex; align-items: center; gap: 20px; margin-bottom: 14px; }
.about-founder__photo { flex: none; width: 88px; height: 88px; border-radius: 50%; object-fit: cover; }
.about-founder__role { margin-top: 4px; font-size: 15px; color: var(--ink-2); }
.about-founder .about-panel__text { max-width: 60ch; }
.about-story p { max-width: 60ch; margin-top: 14px; font-size: clamp(16px, 1.2vw, 17px); line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }

/* key facts: one fact per row, the label and the value in their own left-aligned cells */
.about-facts { margin: 0; border-bottom: 1px solid var(--line-2); }
.about-facts__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 24px; padding: 18px 0; border-top: 1px solid var(--line-2); }
.about-facts__label { font-size: 15px; color: var(--ink-2); }
.about-facts__value { margin: 0; color: var(--ink); overflow-wrap: break-word; }
.about-facts__value li + li { margin-top: 4px; }
.about-facts__price { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; }

@media (min-width: 761px) {
  .about-modules, .about-steps, .about-support { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .about-modules > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .about-panel { padding: 32px 32px 36px; }
  .about-panel--app { grid-column: 1 / -1; padding-bottom: 0; }
  .about-bar { height: 132px; margin: auto -32px 0; }
  .about-bar .about-bar__app { right: 32px; }
  .about-founder__photo { width: 112px; height: 112px; }
  .about-facts__row { grid-template-columns: 180px minmax(0, 1fr); }
}
@media (min-width: 1081px) {
  .about-section--split .about-section__head { margin-bottom: 0; }
  /* three modules a row; when one would be left alone, the last four share the row */
  .about-modules { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .about-modules > *, .about-modules > :last-child:nth-child(odd) { grid-column: span 4; }
  .about-modules > :nth-child(3n+1):nth-last-child(4), .about-modules > :nth-child(3n+1):nth-last-child(4) ~ * { grid-column: span 3; }
  .about-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .about-support { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .about-support > * { grid-column: 8 / 13; }
  .about-support > .about-panel--app { grid-column: 1 / 8; grid-row: 1 / 3; }
  .about-team { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 6vw, 112px); align-items: start; }
}

/* legal pages (termos/, privacidade/, reembolso/ and their en/ and es/ translations): a dark head under the sticky nav, like .page-head, then one readable column on paper, about 76 characters a line (Google Sans' zero, the ch unit, is .64em wide) */
.legal { margin-top: calc(var(--nav-h) * -1); padding: 0 var(--gutter) clamp(80px, 11vw, 150px); overflow-wrap: break-word; }
.legal__head {
  margin: 0 calc(var(--gutter) * -1);
  padding: calc(var(--nav-h) + clamp(48px, 9vw, 112px)) var(--gutter) clamp(32px, 5vw, 56px);
  background: radial-gradient(120% 90% at 85% 20%, #1a2e3d 0%, var(--night) 60%);
  color: var(--cream);
}
.legal__head > div, .legal__toc, .legal__body { max-width: 56ch; margin-left: auto; margin-right: auto; }
.legal__head h1 { font-size: clamp(36px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -.03em; }
.legal__dates { display: flex; flex-direction: column; margin-top: 16px; color: var(--cream-2); }
/* an earlier version names the one that replaced it, above the dates */
.legal__replaced { margin-top: 16px; padding: 12px 16px; border: 1px solid rgba(236, 233, 229, .24); border-radius: 12px; color: var(--cream); }
.legal__replaced a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
.legal__replaced a:hover { text-decoration-thickness: 2px; }
.legal__languages { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 8px; }
.legal__languages a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cream-2); transition: color .2s; }
.legal__languages a:hover { color: var(--cream); }
.legal__languages a[aria-current="page"] { color: var(--cream); font-weight: 500; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.legal__toc { margin-top: clamp(28px, 4vw, 44px); padding: 12px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.legal__toc li { break-inside: avoid; }
/* below 1081px each entry is a 44px tap target */
.legal__toc a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; line-height: 1.35; color: var(--ink-2); transition: color .2s; }
.legal__toc a:hover { color: var(--ink); }
.legal__body { margin-top: clamp(40px, 5vw, 64px); }
.legal__section { padding: 0; scroll-margin-top: calc(var(--nav-h) + 24px); }
.legal__section + .legal__section { margin-top: clamp(36px, 4vw, 48px); }
.legal__section h2 { font-size: clamp(21px, 1.9vw, 26px); line-height: 1.2; letter-spacing: -.02em; }
.legal__section p, .legal__section ul { margin-top: 14px; color: var(--ink-2); }
.legal__section ul { display: grid; gap: 10px; }
.legal__section li { position: relative; padding-left: 20px; }
.legal__section li::before { content: ""; position: absolute; top: calc(.75em - 2.5px); left: 2px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.legal__section strong { font-weight: 600; color: var(--ink); }
.legal__section a { color: var(--ink); text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; }
.legal__section a:hover { text-decoration-thickness: 2px; }
/* the list of versions: the date links to the version, the shown one is plain */
.legal__versions li p { margin-top: 2px; }
.legal__versions a[aria-current="page"] { font-weight: 600; text-decoration: none; }
.legal__current { color: var(--ink-3); }

@media (min-width: 641px) {
  .legal__toc ul { columns: 2; column-gap: 32px; }
}
@media (min-width: 1081px) {
  .legal__toc a { display: block; min-height: 0; padding: 7px 0; }
}