/* STAR Kit landing page, by Age Tech.
 *
 * Mobile first: every rule below is what a phone gets, and the two `min-width`
 * blocks at the end add what a wider screen can afford. Written that way round
 * because most of the traffic a landing page gets is a phone, and because a
 * layout built by subtracting from a desktop grid ends up with a phone layout
 * nobody chose — the columns collapse somewhere, the type stays too big, and
 * something always sticks out past the right edge.
 *
 * Cosmic Flow uses the same approved artwork and palette as Space.
 */

@font-face {
  font-family: Geist;
  src: url("./fonts/geist-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --brand-purple: #8b5cf6;
  --brand-blue: #3b82f6;
  --brand-pink: #ec4899;
  --brand-gradient: linear-gradient(110deg, var(--brand-purple), var(--brand-blue) 52%, var(--brand-pink));
  --ground: #08090f;
  --surface: #10121b;
  --surface-warm: #171925;
  --lavender: #241c3b;
  --ink: #f8fafc;
  --ink-soft: #afb4c6;
  --dark: #0c0e16;
  --blue: #b69afa;
  --blue-dark: #c4b0ff;
  --blue-tint: rgba(139, 92, 246, 0.08);
  --badge-tint: rgba(139, 92, 246, 0.09);
  --badge-ink: #b69afa;
  --hairline: rgba(248, 250, 252, 0.08);
  --green: #6ee7b7;
  --shell: 1188px;
  --gutter: 20px;
  --nav-height: 64px;
  --section-gap: 64px;
  --radius-card: 18px;
  --radius-panel: 24px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* An anchor must not land under the sticky header. */
  scroll-padding-top: calc(var(--nav-height) + 12px);
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink-soft);
  font-family: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
  /* Nothing on this page is meant to scroll sideways. */
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.035em;
  margin: 0;
  line-height: 1.1;
  /* Long Portuguese compounds would otherwise push past a narrow screen. */
  overflow-wrap: break-word;
}

h1 {
  font-size: clamp(32px, 8.5vw, 64px);
  letter-spacing: -0.04em;
}

h2 {
  font-size: clamp(27px, 6.6vw, 52px);
  letter-spacing: -0.04em;
}

h3 {
  font-size: 20px;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- navigation ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(8, 9, 15, 0.92);
  backdrop-filter: blur(14px);
}

.nav.is-stuck {
  background: rgba(16, 18, 27, 0.94);
  box-shadow: 0 1px 0 var(--hairline);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--nav-height);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.logo__mark {
  display: block;
  mix-blend-mode: lighten;
  flex: none;
}

/* The "what's new" pill is a nicety, and a narrow header has no room for it. */
.nav__pill {
  display: none;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--badge-tint);
  color: var(--badge-ink);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.nav__burger {
  display: grid;
  gap: 5px;
  margin-left: auto;
  padding: 12px 10px;
  border: 0;
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.06);
  cursor: pointer;
}

.nav__burger span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.2s ease;
}

.nav__burger[aria-expanded="true"] span:first-child {
  transform: translateY(3.5px) rotate(45deg);
}

.nav__burger[aria-expanded="true"] span:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

