/* The clearer home page: what we automate, three steps, the booking section and the phone booking bar.
   Also the intro and closing band of the "How we work" page. Builds on the tokens in base.css. */

/* Long German words in the big headlines break instead of running off small screens. */
.hero-title, .display { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }

.hero-demo-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--ink-3);
}
.hero-demo-label .i { width: 13px; height: 13px; transform: rotate(90deg); }

/* ---------- What we automate ---------- */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.auto-card {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
}
.auto-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--chip-ink);
}
.auto-icon .i { width: 20px; height: 20px; }
/* The four AI employees: a soft band in each one's colour, its promise, a short example of it at work and the price. */
.emp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.emp-cards .auto-card { --card-c: var(--chip-1); background: linear-gradient(to bottom, color-mix(in srgb, var(--card-c) 22%, var(--bg-soft)), var(--bg-soft) 60%); }
.emp-cards .auto-card.c2 { --card-c: var(--chip-2); }
.emp-cards .auto-card.c3 { --card-c: var(--chip-3); }
.emp-cards .auto-card.c5 { --card-c: var(--chip-5); }
.auto-tagline { margin: -6px 0 0; font-size: 15.5px; font-weight: 600; color: var(--ink); }
.auto-price { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); }
.auto-price b { font-family: var(--font-display); font-size: 19px; letter-spacing: -0.02em; color: var(--ink); }
.auto-price small { font-size: 12.5px; color: var(--ink-3); }
.auto-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
/* What a card shows at the top: the working days it gives back each month, at its example volumes. */
.emp-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.emp-card-days { display: grid; justify-items: end; max-width: 16ch; margin: 0; font-size: 12.5px; line-height: 1.35; text-align: end; color: var(--ink-2); }
.emp-card-days b { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; color: var(--ok); }
/* The employee at work: a short example feed of three events. They play in one after another once the card is in
   view (js/main.js); without script or with reduced motion they are simply shown. */
.emp-feed { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); }
.emp-feed-label { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.emp-feed-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--card-c); }
.emp-feed ol { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.emp-feed li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px;
  padding-inline-end: 10px;
  border-radius: 11px;
  background: var(--bg-soft);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.emp-feed li:nth-child(1) { transition-delay: 0.15s; }
.emp-feed li:nth-child(2) { transition-delay: 0.75s; }
.emp-feed li:nth-child(3) { transition-delay: 1.35s; }
/* The last event is the result. */
.emp-feed li:last-child { background: color-mix(in srgb, var(--ok) 11%, var(--bg-soft)); }
.emp-feed.is-waiting li { opacity: 0; transform: translateY(8px) scale(0.98); transition: none; }
.emp-feed-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: color-mix(in srgb, var(--card-c) 60%, var(--surface)); color: var(--chip-ink); }
.emp-feed-icon .i { width: 15px; height: 15px; }
.emp-feed time { font-family: var(--font-mono); font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.emp-card-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.emp-card-foot .auto-more { margin-top: 0; margin-inline-start: auto; }
/* Head, name, promise, feed, price: each part lines up with the card next to it. */
@supports (grid-template-rows: subgrid) {
  .emp-cards .auto-card { grid-row: span 5; grid-template-rows: subgrid; }
}
@media (prefers-reduced-motion: reduce) { .emp-feed li { transition: none; } }

.auto-foot {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 24px 48px;
  align-items: center;
  margin-top: 32px;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.auto-who { display: grid; gap: 8px; }
.auto-who p:not(.included-title) { margin: 0; color: var(--ink-2); line-height: 1.6; }
.auto-ask { display: grid; gap: 14px; justify-items: start; }
.auto-ask p { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }

/* ---------- How it works: three steps ---------- */
.how { padding-top: 0; }
.how-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.how-step {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 30px 28px 28px;
  border-radius: var(--radius-lg);
  background: var(--deep);
  color: var(--deep-ink);
}
.how-num {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--deep-ink);
  color: var(--deep);
  font-family: var(--font-display);
  font-weight: 700;
}
.how-kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--deep-ink-3);
}
.how-step h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.how-step p:last-child { margin: 0; color: var(--deep-ink-2); font-size: 15px; line-height: 1.6; }
.how-more { margin: 28px 0 0; text-align: center; }
.how-more a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--line-strong);
}
.how-more a:hover { text-decoration-color: currentColor; }
.how-more .i { width: 13px; height: 13px; }