/* The panel the burger opens: the same links the wide layout shows in a row. */
.nav__menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: grid;
  gap: 4px;
  padding: 10px var(--gutter) 16px;
  background: var(--surface);
  box-shadow: 0 20px 40px -24px rgba(19, 21, 35, 0.35), 0 1px 0 var(--hairline);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.nav__menu[data-open] {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/*
 * While the sheet is open the header stops being translucent: a blurred strip
 * over an opaque panel reads as a rendering mistake, and the two together are
 * one surface.
 */
.nav:has(.nav__menu[data-open]) {
  background: var(--surface);
  backdrop-filter: none;
}

.nav__links {
  display: grid;
  font-size: 17px;
  color: var(--ink);
}

.nav__links a {
  padding: 12px 4px;
  border-bottom: 1px solid var(--hairline);
}

.nav__actions {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  flex: 0 0 auto;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  padding: 12px 22px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  max-width: 100%;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.btn--primary {
  background: var(--brand-gradient);
  color: var(--ground);
  box-shadow: 0 1px 2px rgba(19, 21, 35, 0.16);
}

.btn--primary:hover {
  filter: brightness(1.12);
}

.btn--dark {
  background: var(--dark);
  color: #fff;
}

.btn--ghost {
  background: rgba(248, 250, 252, 0.06);
  color: var(--ink);
}

.btn--ghost:hover {
  background: rgba(248, 250, 252, 0.1);
}

.btn--surface {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(19, 21, 35, 0.08), 0 0 0 1px var(--hairline);
}

.btn--surface:hover {
  transform: translateY(-1px);
}

.btn--lg {
  padding: 15px 26px;
  font-size: 17px;
  border-radius: 14px;
}

/* ---------- shared section furniture ---------- */

.section {
  padding: var(--section-gap) 0;
}

.section--tight {
  padding: 40px 0 var(--section-gap);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--badge-tint);
  color: var(--badge-ink);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: left;
}

.stack-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.stack-center h2 {
  max-width: 760px;
}

.lede {
  max-width: 620px;
  font-size: 17px;
  color: var(--ink-soft);
}

.star-key {
  color: var(--ink-soft);
  font-size: 15px;
}

.star-key strong {
  color: var(--blue);
  font-weight: 600;
}

.emo {
  display: inline-block;
  margin-right: 7px;
}

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

.hero {
  padding: 32px 0 0;
  text-align: center;
}

.hero h1 {
  max-width: 900px;
  margin: 0 auto;
}

/*
 * Bigger than a normal sub, because this one is not a paragraph. It is the
 * product list, and it is the second thing read after the headline. The old
 * copy was two sentences of prose at 17px; this is one line naming the four
 * pieces, so it can carry the weight the prose could not.
 */
.hero__sub {
  max-width: 760px;
  margin: 18px auto 0;
  font-size: 21px;
  line-height: 1.45;
}

/* The four initials spell STAR, in the same blue `.star-key` gives them. */
.hero__sub strong {
  color: var(--blue);
  font-weight: 600;
}

.hero__cta {
  margin-top: 26px;
}

.hero__cta .btn {
  width: 100%;
  max-width: 320px;
}

.hero__note {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--ink-soft);
}

/* ---------- product tabs + app frame ---------- */

/* A row that scrolls sideways rather than wrapping into ragged lines. */
.tabs {
  display: flex;
  gap: 4px;
  margin: 36px calc(var(--gutter) * -1) 16px;
  padding: 6px var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(19, 21, 35, 0.06);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  scroll-snap-align: center;
  cursor: pointer;
}

.tab[aria-selected="true"] {
  background: var(--lavender);
  box-shadow: none;
}

.tab svg {
  opacity: 0.75;
}

.app {
  border-radius: 16px;
  background: #16181f;
  box-shadow: 0 20px 50px -30px rgba(19, 21, 35, 0.5);
  overflow: hidden;
  text-align: left;
}

.app__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  overflow: hidden;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

/* The keyboard hints belong to a keyboard. */
.app__bar-right {
  display: none;
  margin-left: auto;
  gap: 6px;
}

.app__pane {
  display: none;
}

.app__pane.is-active {
  display: block;
}

/* office pane */

.office {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  padding: 2px;
  background: #0f1117;
}

.office__cell {
  position: relative;
  min-height: 130px;
  background: linear-gradient(160deg, #1c1f2a, #14161d);
  overflow: hidden;
}

.office__cell--talking {
  background: linear-gradient(160deg, #232842, #171a26);
}

.office__name {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 16px);
  padding: 4px 8px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
}

.avatar-blob {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.18);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.office__toast {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px 10px 12px;
  border-radius: 12px;
  background: rgba(20, 22, 30, 0.94);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 13px;
  z-index: 2;
}

.office__toast .btn {
  min-height: 36px;
  padding: 7px 14px;
  font-size: 13px;
  border-radius: 9px;
}

/* board pane: columns keep their width and scroll, rather than squeezing */

.board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 10px;
  padding: 12px;
  background: #16181f;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}

.board__col {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  padding: 12px;
  scroll-snap-align: start;
}

.board__col h4 {
  color: rgba(255, 255, 255, 0.82);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.card-mini {
  padding: 11px 12px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.9);
  font-size: 13.5px;
  line-height: 1.35;
  margin-bottom: 8px;
}

.card-mini__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}

.tag {
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
}

.tag--blue {
  background: rgba(90, 120, 255, 0.2);
  color: #a9b8ff;
}

.tag--green {
  background: rgba(90, 200, 140, 0.18);
  color: #9fe0bd;
}

.tag--amber {
  background: rgba(230, 170, 60, 0.18);
  color: #f0cd92;
}

/* docs pane */

.docs {
  display: grid;
  background: #16181f;
}

.docs__tree {
  display: none;
  padding: 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
  font-size: 13.5px;
}

.docs__tree li {
  padding: 6px 8px;
  border-radius: 8px;
}

.docs__tree li.is-active {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.docs__tree li.is-child {
  padding-left: 22px;
}

.docs__page {
  padding: 18px;
}

.docs__page h4 {
  color: #fff;
  font-size: 20px;
  margin-bottom: 6px;
}

.docs__byline {
  color: rgba(255, 255, 255, 0.45);
  font-size: 12.5px;
  margin-bottom: 16px;
}

.skeleton {
  height: 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.09);
  margin-bottom: 9px;
}

.docs__callout {
  margin: 16px 0;
  padding: 12px 14px;
  border-left: 3px solid var(--blue);
  border-radius: 0 10px 10px 0;
  background: rgba(139, 92, 246, 0.12);
  color: rgba(255, 255, 255, 0.86);
  font-size: 13.5px;
}

/* chat pane */

.chat {
  display: grid;
  background: #16181f;
}

.chat__rail {
  display: none;
  padding: 18px 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
  font-size: 13.5px;
}

.chat__rail li {
  padding: 6px 8px;
  border-radius: 8px;
}

.chat__rail li.is-active {
  background: rgba(139, 92, 246, 0.25);
  color: #fff;
}

.chat__thread {
  padding: 16px;
}

.msg {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.msg__avatar {
  flex: 0 0 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.12);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.msg__who {
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
}

.msg__who span {
  margin-left: 8px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  font-weight: 400;
}

.msg__body {
  color: rgba(255, 255, 255, 0.78);
  font-size: 13.5px;
}

.msg__attach {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 11px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.75);
  font-size: 12.5px;
}

/* ---------- lavender definition panel ---------- */

.panel-lavender {
  border-radius: var(--radius-panel);
  background: var(--lavender);
  padding: 40px 22px;
  text-align: center;
}

.panel-lavender p {
  max-width: 860px;
  margin: 16px auto 0;
  font-size: 16.5px;
  color: var(--ink-soft);
}

/* ---------- feature showcase ---------- */

.showcase {
  position: relative;
  margin-top: 28px;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(19, 21, 35, 0.07);
  overflow: hidden;
}

.showcase__grid {
  display: grid;
}