/* ---------- Booking section (closing) ---------- */
.book .map-head { gap: 20px; }
.btn-lg { height: 56px; padding: 0 28px; font-size: 16px; justify-self: start; }
.book-cta .i:first-child { width: 17px; height: 17px; }
.book-cta:hover .i:first-child { transform: none; }
.quiz-wrap { display: grid; gap: 16px; min-width: 0; }
.quiz-intro { display: grid; gap: 4px; padding-inline: 6px; }
.quiz-intro p { margin: 0; color: var(--ink-2); font-size: 15px; }
.quiz-intro .quiz-intro-title { color: var(--ink); font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }


/* ---------- How we work page ---------- */
.page-intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(64px, 9vw, 120px) clamp(24px, 4vw, 48px);
}
.page-intro-inner { display: grid; justify-items: center; gap: 22px; text-align: center; }
.page-intro .lead { margin-inline: auto; }
.cta-band { padding-block: 0 var(--section-space); }
.cta-band-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  padding: clamp(26px, 4vw, 48px);
  border-radius: var(--radius-lg);
  background: var(--deep);
  color: var(--deep-ink);
}
.cta-band-card h2 { margin: 0 0 6px; font-family: var(--font-display); font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.03em; }
.cta-band-card p { margin: 0; color: var(--deep-ink-2); }

/* ---------- Narrower screens ---------- */
@media (max-width: 1000px) {
  .auto-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auto-foot { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .auto-grid, .how-steps { grid-template-columns: minmax(0, 1fr); }
  .auto-card, .how-step { padding: 22px; }
  .btn-lg { width: 100%; justify-self: stretch; }
  .hero-ctas .btn { width: 100%; }
}

/* ---------- Home cards open their department on the automations page ---------- */
.auto-card { position: relative; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.auto-card:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.auto-card:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }
.auto-link { color: inherit; outline: none; }
.auto-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.auto-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--ink); }
.auto-more .i { width: 13px; height: 13px; transition: transform 0.2s ease; }
.auto-card:hover .auto-more .i { transform: translateX(3px); }
[dir="rtl"] .auto-card:hover .auto-more .i { transform: translateX(-3px); }
.auto-packs-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-weight: 600; font-size: 14.5px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
.auto-packs-link .i { width: 13px; height: 13px; }
@media (prefers-reduced-motion: reduce) { .auto-card:hover { transform: none; } }

/* ---------- What slows you down? (js/main.js): picking a problem lights up the AI employee for it ---------- */
.auto-pick { display: grid; justify-items: center; gap: 12px; margin: -6px 0 28px; text-align: center; }
.auto-pick[hidden] { display: none; }
.auto-pick-q { margin: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.auto-pick-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.auto-pick-chips button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.auto-pick-chips button:hover { border-color: var(--ink); color: var(--ink); }
.auto-pick-chips button[aria-pressed="true"] { border-color: var(--btn-bg); background: var(--btn-bg); color: var(--btn-fg); }
.auto-pick-chips button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.auto-pick-chips .i { width: 15px; height: 15px; }
.emp-cards .auto-card { transition: opacity 0.35s ease, filter 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease, border-color 0.2s ease; }
.emp-cards[data-picked] .auto-card:not(.is-picked) { opacity: 0.4; filter: saturate(0.5); transform: scale(0.98); }
.emp-cards .auto-card.is-picked { border-color: color-mix(in srgb, var(--card-c) 80%, var(--line-strong)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--card-c) 60%, transparent), var(--shadow-lg); }
@media (prefers-reduced-motion: reduce) {
  .emp-cards .auto-card, .auto-pick-chips button { transition: none; }
}