/* The map first: it is the thing being explained. */
.showcase__canvas {
  position: relative;
  order: -1;
  min-height: 260px;
  background: linear-gradient(150deg, #171925, #241c3b);
}

.showcase__list {
  padding: 16px;
  background: var(--surface-warm);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feature-row {
  display: flex;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(19, 21, 35, 0.05);
}

.feature-row__icon {
  flex: 0 0 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--blue-tint);
  display: grid;
  place-items: center;
  color: var(--blue);
}

.feature-row h4 {
  font-size: 15px;
  letter-spacing: -0.02em;
  margin-bottom: 3px;
}

.feature-row p {
  font-size: 13.5px;
  line-height: 1.45;
}

.showcase__list .btn {
  width: 100%;
  margin-top: 6px;
}

.room {
  position: absolute;
  border-radius: 12px;
  border: 1px solid rgba(248, 250, 252, 0.09);
  background: rgba(16, 18, 27, 0.8);
}

.room__label {
  position: absolute;
  top: 8px;
  left: 10px;
  color: var(--ink-soft);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pip {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #b9c2ea;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9);
}

.pip--busy {
  background: #e8b47a;
}

.pip--free {
  background: #8fd0aa;
}

/*
 * The name tags are the width of their text and would hang outside the little
 * rooms on a phone. The dots alone still say who is free, busy and talking.
 */
.bubble {
  display: none;
  position: absolute;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--dark);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

/* ---------- two-column feature card ---------- */

.split-card {
  display: grid;
  gap: 24px;
  align-items: center;
  border-radius: var(--radius-panel);
  background: var(--surface);
  padding: 28px 20px;
  box-shadow: 0 1px 3px rgba(19, 21, 35, 0.06);
}

.split-card h2 {
  font-size: clamp(26px, 6.4vw, 44px);
  margin-top: 14px;
}

.split-card p {
  margin: 14px 0 20px;
  font-size: 16.5px;
}

.split-card .btn {
  width: 100%;
}

.poster {
  border-radius: 16px;
  background: linear-gradient(150deg, #241c3b, #10121b);
  padding: 30px 20px;
  text-align: center;
}

.poster strong {
  display: block;
  color: var(--ink);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.035em;
}

.poster em {
  display: block;
  margin-top: 4px;
  color: #f472b6;
  font-size: 23px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.035em;
}

.poster small {
  display: block;
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 13px;
}

/* ---------- product cards ---------- */

.cards-3 {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}

.card {
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: 16px;
  box-shadow: 0 1px 3px rgba(19, 21, 35, 0.06);
}

.card__art {
  height: 150px;
  border-radius: 14px;
  margin-bottom: 16px;
  background: var(--dark);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.card h3 {
  margin-bottom: 8px;
}

.card p {
  font-size: 15px;
}

.segmented {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.segmented span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12.5px;
  font-weight: 600;
}

.segmented span.is-on {
  background: rgba(230, 170, 60, 0.22);
  color: #f3d6a3;
}

.price-stack {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 0 16px;
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.82);
  font-size: 12.5px;
}

.price-row strong {
  color: #fff;
  font-weight: 600;
}

.price-row--total {
  background: rgba(139, 92, 246, 0.28);
  color: #fff;
}

.mini-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  width: 100%;
  padding: 0 16px;
}

.mini-grid div {
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.mini-grid div.is-hot {
  background: rgba(139, 92, 246, 0.4);
}

/* ---------- the close ----------
 *
 * What the comparison is for. It sits under both columns rather than inside
 * the winning one, because the point being made is the difference between them
 * — attaching the button to one column would make it that column's advert
 * instead of the argument's conclusion.
 *
 * One line, one button, one caveat. Anything more here competes with the
 * price table above for the same attention and wins nothing.
 */

.close {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin-top: 30px;
  text-align: center;
}

.close__line {
  margin: 0;
  max-width: 30ch;
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

/* The price is the one word in the sentence doing work, so it is the one word
 * that takes the accent. */
.close__line strong {
  color: var(--blue);
  font-weight: 700;
  white-space: nowrap;
}

/* The Portuguese trial label needs to wrap within a narrow phone viewport. */
.close__cta {
  white-space: normal;
  padding-right: 30px;
  padding-left: 30px;
}

.close__note {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.84rem;
}

@media (min-width: 720px) {
  .close__line {
    font-size: 1.55rem;
  }
}

/* ---------- comparison ---------- */

.compare {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}

.compare__col {
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: 20px;
}

.compare__col--muted {
  background: var(--surface-warm);
}

.compare__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.compare__head i {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  height: 34px;
  border-radius: 11px;
  background: rgba(248, 250, 252, 0.07);
  color: var(--ink);
  font-style: normal;
}

.compare__col--good .compare__head i {
  background: var(--brand-purple);
  color: #08090f;
}

.compare__list li {
  display: flex;
  gap: 10px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 12px;
}

.compare__list li::before {
  content: "·";
  color: rgba(248, 250, 252, 0.3);
  font-weight: 700;
}

.compare__col--good .compare__list li {
  color: var(--ink);
}

/*
 * The price table.
 *
 * Three prices are in play — what these tools cost elsewhere, what ours cost
 * bought one at a time, and what the kit costs — and the old layout hid all
 * three inside two separate invoices, as struck-through numbers with a line of
 * small print each. A reader could not tell which number was being compared to
 * which. A header row naming each column is the fix; everything below is that
 * row repeated five times and then totalled.
 *
 * It scrolls sideways inside itself rather than shrinking: four columns of
 * numbers under 620px stop being a table and become a puzzle.
 */
.ledger {
  margin-top: 24px;
  padding: 8px;
  border-radius: var(--radius-panel);
  background: var(--surface);
}

/*
 * On a phone the table is not a table.
 *
 * Four columns of prices need about 620px to stay legible, and sliding the kit
 * price off the right edge of a phone hides the one number the section exists
 * to give. So each product becomes a small card — name on top, the three
 * prices side by side under it — and each price carries the column name that
 * the header row would have carried. From 768px up the header row comes back
 * and the labels go away, because a real table reads faster once it fits.
 */
.lrow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "what what what"
    "rival solo kit";
  gap: 12px 8px;
  padding: 14px 12px;
  border-radius: 12px;
}

.lrow--head {
  display: none;
}

/* The header row sets its own size against .num, which is sized for prices. */
.lrow--head .num,
.lrow--head .kit-col {
  font-size: 13px;
}

.what {
  grid-area: what;
}

.num--rival {
  grid-area: rival;
}

.num--solo {
  grid-area: solo;
}

.kit-col {
  grid-area: kit;
}

.lrow .num,
.lrow .kit-col {
  text-align: left;
}

.cell-label {
  display: block;
  margin-bottom: 2px;
  color: var(--ink-soft);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* The column the page is selling, named in the colour it is sold in, and set
   a step larger than the columns it beats. */
.lrow--head .kit-col {
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
}

/* Our own name, wherever it appears in a column title. */
.star {
  color: var(--blue);
  font-weight: 700;
}

/* Banding rather than rules: five rows of four numbers need the eye held on
   one line, and a rule between every row draws more attention than the row. */
.lrow--item:nth-of-type(odd) {
  background: rgba(248, 250, 252, 0.035);
}

.what strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

.what em {
  color: var(--ink-soft);
  font-size: 12.5px;
  font-style: normal;
}

.num {
  font-size: 15px;
  /* Digits in a column only compare if they line up. */
  font-variant-numeric: tabular-nums;
}

.num--rival {
  color: var(--ink-soft);
}

.num--solo {
  color: var(--ink);
  font-weight: 600;
}


.inc {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--green);
  font-size: 14px;
  font-weight: 600;
}

.inc svg {
  flex: 0 0 16px;
}

.what .soon {
  margin-left: 8px;
}

.lrow--total {
  margin-top: 6px;
  border-top: 1px solid var(--hairline);
  padding-top: 16px;
  padding-bottom: 16px;
  color: var(--ink);
  font-weight: 600;
}

/* On the phone the two totals being beaten sit side by side and the kit's own
   total takes the full width under them, because it is the answer rather than
   the third of three columns. */
.lrow--total {
  grid-template-areas:
    "what what what"
    "rival rival solo"
    "kit kit kit";
}

.lrow--total .kit-col {
  margin-top: 4px;
}

.lrow--total .num {
  font-size: 18px;
}

.lrow--total s {
  text-decoration-thickness: 1px;
}

/*
 * The number the whole section is for.
 *
 * It used to be blue text among five other prices, which made it the same kind
 * of thing as the numbers it is meant to beat. Here it is the only filled
 * block on the page: the column it closes is tinted all the way up, so the eye
 * arrives already following it, and the price lands on the accent rather than
 * next to it.
 */
.kit-price {
  display: block;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--brand-purple);
  color: #08090f;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 8px 20px rgba(139, 92, 246, 0.22);
}

.kit-price em {
  display: block;
  margin-top: 4px;
  color: #08090f;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
}

/* The saving, on the block that earns it. */
.kit-price b {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

/*
 * The saving, said out loud.
 *
 * The page used to badge the small saving (the kit against our own five
 * products) next to the total and leave the large one — the kit against the
 * conventional set — for the reader to work out. Both belong here, largest
 * first, because that is the order they matter in.
 */
.save {
  margin: 12px 4px 4px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(47, 143, 91, 0.1);
  color: var(--ink);
  font-size: 15px;
  text-align: center;
}

.save strong {
  color: var(--green);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

/*
 * The small print the totals need. One of the five products cannot be bought
 * yet, so the sum is only honest if the page says the kit carries CRM in when
 * it ships; and "elsewhere" is a claim about other people's list prices, which
 * has to say so.
 */
.ledger__fine {
  margin: 10px 16px 8px;
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.5;
}

.soon {
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--badge-tint);
  color: var(--badge-ink);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* ---------- testimonials ---------- */

.quotes-wrap {
  position: relative;
}

.quotes-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px;
  background: linear-gradient(to bottom, rgba(8, 9, 15, 0), var(--ground) 72%);
  pointer-events: none;
}

.quotes {
  column-count: 1;
  column-gap: 16px;
  margin-top: 28px;
}

.quote {
  break-inside: avoid;
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(19, 21, 35, 0.05);
}

.quote p {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
}

.quote__who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.quote__avatar {
  flex: 0 0 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(140deg, #241c3b, #202233);
  display: grid;
  place-items: center;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
}

.quote__who strong {
  display: block;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
}

.quote__who span {
  font-size: 13.5px;
}

.quote .btn {
  width: 100%;
  margin-top: 14px;
}

.quotes-fade {
  display: flex;
  justify-content: center;
  margin-top: -56px;
  position: relative;
  z-index: 2;
}

/* ---------- start steps ---------- */

.start {
  display: grid;
  gap: 26px;
  border-radius: var(--radius-panel);
  background: var(--surface);
  padding: 28px 20px;
  align-items: start;
}

.start h2 {
  font-size: clamp(26px, 6.4vw, 46px);
  margin: 14px 0;
}

.start > div > .btn {
  width: 100%;
}

.steps {
  border-radius: 18px;
  border: 1px solid var(--hairline);
  overflow: hidden;
}

.step {
  padding: 18px;
  border-bottom: 1px solid var(--hairline);
}

.step:last-of-type {
  border-bottom: 0;
}

.step__pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 8px;
}

.step:nth-of-type(1) .step__pill {
  background: #f6ecc8;
  color: #7a5c11;
}

.step:nth-of-type(2) .step__pill {
  background: #cfdcf3;
  color: #2b3d76;
}

.step:nth-of-type(3) .step__pill {
  background: #cfe9d9;
  color: #23603f;
}

.step h4 {
  font-size: 17px;
}

.steps .btn {
  margin: 16px;
  width: calc(100% - 32px);
}

/* ---------- faq ---------- */

.faq {
  max-width: 640px;
  margin: 28px auto 0;
}

.faq__item {
  border-radius: 14px;
  background: var(--surface);
  margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(19, 21, 35, 0.05);
  overflow: hidden;
}

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 14px 16px 16px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: left;
  cursor: pointer;
}

.faq__q i {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--blue-tint);
  color: var(--blue);
  font-style: normal;
  transition: transform 0.2s ease;
}

.faq__item.is-open .faq__q i {
  transform: rotate(180deg);
}

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 280ms cubic-bezier(0.32, 0.72, 0, 1);
}

.faq__item.is-open .faq__a {
  grid-template-rows: 1fr;
}

.faq__a-inner {
  overflow: hidden;
  padding: 0 16px;
  font-size: 15.5px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 160ms ease, transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
}

.faq__item.is-open .faq__a-inner {
  padding-bottom: 18px;
  opacity: 1;
  transform: translateY(0);
}

.faq__helper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  max-width: 640px;
  margin: 24px auto 0;
  padding: 18px 16px;
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  text-align: center;
}

/* ---------- final cta + footer ---------- */

.final {
  border-radius: var(--radius-panel);
  background: var(--dark);
  color: rgba(247, 246, 245, 0.75);
  padding: 44px 20px 32px;
  margin-bottom: 24px;
}

.final h2 {
  color: #fff;
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

.final__sub {
  max-width: 560px;
  margin: 16px auto 0;
  text-align: center;
  font-size: 16.5px;
}

.final__cta {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.final__cta .btn {
  width: 100%;
  max-width: 340px;
}

.footer {
  margin-top: 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 28px;
}

.footer__top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer .logo {
  color: #fff;
}

.footer__social {
  display: flex;
  gap: 10px;
}

.footer__social a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 12px;
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.footer__cols h5 {
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  margin: 0 0 12px;
}

.footer__cols li {
  margin-bottom: 8px;
  font-size: 14.5px;
}

.footer__cols a:hover {
  color: #fff;
}

.footer__legal {
  margin-top: 28px;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(247, 246, 245, 0.5);
  max-width: 960px;
}

/* ---------- language picker ---------- */

.lang {
  position: relative;
  z-index: 1;
}

.lang[data-open] {
  z-index: 70;
}

.lang__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 48px;
  padding: 9px 12px;
  border: 0;
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.06);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease;
}

.lang__button:hover {
  background: rgba(248, 250, 252, 0.1);
}

.lang__globe {
  opacity: 0.65;
}

.lang__chev {
  opacity: 0.55;
  transition: transform 0.18s ease;
}

.lang[data-open] .lang__chev {
  transform: rotate(180deg);
}

.lang__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  z-index: 60;
  padding: 6px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 18px 40px -18px rgba(19, 21, 35, 0.32), 0 0 0 1px var(--hairline);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.lang[data-open] .lang__menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.lang__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: left;
  cursor: pointer;
}

.lang__option:hover {
  background: rgba(248, 250, 252, 0.06);
}

.lang__option svg {
  flex: 0 0 auto;
  opacity: 0;
  color: var(--blue);
}

.lang__option[aria-selected="true"] {
  font-weight: 600;
}

.lang__option[aria-selected="true"] svg {
  opacity: 1;
}

.lang--dark {
  display: block;
  margin-top: 28px;
}

.lang--dark .lang__button {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

.lang--dark .lang__button:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lang--dark .lang__menu {
  background: #1d2030;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.lang--dark .lang__option {
  color: rgba(255, 255, 255, 0.85);
}

.lang--dark .lang__option:hover {
  background: rgba(255, 255, 255, 0.08);
}

.lang--dark .lang__option[aria-selected="true"] {
  color: #fff;
}

.lang--dark .lang__option svg {
  color: #8f9bff;
}

@media (prefers-reduced-motion: reduce) {
  .faq__a,
  .faq__a-inner,
  .faq__q i,
  .nav__menu,
  .lang__menu {
    transition-duration: 1ms;
  }
}

/* ==========================================================================
   From 768px: room for two columns and a little more type.
   ========================================================================== */

@media (min-width: 768px) {
  :root {
    --gutter: 24px;
    --section-gap: 80px;
    --radius-panel: 32px;
    --radius-card: 20px;
  }

  body {
    font-size: 17px;
  }

  .office {
    grid-template-columns: repeat(3, 1fr);
  }

  .office__cell {
    min-height: 180px;
  }

  .office__toast {
    left: 50%;
    right: auto;
    bottom: 18px;
    width: max-content;
    max-width: calc(100% - 32px);
    transform: translateX(-50%);
    font-size: 14px;
  }

  .board {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
    overflow-x: visible;
    padding: 16px;
  }

  .cards-3,
  .compare {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* Wide enough for four columns: the table stops being five small cards. */
  .lrow {
    grid-template-columns: minmax(150px, 1.6fr) 1fr 1fr 1.15fr;
    grid-template-areas: none;
    align-items: center;
    /* Wide between columns: the last price sits against a filled block, and a
       number touching that edge reads as part of it. */
    gap: 12px 32px;
    padding: 14px 16px;
  }

  /* Back to source order in four columns: the named areas above would keep
     placing every cell in the phone's second row. */
  .what,
  .num--rival,
  .num--solo,
  .kit-col {
    grid-area: auto;
  }

  .lrow--head {
    display: grid;
    padding-bottom: 6px;
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* The header row says it once for the whole column. */
  .cell-label {
    display: none;
  }

  .lrow--item .kit-col {
    margin-block: -14px;
    padding-block: 14px;
    background: rgba(139, 92, 246, 0.05);
  }

  /* The tint starts under the header and ends on the price block. */
  .lrow--item:first-of-type .kit-col {
    border-radius: 10px 10px 0 0;
  }

  /* Four columns again, the kit's block closing its own. */
  .lrow--total {
    grid-template-areas: none;
  }

  .lrow--total .kit-col {
    margin-top: 0;
  }

  .lrow .num {
    text-align: right;
  }

  /* The kit's column is a band with a block at its foot: everything in it
     lines up with that block rather than with the column edge. */
  .lrow .kit-col {
    text-align: center;
  }

  .quotes {
    column-count: 2;
  }

  .split-card,
  .start {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    padding: 36px 28px;
  }

  .split-card .btn,
  .start > div > .btn,
  .showcase__list .btn,
  .quote .btn {
    width: auto;
  }

  .faq__helper {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: 18px 18px 18px 22px;
  }

  .panel-lavender {
    padding: 56px 40px;
  }

  .final {
    padding: 64px 40px 40px;
  }

  .footer__cols {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .showcase__canvas {
    min-height: 340px;
  }

  .bubble {
    display: block;
  }
}

/* ==========================================================================
   From 1080px: the full desktop layout — links in the header, three columns.
   ========================================================================== */

@media (min-width: 1080px) {
  :root {
    --nav-height: 80px;
    --section-gap: 96px;
    --radius-panel: 40px;
  }

  .nav__pill {
    display: inline-flex;
  }

  .nav__burger {
    display: none;
  }

  .nav__menu {
    position: static;
    display: flex;
    align-items: center;
    flex: 1;
    gap: 20px;
    padding: 0;
    background: none;
    box-shadow: none;
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .nav__links {
    display: flex;
    gap: 26px;
    margin: 0 auto;
    font-size: 16px;
    white-space: nowrap;
  }

  .nav__links a {
    padding: 0;
    border: 0;
  }

  .nav__links a:hover {
    color: var(--blue);
  }

  .nav__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
  }

  .nav .lang__button {
    width: auto;
    min-height: 40px;
    border-radius: 10px;
    font-size: 15px;
  }

  .nav .lang__menu {
    left: auto;
    min-width: 208px;
  }

  .logo {
    font-size: 20px;
  }

  .btn {
    min-height: 44px;
    padding: 13px 24px;
  }

  .btn--ghost {
    background: transparent;
  }

  .btn--lg {
    min-height: 52px;
    padding: 16px 28px;
  }

  .hero {
    padding: 76px 0 0;
  }

  .hero__sub {
    margin-top: 26px;
    font-size: 25px;
  }

  .hero__cta {
    margin-top: 34px;
  }

  .hero__cta .btn {
    width: auto;
  }

  .hero__note {
    font-size: 14px;
  }

  .tabs {
    justify-content: center;
    margin: 64px auto 20px;
    padding: 6px;
    width: max-content;
    max-width: 100%;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: 0 1px 3px rgba(19, 21, 35, 0.06);
    overflow: visible;
  }

  .tab {
    background: transparent;
    box-shadow: none;
    padding: 10px 18px;
  }

  .app {
    border-radius: 22px;
  }

  .app__bar {
    padding: 12px 14px;
    font-size: 13px;
  }

  .app__bar-right {
    display: flex;
  }

  .office__cell {
    min-height: 228px;
  }

  .avatar-blob {
    font-size: 46px;
  }

  .board {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 18px;
  }

  .docs {
    grid-template-columns: 220px 1fr;
    min-height: 460px;
  }

  .docs__tree,
  .chat__rail {
    display: block;
  }

  .docs__page {
    padding: 28px 32px;
  }

  .docs__page h4 {
    font-size: 26px;
  }

  .chat {
    grid-template-columns: 210px 1fr;
    min-height: 460px;
  }

  .chat__thread {
    padding: 22px 26px;
  }

  .msg__body,
  .msg__who {
    font-size: 14px;
  }

  .panel-lavender {
    padding: 88px 72px;
  }

  .panel-lavender p {
    margin-top: 24px;
    font-size: 18px;
  }

  .showcase {
    margin-top: 52px;
    border-radius: 26px;
  }

  .showcase__grid {
    grid-template-columns: 340px 1fr;
    min-height: 470px;
  }

  .showcase__canvas {
    order: 0;
    padding: 28px;
  }

  .showcase__list {
    padding: 26px;
    gap: 10px;
  }

  .showcase__list .btn {
    margin-top: auto;
  }

  .feature-row {
    padding: 15px;
  }

  .feature-row h4 {
    font-size: 15.5px;
  }

  .room__label {
    font-size: 12px;
  }

  .pip {
    width: 26px;
    height: 26px;
  }

  .bubble {
    padding: 5px 10px;
    font-size: 12.5px;
  }

  .split-card,
  .start {
    gap: 56px;
    padding: 56px;
  }

  .cards-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 56px;
  }

  .compare {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 56px;
  }

  .compare__col {
    padding: 28px;
  }

  .compare__head {
    margin-bottom: 26px;
    font-size: 17px;
  }

  .compare__head i {
    flex-basis: 38px;
    height: 38px;
  }

  .compare__list li {
    font-size: 19px;
    margin-bottom: 14px;
  }

  .card {
    padding: 20px;
  }

  .card__art {
    height: 190px;
    margin-bottom: 20px;
  }

  .ledger {
    margin-top: 32px;
    padding: 12px;
  }

  .lrow {
    padding: 16px;
  }

  .lrow--total .num {
    font-size: 19px;
  }

  .kit-price {
    font-size: 32px;
  }

  .quotes {
    column-count: 3;
    column-gap: 24px;
    margin-top: 56px;
  }

  .quote {
    padding: 24px;
    margin-bottom: 24px;
  }

  .quote p {
    font-size: 16.5px;
  }

  .quotes-wrap::after {
    height: 220px;
  }

  .quotes-fade {
    margin-top: -76px;
  }

  .start h2 {
    margin: 20px 0;
  }

  .steps {
    border-radius: 22px;
  }

  .step {
    padding: 22px 24px;
  }

  .step h4 {
    font-size: 19px;
  }

  .steps .btn {
    margin: 20px 24px 24px;
    width: calc(100% - 48px);
  }

  .faq {
    margin-top: 56px;
  }

  .faq__item {
    margin-bottom: 12px;
  }

  .faq__q {
    padding: 20px 18px 20px 22px;
    font-size: 16.5px;
  }

  .faq__q i {
    flex-basis: 34px;
    height: 34px;
  }

  .faq__a-inner {
    padding: 0 22px;
    font-size: 16px;
  }

  .faq__item.is-open .faq__a-inner {
    padding-bottom: 22px;
  }

  .faq__helper {
    margin-top: 40px;
  }

  .final {
    padding: 92px 64px 48px;
    margin-bottom: 40px;
  }

  .final__sub {
    margin-top: 22px;
    font-size: 18px;
  }

  .final__cta {
    margin-top: 34px;
  }

  .final__cta .btn {
    width: auto;
  }

  .footer {
    margin-top: 76px;
    padding-top: 40px;
  }

  .footer__cols {
    grid-template-columns: repeat(4, minmax(0, 200px));
    margin-top: 46px;
  }

  .footer__cols h5,
  .footer__cols li {
    font-size: 15px;
  }

  .footer__legal {
    margin-top: 46px;
    font-size: 12.5px;
  }

  .lang--dark {
    display: inline-block;
    margin-top: 34px;
  }

  .lang--dark .lang__button {
    width: auto;
  }

  .lang--dark .lang__menu {
    top: auto;
    bottom: calc(100% + 8px);
    left: 0;
    right: auto;
    min-width: 208px;
  }
}