/* Reference coordinates: upper board 953×1651; lower board 758×2073.
   u and v are proportional units, converted below into CSS calc() expressions.
   All interface copy remains HTML. Photography contains no interface labels. */
@font-face {
  font-family: Inter;
  src: url("site-assets/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --u: min(calc(100vw / 953), 1.6px);
  --v: calc(var(--u) * 953 / 758);
  --orange: #ff5909;
  --ink: #07121e;
  --muted: #697990;
  --line: #e8edf4;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(55 * var(--u));
  scrollbar-width: none;
}
html::-webkit-scrollbar {
  width: 0;
}
body {
  margin: 0 auto;
  max-width: calc(953 * var(--u));
  font-family: Inter, Arial, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-size: calc(14 * var(--u));
  line-height: 1.5;
  background: #fff;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  cursor: pointer;
  color: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid #ff874a;
  outline-offset: 4px;
}
button:disabled {
  cursor: default;
}
h1,
h2,
h3,
h4,
p {
  margin: 0;
}
h1,
h2,
h3 {
  letter-spacing: -0.045em;
  line-height: 1.1;
}
h2 {
  font-size: calc(31 * var(--u));
  font-weight: 740;
}
p {
  color: var(--muted);
}
svg,
img {
  display: block;
  max-width: 100%;
}
.icon {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.eyebrow {
  display: block;
  color: var(--orange);
  font-size: calc(9 * var(--u));
  font-weight: 740;
  letter-spacing: 0.095em;
  line-height: 1.4;
  text-transform: uppercase;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(23 * var(--u));
  border: 0;
  border-radius: calc(4 * var(--u));
  background: var(--orange);
  color: white;
  font-weight: 640;
  font-size: calc(13 * var(--u));
  height: calc(40 * var(--u));
  padding: 0 calc(17 * var(--u));
  white-space: nowrap;
  transition:
    background 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}
.btn:hover {
  background: #e64c00;
  box-shadow: 0 calc(5 * var(--u)) calc(18 * var(--u)) #ff590928;
  transform: translateY(-1px);
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: calc(13 * var(--u));
  font-size: calc(12 * var(--u));
  font-weight: 600;
  color: var(--orange);
  line-height: 1.5;
}
.text-link > span {
  transition: transform 0.2s;
}
.text-link:hover > span {
  transform: translateX(4px);
}
.text-link.light {
  color: #fff;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  font-size: calc(19 * var(--u));
  font-weight: 780;
  letter-spacing: calc(-0.8 * var(--u));
  line-height: 1;
}
.brand-mark {
  background: var(--orange);
  color: white;
  width: calc(24 * var(--u));
  height: calc(25 * var(--u));
  border-radius: calc(3 * var(--u));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(21 * var(--u));
  font-weight: 730;
  line-height: 1;
  letter-spacing: calc(-0.8 * var(--u));
  flex-shrink: 0;
}
.brand-mio {
  font-weight: 570;
}
.skip-link {
  position: fixed;
  left: 12px;
  top: -100px;
  z-index: 100;
  background: white;
  padding: 12px;
  font-size: 14px;
}
.skip-link:focus {
  top: 12px;
}
/* Header — reference board top 0–43. */
.site-header {
  height: calc(43 * var(--u));
  background: #fff;
  position: relative;
  z-index: 20;
}
.header-inner {
  height: 100%;
  display: grid;
  grid-template-columns: calc(220 * var(--u)) 1fr calc(212 * var(--u));
  align-items: center;
  padding: 0 calc(33 * var(--u)) 0 calc(50 * var(--u));
}
.main-nav {
  display: flex;
  gap: calc(20 * var(--u));
  align-items: center;
  font-size: calc(7.5 * var(--u));
  font-weight: 600;
  white-space: nowrap;
}
.main-nav a:hover {
  color: var(--orange);
}
.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(26 * var(--u));
  font-size: calc(8 * var(--u));
  color: #68748a;
}
.header-actions .btn {
  height: calc(31 * var(--u));
  font-size: calc(9 * var(--u));
  padding: 0 calc(14 * var(--u));
  gap: calc(3 * var(--u));
}
.language {
  font-size: calc(8 * var(--u));
  letter-spacing: 0.04em;
}
.menu-toggle {
  display: none;
}
/* Hero — reference board 43–548. */
.hero {
  height: calc(505 * var(--u));
  position: relative;
  overflow: hidden;
  background: #141018 url("site-assets/hero-cinema.webp") center/100% 100% no-repeat;
  color: white;
}
.hero:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #07091622, transparent 65%);
  pointer-events: none;
}
.hero-copy {
  position: absolute;
  left: calc(50 * var(--u));
  top: calc(125 * var(--u));
  width: calc(370 * var(--u));
  z-index: 1;
}
.hero-copy .eyebrow {
  font-size: calc(10 * var(--u));
  letter-spacing: 0.09em;
}
.hero h1 {
  font-size: calc(50 * var(--u));
  line-height: 0.98;
  font-weight: 740;
  letter-spacing: calc(-2.4 * var(--u));
  margin: calc(10 * var(--u)) 0 calc(14 * var(--u));
}
.hero-copy > p {
  font-size: calc(13.5 * var(--u));
  line-height: calc(20 * var(--u));
  color: #e2e2e7;
  width: calc(370 * var(--u));
  font-weight: 420;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: calc(27 * var(--u));
  margin-top: calc(17 * var(--u));
}
.hero-actions .btn {
  width: calc(143 * var(--u));
}
.hero-actions .text-link {
  font-size: calc(12 * var(--u));
  gap: calc(14 * var(--u));
}
.workspace {
  border: calc(1 * var(--u)) solid #e9edf3;
  border-radius: calc(5 * var(--u));
  background: #fffffffa;
  box-shadow: 0 calc(5 * var(--u)) calc(18 * var(--u)) #24364b05;
  min-width: 0;
  overflow: hidden;
}
.booking-workspace {
  position: absolute;
  left: calc(431 * var(--u));
  top: calc(174 * var(--u));
  width: calc(488 * var(--u));
  height: calc(286 * var(--u));
  display: grid;
  grid-template-columns: calc(80 * var(--u)) 1fr;
}
.app-sidebar {
  position: relative;
  background: #f8fafd;
  border-right: calc(1 * var(--u)) solid #edf0f5;
  padding: calc(11 * var(--u)) calc(7 * var(--u));
  color: #7b899a;
  min-width: 0;
}
.mini-brand {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  font-size: calc(9 * var(--u));
  font-weight: 740;
  color: #192332;
  line-height: 1;
  white-space: nowrap;
}
.mini-brand > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--orange);
  color: #fff;
  width: calc(14 * var(--u));
  height: calc(16 * var(--u));
  border-radius: calc(2 * var(--u));
  font-size: calc(13 * var(--u));
  font-weight: 700;
}
.app-nav {
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--u));
  margin-top: calc(10 * var(--u));
}
.app-nav > span,
.app-sidebar-bottom > span {
  display: flex;
  align-items: center;
  gap: calc(5 * var(--u));
  white-space: nowrap;
  font-size: calc(6.4 * var(--u));
  line-height: 1.3;
  padding: calc(5 * var(--u)) calc(4 * var(--u));
  border-radius: calc(3 * var(--u));
  font-weight: 500;
}
.app-nav .icon,
.app-sidebar-bottom .icon {
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  stroke-width: 1.3;
}
.app-nav .active {
  background: #fff0e8;
  color: var(--orange);
}
.app-sidebar-bottom {
  position: absolute;
  bottom: calc(9 * var(--u));
  left: calc(7 * var(--u));
  right: calc(7 * var(--u));
}
.booking-main {
  padding: calc(10 * var(--u)) calc(10 * var(--u)) calc(7 * var(--u))
    calc(12 * var(--u));
  min-width: 0;
}
.release-header {
  position: relative;
  display: flex;
  gap: calc(8 * var(--u));
  align-items: center;
  min-height: calc(35 * var(--u));
}
.poster {
  background: url("site-assets/northern-art.webp") center/cover;
  border-radius: calc(3 * var(--u));
  overflow: hidden;
  flex-shrink: 0;
}
.small-poster {
  width: calc(26 * var(--u));
  height: calc(34 * var(--u));
}
.release-header h3 {
  font-size: calc(11 * var(--u));
  font-weight: 740;
  letter-spacing: calc(-0.28 * var(--u));
  margin-bottom: calc(5 * var(--u));
}
.release-meta {
  display: flex;
  gap: calc(7 * var(--u));
  align-items: center;
  font-size: calc(5.7 * var(--u));
  color: #96a0ad;
  white-space: nowrap;
}
.tag {
  display: inline-block;
  background: #f1f4f8;
  border-radius: calc(3 * var(--u));
  font-size: calc(6 * var(--u));
  color: #71809a;
  padding: calc(2 * var(--u)) calc(5 * var(--u));
  line-height: 1.2;
  font-weight: 600;
}
.tag.green {
  color: #3a996b;
  background: #e4f5ec;
}
.release-filters {
  position: absolute;
  right: 0;
  top: calc(1 * var(--u));
  display: flex;
  gap: calc(4 * var(--u));
  font-size: calc(6.2 * var(--u));
  color: #40516c;
}
.release-filters > span {
  padding: calc(4 * var(--u)) calc(5 * var(--u));
  border: calc(1 * var(--u)) solid #e2e8f1;
  border-radius: calc(3 * var(--u));
  background: #fff;
}
.release-header > div:nth-child(2) {
  align-self: start;
  padding-top: calc(3 * var(--u));
}
.release-meta {
  margin-top: calc(7 * var(--u));
}
.release-filters {
  top: 0;
}
.release-header h3 {
  padding-right: calc(168 * var(--u));
  white-space: nowrap;
}
.app-tabs {
  display: flex;
  gap: calc(21 * var(--u));
  margin-top: calc(9 * var(--u));
  border-bottom: calc(1 * var(--u)) solid #e7edf3;
  color: #6d7c91;
  font-size: calc(6.9 * var(--u));
  line-height: 1;
}
.app-tabs > span {
  padding: calc(8 * var(--u)) 0 calc(7 * var(--u));
}
.app-tabs .selected {
  color: #2c3e55;
  border-bottom: calc(1.5 * var(--u)) solid var(--orange);
  font-weight: 650;
}
.table-scroll {
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: thin;
}
table {
  border-collapse: collapse;
  width: 100%;
  text-align: left;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
th,
td {
  border-bottom: calc(1 * var(--u)) solid #edf1f7;
  font-weight: 400;
}
thead th {
  color: #667990;
  background: #fbfcfe;
}
tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}
.booking-table {
  font-size: calc(6.9 * var(--u));
  line-height: 1.4;
  table-layout: fixed;
}
.booking-table thead th {
  height: calc(42 * var(--u));
  text-align: center;
  font-size: calc(7 * var(--u));
  font-weight: 650;
  background: #f5f7fa;
  border-right: calc(1 * var(--u)) solid #edf1f7;
}
.booking-table thead th:first-child {
  width: calc(91 * var(--u));
  text-align: left;
  background: #fbfcfe;
}
.booking-table th small {
  display: block;
  color: #8694a9;
  font-size: calc(5.8 * var(--u));
  font-weight: 400;
  margin-top: calc(3 * var(--u));
}
.booking-table tbody th {
  font-weight: 650;
  letter-spacing: calc(-0.15 * var(--u));
  color: #334158;
  width: calc(91 * var(--u));
  padding: calc(6 * var(--u)) calc(4 * var(--u)) calc(6 * var(--u)) 0;
}
.booking-table td {
  padding: calc(5 * var(--u)) calc(2 * var(--u));
  border-right: calc(1 * var(--u)) solid #edf1f7;
  height: calc(35 * var(--u));
}
.schedule {
  display: block;
  text-align: center;
  height: calc(24 * var(--u));
  line-height: calc(24 * var(--u));
  font-size: calc(7 * var(--u));
  border-radius: calc(2 * var(--u));
  white-space: nowrap;
}
.peach {
  background: #ffe2cc;
  color: #7e5c45;
}
.orange-fill {
  background: var(--orange);
  color: white;
  box-shadow: 0 0 0 calc(2 * var(--u)) #ffb38244;
}
.mint {
  background: #dff3e9;
  color: #3c7360;
}
.empty {
  background: #f2f5f9;
  color: #8792a2;
}
.booking-legend {
  display: flex;
  gap: calc(12 * var(--u));
  font-size: calc(5.6 * var(--u));
  color: #7d8b9d;
  padding-top: calc(9 * var(--u));
  white-space: nowrap;
  line-height: 1;
}
.booking-legend > span {
  display: flex;
  gap: calc(4 * var(--u));
  align-items: center;
}
.booking-legend i {
  width: calc(6 * var(--u));
  height: calc(6 * var(--u));
  border-radius: 50%;
  display: block;
}
.orange-dot {
  background: var(--orange);
}
.peach-dot {
  background: #ffbd91;
}
.green-dot {
  background: #26b78b;
}
.gray-dot {
  background: #a8adb8;
}
/* Global monitoring — board 548–744. */
.coverage {
  height: calc(196 * var(--u));
  background: #fffdfa url("site-assets/world-dots.svg") center/100% 100% no-repeat;
  position: relative;
}
.coverage-inner {
  position: absolute;
  left: calc(145 * var(--u));
  top: calc(56 * var(--u));
  display: flex;
  gap: calc(34 * var(--u));
  align-items: center;
}
.coverage-globe {
  color: var(--orange);
}
.coverage-globe .icon {
  width: calc(61 * var(--u));
  height: calc(61 * var(--u));
  stroke-width: 1.1;
}
.coverage-copy .eyebrow {
  font-size: calc(8.5 * var(--u));
  margin-bottom: calc(7 * var(--u));
}
.coverage-stats {
  display: flex;
  align-items: center;
  gap: calc(23 * var(--u));
  white-space: nowrap;
}
.coverage-stats strong {
  font-size: calc(36 * var(--u));
  font-weight: 740;
  line-height: 1.2;
  letter-spacing: calc(-1.7 * var(--u));
}
.coverage-stats i {
  display: block;
  width: calc(1 * var(--u));
  height: calc(33 * var(--u));
  background: #c5b5aa;
}
.coverage-copy p {
  font-size: calc(16 * var(--u));
  line-height: 1.4;
  margin-top: calc(7 * var(--u));
  text-align: center;
  margin-left: calc(-3 * var(--u));
  color: #687d9d;
}
/* Live data — board 744–1144. */
.live-section {
  height: calc(400 * var(--u));
  position: relative;
  background: #f8fafe url("site-assets/sales-cinema.webp") center/100% 100% no-repeat;
  overflow: hidden;
}
.live-copy {
  position: absolute;
  left: calc(54 * var(--u));
  top: calc(59 * var(--u));
  width: calc(326 * var(--u));
}
.live-copy h2 {
  margin-top: calc(9 * var(--u));
  font-size: calc(31 * var(--u));
  line-height: calc(31 * var(--u));
  letter-spacing: calc(-1.4 * var(--u));
}
.live-copy > p {
  font-size: calc(13 * var(--u));
  line-height: calc(18 * var(--u));
  margin-top: calc(17 * var(--u));
  max-width: calc(320 * var(--u));
  color: #657690;
}
.live-copy .text-link {
  margin-top: calc(23 * var(--u));
  font-size: calc(12 * var(--u));
}
.live-workspace {
  position: absolute;
  left: calc(394 * var(--u));
  top: calc(23 * var(--u));
  width: calc(528 * var(--u));
  height: calc(356 * var(--u));
  padding: calc(11 * var(--u)) calc(12 * var(--u));
  display: grid;
  grid-template-columns: calc(78 * var(--u)) 1fr;
  gap: calc(12 * var(--u));
  background: #fffffffa;
  box-shadow: 0 calc(4 * var(--u)) calc(24 * var(--u)) #4a65800a;
}
.live-poster {
  height: calc(140 * var(--u));
  position: relative;
}
.live-poster:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #000b, transparent 60%);
}
.live-poster > span {
  position: absolute;
  bottom: calc(12 * var(--u));
  left: calc(11 * var(--u));
  font-size: calc(12 * var(--u));
  font-weight: 600;
  line-height: calc(13 * var(--u));
  letter-spacing: calc(-0.25 * var(--u));
  color: white;
  z-index: 1;
}
.sales-main {
  min-width: 0;
}
.sales-header {
  height: calc(26 * var(--u));
  display: flex;
  align-items: flex-start;
  gap: calc(10 * var(--u));
  padding-top: calc(3 * var(--u));
  white-space: nowrap;
}
.sales-header h3 {
  font-size: calc(11.6 * var(--u));
  line-height: calc(16 * var(--u));
  font-weight: 750;
  letter-spacing: calc(-0.3 * var(--u));
}
.small-filters {
  display: flex;
  gap: calc(5 * var(--u));
  margin-left: auto;
  margin-top: calc(-2 * var(--u));
}
.small-filters > span {
  font-size: calc(6.3 * var(--u));
  color: #465776;
  padding: calc(4 * var(--u)) calc(6 * var(--u));
  border: calc(1 * var(--u)) solid #e3e9f2;
  border-radius: calc(3 * var(--u));
  line-height: 1.2;
}
.updated {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  font-size: calc(6.1 * var(--u));
  color: #8292aa;
  line-height: calc(16 * var(--u));
  margin-left: auto;
}
.updated i {
  width: calc(5 * var(--u));
  height: calc(5 * var(--u));
  background: #21c18b;
  border-radius: 50%;
  display: inline-block;
}
.sales-tabs {
  height: calc(30 * var(--u));
  display: flex;
  align-items: flex-start;
  gap: calc(27 * var(--u));
  border-bottom: calc(1 * var(--u)) solid #e7edf4;
}
.sales-tabs > button {
  background: none;
  border: 0;
  border-bottom: calc(2 * var(--u)) solid transparent;
  font-size: calc(8.5 * var(--u));
  font-weight: 600;
  padding: calc(7 * var(--u)) 0 calc(7 * var(--u));
  color: #78879b;
  line-height: 1;
}
.sales-tabs [aria-selected="true"] {
  border-color: var(--orange);
  color: #162232;
}
.sales-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(9 * var(--u));
  margin-top: calc(10 * var(--u));
}
.sales-metrics > div {
  height: calc(61 * var(--u));
  border: calc(1 * var(--u)) solid #edf1f7;
  border-radius: calc(4 * var(--u));
  padding: calc(8 * var(--u)) calc(8 * var(--u));
  background: #fff;
}
.sales-metrics > div > span {
  display: block;
  font-size: calc(7 * var(--u));
  color: #8c9ab0;
  line-height: 1.2;
  white-space: nowrap;
}
.sales-metrics strong {
  display: block;
  font-size: calc(18 * var(--u));
  font-weight: 720;
  letter-spacing: calc(-0.6 * var(--u));
  line-height: 1.25;
  margin-top: calc(4 * var(--u));
}
.sales-metrics small {
  font-size: calc(7 * var(--u));
  line-height: 1;
  color: #009762;
  white-space: nowrap;
}
.chart {
  width: 100%;
  height: calc(95 * var(--u));
  margin-top: calc(9 * var(--u));
  overflow: visible;
}
.chart-grid path {
  fill: none;
  stroke: #e7eef8;
  stroke-width: 0.7;
}
.chart-labels {
  font-size: 6.7px;
  fill: #7c8fac;
}
.chart-legend {
  font-size: 6.4px;
  fill: #7c8fac;
}
.chart-line {
  fill: none;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.blue-line {
  stroke: #0079ff;
}
.orange-line {
  stroke: #ff5909;
}
.chart-dots circle {
  fill: #0079ff;
  r: 1.6;
}
.orange-dots circle {
  fill: #ff5909;
}
.sales-main h4 {
  font-size: calc(9.1 * var(--u));
  font-weight: 650;
  letter-spacing: calc(-0.2 * var(--u));
  margin: 0 0 calc(6 * var(--u));
  line-height: 1.2;
}
.sales-table {
  font-size: calc(7.6 * var(--u));
  color: #7586a0;
  line-height: 1.2;
}
.sales-table thead th {
  font-size: calc(7.5 * var(--u));
  color: #61748e;
  padding: calc(6 * var(--u)) calc(7 * var(--u));
  font-weight: 400;
}
.sales-table td {
  padding: calc(6 * var(--u)) calc(7 * var(--u));
}
.sales-table td:first-child {
  width: 45%;
}
.positive {
  color: #189a64 !important;
}
.review {
  color: #f57e29 !important;
}
/* Workflow — board 1144–1376. */
.workflow-section {
  height: calc(232 * var(--u));
  position: relative;
  background: #fcfdff;
  overflow: hidden;
}
.workflow-copy {
  position: absolute;
  left: calc(54 * var(--u));
  top: calc(34 * var(--u));
  width: calc(324 * var(--u));
}
.workflow-copy h2 {
  font-size: calc(31 * var(--u));
  line-height: calc(32 * var(--u));
  margin-top: calc(9 * var(--u));
  letter-spacing: calc(-1.45 * var(--u));
}
.workflow-copy > p {
  font-size: calc(12 * var(--u));
  line-height: calc(18 * var(--u));
  margin-top: calc(12 * var(--u));
  color: #6b7b96;
}
.workflow-copy .text-link {
  margin-top: calc(12 * var(--u));
  font-size: calc(12 * var(--u));
}
.workflow-panel {
  position: absolute;
  left: calc(400 * var(--u));
  top: calc(25 * var(--u));
  width: calc(518 * var(--u));
  height: calc(182 * var(--u));
  padding: calc(15 * var(--u)) calc(10 * var(--u)) calc(16 * var(--u));
  box-shadow: 0 calc(4 * var(--u)) calc(18 * var(--u)) #2a496707;
}
.workflow-stages {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.workflow-stages article {
  text-align: center;
  border-right: calc(1 * var(--u)) solid #e5eaf2;
}
.workflow-stages article:last-child {
  border: 0;
}
.workflow-stages img {
  width: calc(53 * var(--u));
  height: calc(56 * var(--u));
  border-radius: calc(4 * var(--u));
  margin: 0 auto;
  object-fit: cover;
}
.workflow-stages h3 {
  color: var(--orange);
  font-size: calc(11 * var(--u));
  font-weight: 600;
  margin: calc(8 * var(--u)) 0 calc(9 * var(--u));
  line-height: 1;
}
.workflow-stages p {
  font-size: calc(8.4 * var(--u));
  line-height: calc(13 * var(--u));
  color: #697d9a;
}
.workflow-track {
  position: absolute;
  left: calc(55 * var(--u));
  right: calc(55 * var(--u));
  bottom: calc(25 * var(--u));
  height: calc(2 * var(--u));
  background: #d6dce6;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.workflow-track > span {
  display: block;
  background: #c5ccd6;
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
  border-radius: 50%;
}
.workflow-track .first {
  background: var(--orange);
}
/* Reporting — board 1376–1651. */
.reporting-section {
  height: calc(275 * var(--u));
  position: relative;
  background: #fcfdff;
}
.reporting-copy {
  position: absolute;
  left: calc(54 * var(--u));
  top: calc(31 * var(--u));
  width: calc(330 * var(--u));
}
.reporting-copy h2 {
  margin-top: calc(10 * var(--u));
  line-height: calc(33 * var(--u));
  letter-spacing: calc(-1.35 * var(--u));
}
.reporting-copy > p {
  font-size: calc(11 * var(--u));
  line-height: calc(17 * var(--u));
  margin-top: calc(12 * var(--u));
  color: #6b7d99;
  white-space: nowrap;
}
.reporting-copy .text-link {
  margin-top: calc(17 * var(--u));
  font-size: calc(12 * var(--u));
}
.reporting-panel {
  position: absolute;
  left: calc(400 * var(--u));
  top: calc(22 * var(--u));
  width: calc(518 * var(--u));
}
.report-sources {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(2 * var(--u));
}
.report-sources article {
  height: calc(65 * var(--u));
  border: calc(1 * var(--u)) solid #e9edf3;
  border-radius: calc(5 * var(--u));
  background: #fff;
  display: flex;
  gap: calc(9 * var(--u));
  padding: calc(13 * var(--u)) calc(10 * var(--u));
  min-width: 0;
}
.report-sources article > span {
  color: var(--orange);
}
.report-sources article:nth-child(2) > span {
  color: #30ac6a;
}
.report-sources article:nth-child(3) > span {
  color: #246cff;
}
.report-sources .icon {
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
}
.report-sources h3 {
  font-size: calc(7.7 * var(--u));
  line-height: calc(10 * var(--u));
  font-weight: 650;
  letter-spacing: calc(-0.05 * var(--u));
  white-space: nowrap;
}
.report-sources p {
  font-size: calc(7 * var(--u));
  line-height: calc(11 * var(--u));
  color: #8a9bb3;
  margin-top: calc(4 * var(--u));
}
.report-workspace {
  height: calc(167 * var(--u));
  padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(7 * var(--u));
  border-top: 0;
  border-radius: 0 0 calc(5 * var(--u)) calc(5 * var(--u));
}
.report-workspace > h3 {
  font-size: calc(10 * var(--u));
  font-weight: 650;
  line-height: 1.2;
  margin-bottom: calc(6 * var(--u));
}
.report-filters {
  display: flex;
  gap: calc(6 * var(--u));
  margin-bottom: calc(8 * var(--u));
  font-size: calc(6.5 * var(--u));
  color: #50637e;
}
.report-filters span {
  border: calc(1 * var(--u)) solid #e8edf5;
  border-radius: calc(3 * var(--u));
  padding: calc(4 * var(--u)) calc(7 * var(--u));
  line-height: 1.2;
  background: #fff;
}
.report-workspace table {
  font-size: calc(7.4 * var(--u));
  line-height: 1.2;
  color: #7186a5;
}
.report-workspace thead th {
  font-size: calc(7 * var(--u));
  padding: calc(5 * var(--u)) calc(7 * var(--u));
  background: #fafcff;
}
.report-workspace td {
  padding: calc(7 * var(--u)) calc(7 * var(--u));
}
.report-workspace td:first-child {
  font-size: calc(7 * var(--u));
}
/* Lower reference board uses v, normalized to the same page width. */
.lower-page h2 {
  font-size: calc(30 * var(--v));
  letter-spacing: calc(-1.3 * var(--v));
  font-weight: 740;
  line-height: 1.02;
}
.lower-page .eyebrow {
  font-size: calc(8 * var(--v));
  letter-spacing: 0.09em;
}
.lower-page .text-link {
  font-size: calc(11 * var(--v));
  gap: calc(12 * var(--v));
}
.lower-page .btn {
  height: calc(37 * var(--v));
  font-size: calc(10 * var(--v));
  gap: calc(24 * var(--v));
  border-radius: calc(4 * var(--v));
  padding: 0 calc(17 * var(--v));
}
.lower-page .brand {
  gap: calc(5 * var(--v));
  font-size: calc(17 * var(--v));
  letter-spacing: calc(-0.7 * var(--v));
}
.lower-page .brand-mark {
  width: calc(18 * var(--v));
  height: calc(20 * var(--v));
  border-radius: calc(2 * var(--v));
  font-size: calc(17 * var(--v));
  letter-spacing: calc(-0.7 * var(--v));
}
.lower-page .workspace {
  border-radius: calc(4 * var(--v));
  border-width: calc(1 * var(--v));
  box-shadow: 0 calc(4 * var(--v)) calc(16 * var(--v)) #263f5806;
}
.lower-page .app-sidebar {
  padding: calc(12 * var(--v)) calc(9 * var(--v));
  border-width: calc(1 * var(--v));
}
.lower-page .mini-brand {
  font-size: calc(10 * var(--v));
  gap: calc(5 * var(--v));
}
.lower-page .mini-brand > span {
  font-size: calc(14 * var(--v));
  width: calc(15 * var(--v));
  height: calc(17 * var(--v));
  border-radius: calc(2 * var(--v));
}
.lower-page .app-nav {
  margin-top: calc(13 * var(--v));
  gap: calc(3 * var(--v));
}
.lower-page .app-nav > span {
  font-size: calc(7 * var(--v));
  padding: calc(5 * var(--v)) calc(4 * var(--v));
  gap: calc(5 * var(--v));
  border-radius: calc(3 * var(--v));
}
.lower-page .app-nav .icon {
  width: calc(11 * var(--v));
  height: calc(11 * var(--v));
}
.lower-page .tag {
  font-size: calc(7 * var(--v));
  padding: calc(2 * var(--v)) calc(5 * var(--v));
  border-radius: calc(3 * var(--v));
}
/* Markets — lower board 0–336. */
.markets-section {
  height: calc(336 * var(--v));
  position: relative;
  background: #fff url("site-assets/markets-cinema.webp") center/100% 100% no-repeat;
  overflow: hidden;
}
.markets-copy {
  position: absolute;
  left: calc(44 * var(--v));
  top: calc(80 * var(--v));
  width: calc(292 * var(--v));
}
.markets-copy h2 {
  margin-top: calc(9 * var(--v));
  font-size: calc(29 * var(--v));
  letter-spacing: calc(-1.4 * var(--v));
  white-space: nowrap;
}
.markets-copy > p {
  font-size: calc(11.5 * var(--v));
  line-height: calc(17 * var(--v));
  margin-top: calc(12 * var(--v));
  color: #738197;
  white-space: nowrap;
}
.market-options {
  display: flex;
  align-items: flex-start;
  gap: calc(13 * var(--v));
  margin-top: calc(21 * var(--v));
  height: calc(55 * var(--v));
}
.market-options > button {
  border: 0;
  background: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(3 * var(--v));
  min-width: calc(26 * var(--v));
  position: relative;
  line-height: 1;
  transition: transform 0.2s;
}
.market-options > button:hover {
  transform: translateY(-2px);
}
.market-options > button > span {
  font-family: Arial, sans-serif;
  font-size: calc(23 * var(--v));
  line-height: calc(25 * var(--v));
}
.market-options > button > small {
  font-size: calc(8 * var(--v));
  color: #8190a5;
}
.market-options > button.active:after {
  content: "";
  position: absolute;
  bottom: calc(-6 * var(--v));
  width: calc(12 * var(--v));
  height: calc(1 * var(--v));
  background: var(--orange);
  opacity: 0.25;
}
.market-count {
  width: calc(48 * var(--v));
  height: calc(47 * var(--v));
  border: calc(1 * var(--v)) solid #ffac86;
  border-radius: calc(5 * var(--v));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  margin-top: calc(-9 * var(--v));
  gap: calc(2 * var(--v));
  flex-shrink: 0;
}
.market-count strong {
  font-size: calc(13 * var(--v));
  font-weight: 650;
  line-height: 1;
}
.market-count > span {
  font-size: calc(8 * var(--v));
  line-height: 1.2;
}
.market-total {
  display: block;
  font-size: calc(8 * var(--v));
  line-height: 1;
  color: #7c8ca2;
  margin-top: calc(2 * var(--v));
}
.market-workspace {
  position: absolute;
  left: calc(354 * var(--v));
  top: calc(74 * var(--v));
  width: calc(325 * var(--v));
  height: calc(243 * var(--v));
  display: grid;
  grid-template-columns: calc(97 * var(--v)) 1fr;
  background: #fffffff7;
}
.market-workspace .app-sidebar {
  background: #fafbfe;
}
.market-workspace .app-nav > span {
  font-size: calc(7.4 * var(--v));
}
.market-form {
  padding: calc(13 * var(--v)) calc(12 * var(--v));
  min-width: 0;
}
.market-form h3 {
  font-size: calc(10 * var(--v));
  letter-spacing: calc(-0.25 * var(--v));
  line-height: 1;
  margin-bottom: calc(15 * var(--v));
  font-weight: 700;
}
.market-form label {
  font-size: calc(6.5 * var(--v));
  line-height: 1;
  color: #8c9bb0;
  display: block;
  margin-bottom: calc(4 * var(--v));
}
.form-select {
  border: calc(1 * var(--v)) solid #e6ecf5;
  background: #fbfcfe;
  border-radius: calc(3 * var(--v));
  height: calc(24 * var(--v));
  display: flex;
  align-items: center;
  gap: calc(4 * var(--v));
  font-size: calc(7 * var(--v));
  color: #536883;
  padding: 0 calc(7 * var(--v));
  white-space: nowrap;
  margin-bottom: calc(10 * var(--v));
}
.form-select > span:last-child {
  margin-left: auto;
  color: #9cacc1;
}
.form-two {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: calc(8 * var(--v));
}
.app-button {
  display: inline-flex;
  background: var(--orange);
  color: white;
  border-radius: calc(3 * var(--v));
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: calc(7.2 * var(--v));
  height: calc(23 * var(--v));
  padding: 0 calc(12 * var(--v));
  line-height: 1;
  white-space: nowrap;
}
.market-form .app-button {
  margin-top: 0;
  width: calc(71 * var(--v));
  height: calc(24 * var(--v));
  font-size: calc(7 * var(--v));
}
/* CRM — lower board 336–624. */
.crm-section {
  height: calc(288 * var(--v));
  position: relative;
  background: #fff;
}
.crm-copy {
  position: absolute;
  left: calc(44 * var(--v));
  top: calc(43 * var(--v));
  width: calc(280 * var(--v));
}
.crm-copy h2 {
  font-size: calc(30 * var(--v));
  line-height: calc(29 * var(--v));
  margin-top: calc(9 * var(--v));
}
.crm-copy > p {
  font-size: calc(11.5 * var(--v));
  line-height: calc(17 * var(--v));
  margin-top: calc(13 * var(--v));
}
.crm-copy .text-link {
  margin-top: calc(13 * var(--v));
}
.crm-workspace {
  position: absolute;
  left: calc(331 * var(--v));
  top: calc(30 * var(--v));
  width: calc(386 * var(--v));
  height: calc(237 * var(--v));
  display: grid;
  grid-template-columns: calc(84 * var(--v)) 1fr;
}
.crm-workspace .app-sidebar {
  background: #fafbfe;
  padding: calc(12 * var(--v)) calc(8 * var(--v));
}
.crm-workspace .app-nav > span {
  font-size: calc(6.8 * var(--v));
  padding: calc(5 * var(--v)) calc(3 * var(--v));
  gap: calc(4 * var(--v));
}
.crm-main {
  padding: calc(13 * var(--v)) calc(13 * var(--v)) calc(9 * var(--v));
  min-width: 0;
}
.contact-identity {
  display: flex;
  gap: calc(11 * var(--v));
  align-items: flex-start;
}
.contact-identity > img {
  width: calc(92 * var(--v));
  height: calc(68 * var(--v));
  object-fit: cover;
  border: calc(1 * var(--v)) solid #e5eaf0;
  border-radius: calc(3 * var(--v));
}
.contact-identity > div {
  padding-top: calc(11 * var(--v));
}
.contact-identity h3 {
  font-size: calc(10 * var(--v));
  letter-spacing: calc(-0.25 * var(--v));
  white-space: nowrap;
  font-weight: 720;
  line-height: 1.3;
}
.contact-identity h3 .tag {
  margin-left: calc(5 * var(--v));
  font-size: calc(6 * var(--v));
}
.contact-identity p {
  font-size: calc(7.3 * var(--v));
  margin-top: calc(8 * var(--v));
  line-height: 1.2;
}
.contact-identity p > i {
  font-size: calc(7 * var(--v));
  color: var(--orange);
  font-style: normal;
  margin-right: calc(4 * var(--v));
}
.crm-tabs {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--v));
  margin-top: calc(7 * var(--v));
  height: calc(28 * var(--v));
  border-bottom: calc(1 * var(--v)) solid #e6edf5;
  font-size: calc(7.5 * var(--v));
  color: #7c8ba3;
  line-height: 1;
}
.crm-tabs > span {
  padding: calc(9 * var(--v)) 0 calc(8 * var(--v));
}
.crm-tabs .selected {
  border-bottom: calc(2 * var(--v)) solid var(--orange);
  color: #304058;
  font-weight: 600;
}
.crm-events {
  padding-top: calc(3 * var(--v));
}
.crm-events > article {
  display: flex;
  align-items: flex-start;
  gap: calc(9 * var(--v));
  position: relative;
  padding: calc(11 * var(--v)) 0 calc(8 * var(--v));
  border-bottom: calc(1 * var(--v)) solid #f4f6f9;
}
.crm-events > article:last-child {
  border: 0;
}
.event-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e7ecf3;
  color: #a7b3c3;
  width: calc(15 * var(--v));
  height: calc(15 * var(--v));
  border-radius: 50%;
  flex-shrink: 0;
}
.event-icon .icon {
  width: calc(8 * var(--v));
  height: calc(8 * var(--v));
  stroke-width: 2;
}
.orange-icon {
  background: var(--orange);
  color: white;
}
.crm-events strong {
  display: block;
  font-size: calc(7.8 * var(--v));
  line-height: 1.2;
  font-weight: 650;
}
.crm-events p {
  font-size: calc(6.8 * var(--v));
  line-height: 1.4;
  margin-top: calc(3 * var(--v));
  color: #889bb3;
}
.crm-events time {
  font-size: calc(6.3 * var(--v));
  color: #9babbe;
  margin-left: auto;
  white-space: nowrap;
  line-height: 1.2;
  padding-top: calc(1 * var(--v));
}
/* AI — lower board 624–1008. */
.ai-section {
  height: calc(384 * var(--v));
  position: relative;
  background: #071624 url("site-assets/ai-cinema.webp") center/100% 100% no-repeat;
  color: white;
  overflow: hidden;
}
.ai-copy {
  position: absolute;
  left: calc(44 * var(--v));
  top: calc(45 * var(--v));
  width: calc(345 * var(--v));
}
.ai-copy h2 {
  font-size: calc(30 * var(--v));
  line-height: calc(30 * var(--v));
  letter-spacing: calc(-1.3 * var(--v));
  margin-top: calc(10 * var(--v));
}
.ai-copy > p {
  color: #bbc8d7;
  font-size: calc(12 * var(--v));
  line-height: 1.4;
  margin-top: calc(13 * var(--v));
}
.chat-demo {
  position: absolute;
  left: calc(404 * var(--v));
  top: calc(31 * var(--v));
  width: calc(311 * var(--v));
  display: flex;
  flex-direction: column;
  gap: calc(13 * var(--v));
}
.chat-card {
  display: flex;
  background: #fff;
  color: #23324a;
  border: calc(1 * var(--v)) solid #edf0f5;
  border-radius: calc(8 * var(--v));
  box-shadow: 0 calc(5 * var(--v)) calc(18 * var(--v)) #0001;
  padding: calc(12 * var(--v)) calc(13 * var(--v));
  gap: calc(10 * var(--v));
  position: relative;
  min-width: 0;
}
.chat-card > div {
  min-width: 0;
  flex: 1;
}
.chat-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: calc(8 * var(--v));
  line-height: 1.2;
  margin-bottom: calc(6 * var(--v));
}
.chat-meta strong {
  font-weight: 650;
  color: #1c2a3b;
}
.chat-meta > span {
  font-size: calc(7.5 * var(--v));
  color: #687b95;
  font-weight: 600;
}
.chat-meta time {
  font-size: calc(6.5 * var(--v));
  color: #9ca9ba;
  line-height: 1;
}
.user-card {
  height: calc(68 * var(--v));
  padding: calc(11 * var(--v)) calc(12 * var(--v));
  align-items: flex-start;
}
.chat-avatar {
  width: calc(25 * var(--v));
  height: calc(25 * var(--v));
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
}
.chat-card p {
  font-size: calc(8.7 * var(--v));
  line-height: calc(13 * var(--v));
  color: #71839c;
}
.assistant-card {
  height: calc(129 * var(--v));
  padding: calc(13 * var(--v)) calc(12 * var(--v)) calc(10 * var(--v));
}
.assistant-card .brand-mark {
  width: calc(24 * var(--v));
  height: calc(26 * var(--v));
  font-size: calc(22 * var(--v));
  border-radius: calc(3 * var(--v));
  letter-spacing: calc(-0.5 * var(--v));
}
.assistant-card h3 {
  font-size: calc(9.6 * var(--v));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: calc(-0.3 * var(--v));
  margin-top: calc(9 * var(--v));
  margin-bottom: calc(4 * var(--v));
}
.assistant-card p {
  font-size: calc(8.4 * var(--v));
  line-height: calc(12 * var(--v));
}
.assistant-chevron {
  position: absolute;
  right: calc(13 * var(--v));
  top: calc(64 * var(--v));
  font-size: calc(14 * var(--v));
  line-height: 1;
  color: var(--orange);
}
.execute-button {
  height: calc(28 * var(--v));
  width: 100%;
  margin-top: calc(11 * var(--v));
  background: var(--orange);
  border: 0;
  border-radius: calc(4 * var(--v));
  font-size: calc(9 * var(--v));
  font-weight: 600;
  color: white;
  box-shadow: 0 calc(2 * var(--v)) calc(5 * var(--v)) #ff590918;
  transition:
    background 0.2s,
    transform 0.2s;
}
.execute-button:hover {
  background: #e64d00;
  transform: translateY(-1px);
}
.success-card {
  height: calc(94 * var(--v));
  padding: calc(13 * var(--v)) calc(12 * var(--v));
}
.success-circle {
  width: calc(24 * var(--v));
  height: calc(24 * var(--v));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #30bd73;
  color: white;
  font-size: calc(17 * var(--v));
  font-weight: 500;
  flex-shrink: 0;
  box-shadow: 0 0 0 calc(4 * var(--v)) #e4f8ed;
}
.success-card h3 {
  font-size: calc(10 * var(--v));
  letter-spacing: calc(-0.3 * var(--v));
  font-weight: 700;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: calc(6 * var(--v));
}
.success-card p {
  font-size: calc(8.4 * var(--v));
  line-height: calc(12 * var(--v));
}
.activity-log {
  display: flex;
  align-items: center;
  gap: calc(7 * var(--v));
  border: 0;
  padding: 0;
  background: none;
  color: var(--orange);
  font-size: calc(8.8 * var(--v));
  line-height: 1.2;
  margin-top: calc(8 * var(--v));
  font-weight: 550;
}
.success-card.executing .success-circle {
  background: #a2acb8;
  box-shadow: 0 0 0 calc(4 * var(--v)) #edf0f4;
}
.success-card.executing {
  opacity: 0.8;
}
.success-card.executed {
  animation: execution-glow 0.7s ease;
}
/* Integrations — lower board 1008–1285. */
.integrations-section {
  height: calc(277 * var(--v));
  position: relative;
  background:
    radial-gradient(ellipse at 8% 10%, #ffe7d9 0%, transparent 52%),
    radial-gradient(ellipse at 87% 22%, #e9ddff 0%, transparent 60%),
    linear-gradient(130deg, #fff5ef, #f8edfb 70%, #fff3ec);
  padding: calc(33 * var(--v)) calc(44 * var(--v)) calc(31 * var(--v));
}
.integrations-heading {
  position: relative;
}
.integrations-heading h2 {
  font-size: calc(26 * var(--v));
  line-height: 1.1;
  letter-spacing: calc(-1.1 * var(--v));
  margin-top: calc(9 * var(--v));
  white-space: nowrap;
}
.integration-total {
  position: absolute;
  right: 0;
  top: calc(32 * var(--v));
  color: #7b86a1;
  font-size: calc(7.5 * var(--v));
  line-height: 1.2;
  transform: translateY(calc(17 * var(--v)));
}
.integration-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(12 * var(--v));
  margin-top: calc(16 * var(--v));
}
.integration-tile {
  height: calc(73 * var(--v));
  display: flex;
  align-items: center;
  gap: calc(12 * var(--v));
  border: calc(1 * var(--v)) solid #ffffffdd;
  border-radius: calc(6 * var(--v));
  background: #fffffff0;
  padding: calc(12 * var(--v)) calc(13 * var(--v));
  box-shadow: 0 calc(3 * var(--v)) calc(10 * var(--v)) #a389b204;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.integration-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 calc(5 * var(--v)) calc(16 * var(--v)) #a389b214;
}
.integration-tile > strong {
  font-size: calc(8 * var(--v));
  font-weight: 650;
  letter-spacing: calc(-0.1 * var(--v));
  white-space: nowrap;
}
.integration-logo {
  width: calc(32 * var(--v));
  height: calc(32 * var(--v));
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.integration-logo img {
  width: calc(32 * var(--v));
  height: calc(32 * var(--v));
  object-fit: contain;
}
.fakturownia {
  border-radius: calc(5 * var(--v));
  background: #d0e3ff;
  padding: calc(4 * var(--v));
}
.fakturownia b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(24 * var(--v));
  height: calc(25 * var(--v));
  background: linear-gradient(#3286e8, #145baa);
  border-radius: calc(2 * var(--v));
  color: white;
  font-size: calc(24 * var(--v));
  line-height: 1;
}
.stripe {
  border-radius: calc(6 * var(--v));
  background: linear-gradient(135deg, #b2a2ff, #6044e8);
  color: white;
  font-size: calc(27 * var(--v));
  line-height: 1;
  font-weight: 700;
  box-shadow: inset calc(2 * var(--v)) calc(2 * var(--v)) calc(3 * var(--v))
    #ffffff44;
}
.gofilex {
  border-radius: calc(5 * var(--v));
  background: #082642;
}
.gofilex i {
  width: calc(20 * var(--v));
  height: calc(20 * var(--v));
  border: calc(5 * var(--v)) solid #b8ddff;
  border-radius: 50%;
  transform: rotate(-30deg);
  border-right-color: #3a7cae;
}
.docusign {
  border-radius: calc(5 * var(--v));
  background: linear-gradient(0deg, #7f23db, #f82582);
  overflow: hidden;
}
.docusign i {
  position: absolute;
  top: 0;
  left: 0;
  background: #f7ab00;
  width: calc(18 * var(--v));
  height: calc(16 * var(--v));
}
.docusign b {
  font-size: calc(30 * var(--v));
  color: #14172a;
  line-height: 1;
  position: relative;
}
.ifirma {
  font-size: calc(27 * var(--v));
  letter-spacing: calc(-3 * var(--v));
  color: #172337;
}
.ifirma:before {
  content: "";
  position: absolute;
  top: calc(2 * var(--v));
  left: calc(1 * var(--v));
  width: calc(12 * var(--v));
  height: calc(3 * var(--v));
  background: #ff5d16;
}
.integration-more {
  border: calc(1 * var(--v)) solid #ffae88;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(2 * var(--v));
  color: var(--orange);
  padding: calc(8 * var(--v));
}
.integration-more > strong {
  font-size: calc(26 * var(--v));
  font-weight: 650;
  line-height: 1;
  letter-spacing: calc(-0.8 * var(--v));
}
.integration-more > span {
  font-size: calc(9 * var(--v));
  line-height: 1.2;
}
.integration-more b {
  font-size: calc(12 * var(--v));
  margin-left: calc(7 * var(--v));
}
/* Portal — lower board 1285–1515. */
.portal-section {
  height: calc(230 * var(--v));
  position: relative;
  background: #fff;
}
.portal-copy {
  position: absolute;
  left: calc(44 * var(--v));
  top: calc(42 * var(--v));
  width: calc(248 * var(--v));
}
.portal-copy h2 {
  font-size: calc(29 * var(--v));
  line-height: calc(29 * var(--v));
  margin-top: calc(10 * var(--v));
  letter-spacing: calc(-1.3 * var(--v));
}
.portal-copy > p {
  font-size: calc(11 * var(--v));
  line-height: calc(16.5 * var(--v));
  margin-top: calc(12 * var(--v));
  color: #73839b;
}
.portal-copy .text-link {
  margin-top: calc(12 * var(--v));
  font-size: calc(11 * var(--v));
  gap: calc(12 * var(--v));
}
.portal-workspace {
  position: absolute;
  left: calc(309 * var(--v));
  top: calc(23 * var(--v));
  width: calc(407 * var(--v));
  height: calc(188 * var(--v));
  display: grid;
  grid-template-columns: calc(86 * var(--v)) 1fr;
}
.portal-workspace .app-sidebar {
  padding: calc(11 * var(--v)) calc(8 * var(--v));
}
.portal-workspace .app-nav {
  gap: calc(2 * var(--v));
  margin-top: calc(13 * var(--v));
}
.portal-workspace .app-nav > span {
  font-size: calc(6.6 * var(--v));
  gap: calc(4 * var(--v));
  padding: calc(4 * var(--v)) calc(3 * var(--v));
}
.portal-workspace .app-nav .icon {
  width: calc(9 * var(--v));
  height: calc(9 * var(--v));
}
.portal-main {
  padding: calc(14 * var(--v)) calc(13 * var(--v));
  min-width: 0;
}
.portal-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--v));
}
.portal-heading h3 {
  font-size: calc(10 * var(--v));
  font-weight: 700;
  line-height: 1;
  letter-spacing: calc(-0.2 * var(--v));
}
.portal-heading > span {
  font-size: calc(6.1 * var(--v));
  color: #71829b;
  border: calc(1 * var(--v)) solid #e3eaf4;
  border-radius: calc(3 * var(--v));
  padding: calc(4 * var(--v)) calc(7 * var(--v));
  line-height: 1;
}
.portal-main h4 {
  font-size: calc(6.9 * var(--v));
  color: #98a6bb;
  font-weight: 500;
  margin: calc(8 * var(--v)) 0 calc(4 * var(--v));
  line-height: 1.2;
}
.portal-release {
  display: flex;
  align-items: center;
  gap: calc(9 * var(--v));
  padding: calc(9 * var(--v)) 0;
  border-bottom: calc(1 * var(--v)) solid #edf1f6;
  height: calc(66 * var(--v));
}
.portal-release:last-child {
  border: 0;
}
.portal-release .poster {
  width: calc(34 * var(--v));
  height: calc(49 * var(--v));
  border-radius: calc(2 * var(--v));
}
.portal-release h3 {
  font-size: calc(8.2 * var(--v));
  letter-spacing: calc(-0.1 * var(--v));
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}
.portal-release p {
  font-size: calc(6.8 * var(--v));
  color: #a1adc0;
  margin-top: calc(6 * var(--v));
  line-height: 1;
}
.portal-release p i {
  display: inline-block;
  height: calc(5 * var(--v));
  width: calc(1 * var(--v));
  background: #c5cfdd;
  margin: 0 calc(5 * var(--v));
}
.portal-release .app-button {
  font-size: calc(6 * var(--v));
  margin-left: auto;
  padding: 0 calc(6 * var(--v));
  height: calc(23 * var(--v));
  gap: calc(12 * var(--v));
}
.portal-release .app-button b {
  font-size: calc(17 * var(--v));
  font-weight: 400;
}
.quiet-button {
  font-size: calc(6.5 * var(--v));
  border: calc(1 * var(--v)) solid #e2e8f0;
  border-radius: calc(4 * var(--v));
  height: calc(23 * var(--v));
  display: flex;
  align-items: center;
  gap: calc(20 * var(--v));
  padding: 0 calc(9 * var(--v));
  margin-left: auto;
  color: #536680;
  white-space: nowrap;
}
.quiet-button b {
  font-size: calc(16 * var(--v));
  color: var(--orange);
  font-weight: 400;
}
.second-poster {
  background-image: url("site-assets/film-1.webp");
}
/* Feature directory — lower board 1515–1772. */
.features-section {
  height: calc(257 * var(--v));
  position: relative;
  padding: calc(34 * var(--v)) calc(38 * var(--v)) calc(32 * var(--v));
  background: #fff;
}
.features-heading {
  text-align: center;
}
.features-heading .eyebrow {
  font-size: calc(8 * var(--v));
}
.features-heading h2 {
  font-size: calc(28 * var(--v));
  letter-spacing: calc(-1.35 * var(--v));
  line-height: 1.1;
  margin-top: calc(11 * var(--v));
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(12 * var(--v));
  margin-top: calc(18 * var(--v));
}
.feature-grid > a {
  display: flex;
  align-items: center;
  gap: calc(9 * var(--v));
  height: calc(47 * var(--v));
  border: calc(1 * var(--v)) solid #e9edf3;
  box-shadow: 0 calc(2 * var(--v)) calc(7 * var(--v)) #233e6003;
  border-radius: calc(6 * var(--v));
  background: #fff;
  padding: calc(9 * var(--v)) calc(10 * var(--v));
  color: #2c3f59;
  transition:
    border 0.2s,
    transform 0.2s;
}
.feature-grid > a:hover {
  border-color: #ffb18c;
  transform: translateY(-2px);
}
.feature-grid .icon {
  width: calc(21 * var(--v));
  height: calc(21 * var(--v));
  color: var(--orange);
  stroke-width: 1.7;
}
.feature-grid > a > span {
  font-size: calc(7.6 * var(--v));
  font-weight: 600;
  letter-spacing: calc(-0.08 * var(--v));
  white-space: nowrap;
}
.feature-grid > a > b {
  font-size: calc(11 * var(--v));
  color: var(--orange);
  font-weight: 400;
  margin-left: auto;
}
.all-features {
  display: flex;
  margin: calc(18 * var(--v)) auto 0;
  height: calc(37 * var(--v)) !important;
  font-size: calc(9 * var(--v)) !important;
  gap: calc(18 * var(--v)) !important;
  padding: 0 calc(17 * var(--v)) !important;
}
/* Closing band and footer — lower board 1772–2073. */
.cta-section {
  height: calc(185 * var(--v));
  position: relative;
  background: #080c13 url("site-assets/cta-cinema.webp") center/100% 100% no-repeat;
  color: #fff;
}
.cta-copy {
  position: absolute;
  left: calc(44 * var(--v));
  top: calc(36 * var(--v));
  width: calc(460 * var(--v));
}
.cta-copy h2 {
  font-size: calc(24 * var(--v));
  line-height: 1.1;
  letter-spacing: calc(-1 * var(--v));
  white-space: nowrap;
}
.cta-copy p {
  font-size: calc(11.5 * var(--v));
  line-height: calc(17 * var(--v));
  margin-top: calc(10 * var(--v));
  color: #d6dce7;
}
.cta-copy .btn {
  margin-top: calc(16 * var(--v));
  height: calc(36 * var(--v));
  font-size: calc(10 * var(--v));
  gap: calc(27 * var(--v));
}
.site-footer {
  height: calc(116 * var(--v));
  display: flex;
  align-items: center;
  gap: 0;
  background: white;
  position: relative;
  padding: 0 calc(44 * var(--v));
}
.site-footer .brand {
  font-size: calc(15 * var(--v));
  margin-top: calc(1 * var(--v));
}
.site-footer .brand-mark {
  width: calc(17 * var(--v));
  height: calc(19 * var(--v));
  font-size: calc(16 * var(--v));
}
.site-footer > nav {
  display: flex;
  gap: calc(18 * var(--v));
  align-items: center;
  font-size: calc(6.7 * var(--v));
  color: #7c8ca2;
  margin-left: calc(42 * var(--v));
  white-space: nowrap;
}
.site-footer > nav a:hover {
  color: var(--orange);
}
.footer-locales {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--v));
  font-size: calc(6.7 * var(--v));
  color: #7c8ca2;
  margin-left: auto;
  white-space: nowrap;
}
.footer-locales strong {
  color: var(--orange);
  font-weight: 600;
}
.site-footer > small {
  font-size: calc(6.2 * var(--v));
  color: #9ba8ba;
  margin-left: calc(30 * var(--v));
  white-space: nowrap;
  line-height: 1.3;
}
/* Details are real HTML, opened without changing the approved page composition. */
.feature-dialog {
  width: min(760px, calc(100% - 32px));
  max-height: 85vh;
  border: 1px solid #e1e6ee;
  border-radius: 14px;
  padding: 34px;
  color: #142235;
  box-shadow: 0 30px 120px #05132744;
  font-size: 15px;
}
.feature-dialog::backdrop {
  background: #061323aa;
  backdrop-filter: blur(5px);
}
.dialog-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.dialog-heading .eyebrow {
  font-size: 10px;
}
.dialog-close {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f6fa;
  border: 0;
  border-radius: 50%;
  width: 32px;
  height: 32px;
}
.dialog-close .icon {
  width: 18px;
  height: 18px;
}
.feature-dialog h2 {
  font-size: 32px;
}
.dialog-content {
  margin: 24px 0;
}
.dialog-content article {
  padding: 18px 0;
  border-bottom: 1px solid #edf1f6;
}
.dialog-content article[hidden] {
  display: none;
}
.dialog-content h3 {
  font-size: 18px;
  margin-bottom: 12px;
  letter-spacing: -0.4px;
}
.dialog-content p {
  font-size: 14px;
  line-height: 1.7;
}
.dialog-note {
  font-size: 11px;
  color: #8a98ab;
  margin: 20px 0;
}
.feature-dialog .btn {
  height: 42px;
  font-size: 13px;
  padding: 0 20px;
  gap: 24px;
  border-radius: 5px;
}
/* Subtle effects preserve layout geometry and never hide unobserved content. */
.chart-line {
  stroke-dasharray: 500;
  stroke-dashoffset: 0;
}
.live-section.motion-active .chart-line {
  animation: chart-draw 2s ease both;
}
.live-section.motion-active .orange-line {
  animation-delay: 0.1s;
}
.updated i {
  animation: live-pulse 3s ease infinite;
}
.workflow-section.motion-active .workflow-track:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--orange);
  width: 0;
  animation: track-draw 1.6s ease forwards;
  opacity: 0.5;
}
.workflow-section.motion-active .workflow-track .first {
  animation: live-pulse 2s ease 1;
}
.chat-card {
  transition:
    box-shadow 0.2s,
    transform 0.2s;
}
.integration-tile .integration-logo {
  transition: transform 0.25s;
}
.integration-tile:hover .integration-logo {
  transform: scale(1.08);
}
@keyframes chart-draw {
  from {
    stroke-dashoffset: 500;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes track-draw {
  to {
    width: 100%;
  }
}
@keyframes live-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 #20bc8710;
  }
  50% {
    box-shadow: 0 0 0 4px #20bc8714;
  }
}
@keyframes execution-glow {
  0% {
    box-shadow: 0 0 0 5px #30bd7333;
  }
  100% {
    box-shadow: 0 0 0 0 #30bd7300;
  }
}
/* The reference layout scales proportionally on desktop/tablet. Mobile reflows
   the same live HTML panels instead of shrinking a screenshot. */
@media (max-width: 700px) {
  :root {
    --u: 1px;
    --v: 1px;
  }
  html {
    scroll-padding-top: 75px;
    scrollbar-width: auto;
  }
  body {
    width: 100%;
    max-width: none;
    font-size: 15px;
  }
  .site-header {
    height: 66px;
    position: relative;
  }
  .header-inner {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    gap: 14px;
  }
  .brand {
    font-size: 21px;
    gap: 7px;
  }
  .brand-mark {
    width: 25px;
    height: 28px;
    font-size: 23px;
  }
  .header-actions {
    display: none;
  }
  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e8edf4;
    border-radius: 5px;
    width: 37px;
    height: 37px;
  }
  .menu-toggle .icon {
    width: 21px;
    height: 21px;
  }
  .main-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 65px;
    background: #fff;
    border-bottom: 1px solid #e8edf4;
    padding: 18px 20px;
    display: none;
    z-index: 30;
    gap: 0;
    box-shadow: 0 10px 20px #12223a08;
  }
  .main-nav.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .main-nav a {
    font-size: 14px;
    padding: 10px 0;
  }
  .eyebrow,
  .lower-page .eyebrow {
    font-size: 10px;
    letter-spacing: 0.1em;
  }
  .btn,
  .lower-page .btn {
    height: 43px;
    font-size: 13px;
    padding: 0 18px;
    gap: 22px;
    border-radius: 5px;
  }
  .text-link,
  .lower-page .text-link {
    font-size: 13px;
    gap: 12px;
  }
  .desktop-break {
    display: none;
  }
  .hero {
    height: auto;
    padding: 58px 20px 38px;
    background-size: auto 100%;
    background-position: 48% center;
  }
  .hero:before {
    background: linear-gradient(90deg, #050a1355, #050a131a);
  }
  .hero-copy {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
  }
  .hero h1 {
    font-size: 44px;
    line-height: 1;
    letter-spacing: -2px;
    margin: 14px 0 20px;
  }
  .hero-copy .eyebrow {
    font-size: 10px;
  }
  .hero-copy > p {
    width: auto;
    font-size: 14px;
    line-height: 22px;
    max-width: 420px;
  }
  .hero-actions {
    gap: 20px;
    margin-top: 24px;
    flex-wrap: wrap;
  }
  .hero-actions .btn {
    width: auto;
  }
  .hero-actions .text-link {
    font-size: 12px;
  }
  .booking-workspace {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    margin-top: 38px;
    grid-template-columns: 1fr;
    border-radius: 7px;
  }
  .booking-workspace .app-sidebar {
    display: none;
  }
  .booking-main {
    padding: 16px 12px 12px;
  }
  .release-header {
    min-height: 48px;
    gap: 9px;
  }
  .small-poster {
    width: 32px;
    height: 44px;
  }
  .release-header h3 {
    font-size: 13px;
    margin: 3px 0 8px;
    padding-right: 0;
  }
  .release-header > div:nth-child(2) {
    padding-top: 1px;
    align-self: center;
  }
  .release-meta {
    font-size: 6.3px;
    gap: 6px;
    flex-wrap: wrap;
    white-space: normal;
    margin-top: 0;
  }
  .release-filters {
    display: none;
  }
  .app-tabs {
    font-size: 8px;
    gap: 18px;
    margin-top: 12px;
  }
  .app-tabs > span {
    padding: 10px 0;
  }
  .booking-table {
    min-width: 350px;
    font-size: 8px;
  }
  .booking-table thead th {
    font-size: 8px;
    height: 38px;
  }
  .booking-table tbody th {
    font-size: 8px;
  }
  .booking-table th small {
    font-size: 7px;
  }
  .booking-table td {
    height: 39px;
  }
  .schedule {
    font-size: 8px;
    line-height: 25px;
    height: 25px;
  }
  .booking-legend {
    font-size: 6.3px;
    gap: 11px;
    padding-top: 13px;
    flex-wrap: wrap;
  }
  .coverage {
    height: auto;
    padding: 40px 20px;
    background-size: auto 100%;
  }
  .coverage-inner {
    position: static;
    gap: 17px;
    align-items: center;
    justify-content: center;
  }
  .coverage-globe .icon {
    width: 43px;
    height: 43px;
  }
  .coverage-copy .eyebrow {
    font-size: 8px;
    margin-bottom: 10px;
  }
  .coverage-stats {
    flex-wrap: wrap;
    gap: 8px 12px;
  }
  .coverage-stats strong {
    font-size: 23px;
    letter-spacing: -1px;
    white-space: nowrap;
  }
  .coverage-stats i {
    height: 22px;
  }
  .coverage-copy p {
    font-size: 12px;
    line-height: 18px;
    text-align: left;
    margin: 10px 0 0;
    max-width: 290px;
  }
  .live-section,
  .workflow-section,
  .reporting-section {
    height: auto;
    padding: 56px 20px;
    background-size: auto 100%;
    overflow: visible;
  }
  .live-copy,
  .workflow-copy,
  .reporting-copy {
    position: static;
    width: auto;
    max-width: 460px;
  }
  .live-copy h2,
  .workflow-copy h2,
  .reporting-copy h2 {
    font-size: 32px;
    line-height: 33px;
    letter-spacing: -1.4px;
    margin-top: 12px;
  }
  .live-copy > p,
  .workflow-copy > p,
  .reporting-copy > p {
    font-size: 14px;
    line-height: 22px;
    margin-top: 18px;
    white-space: normal;
    color: #62738f;
  }
  .live-copy .text-link,
  .workflow-copy .text-link,
  .reporting-copy .text-link {
    font-size: 13px;
    margin-top: 22px;
  }
  .live-section {
    background-position: 25% center;
  }
  .live-workspace {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    padding: 13px 12px;
    grid-template-columns: 57px 1fr;
    gap: 11px;
    margin-top: 30px;
    border-radius: 7px;
    background: #fff;
  }
  .live-poster {
    height: 110px;
  }
  .live-poster > span {
    font-size: 9px;
    line-height: 11px;
    bottom: 10px;
    left: 7px;
  }
  .sales-header {
    height: 23px;
    padding-top: 1px;
    gap: 7px;
  }
  .sales-header h3 {
    font-size: 11px;
    letter-spacing: -0.3px;
    line-height: 17px;
  }
  .small-filters,
  .updated {
    display: none;
  }
  .sales-tabs {
    height: 30px;
    gap: 22px;
  }
  .sales-tabs > button {
    font-size: 9px;
    padding: 7px 0;
  }
  .sales-metrics {
    margin-top: 9px;
    gap: 5px;
  }
  .sales-metrics > div {
    padding: 7px 5px;
    height: 57px;
    border-radius: 3px;
  }
  .sales-metrics > div > span {
    font-size: 6.4px;
  }
  .sales-metrics strong {
    font-size: 13px;
    margin-top: 5px;
    letter-spacing: -0.4px;
  }
  .sales-metrics small {
    font-size: 5.5px;
    white-space: normal;
    line-height: 1.4;
    display: block;
    margin-top: 2px;
  }
  .chart {
    height: 90px;
    margin-top: 8px;
  }
  .sales-main h4 {
    font-size: 8.2px;
    margin-bottom: 8px;
  }
  .sales-table {
    min-width: 300px;
    font-size: 8px;
  }
  .sales-table thead th {
    font-size: 7.5px;
  }
  .sales-table td,
  .sales-table thead th {
    padding: 7px 6px;
  }
  .workflow-panel {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 190px;
    margin-top: 30px;
    padding: 20px 8px 40px;
    border-radius: 7px;
  }
  .workflow-stages img {
    width: 43px;
    height: 48px;
  }
  .workflow-stages h3 {
    font-size: 10px;
    margin: 10px 0;
  }
  .workflow-stages p {
    font-size: 7px;
    line-height: 11px;
  }
  .workflow-track {
    left: 30px;
    right: 30px;
    bottom: 25px;
  }
  .workflow-track > span {
    width: 11px;
    height: 11px;
  }
  .workflow-section {
    background: #fafcff;
  }
  .reporting-panel {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    margin-top: 30px;
  }
  .report-sources {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .report-sources article {
    height: auto;
    min-height: 77px;
    padding: 18px;
    gap: 16px;
    border-radius: 6px;
  }
  .report-sources .icon {
    width: 27px;
    height: 27px;
  }
  .report-sources h3 {
    font-size: 12px;
    line-height: 16px;
  }
  .report-sources p {
    font-size: 11px;
    line-height: 16px;
    margin-top: 5px;
  }
  .report-workspace {
    height: auto;
    min-height: 175px;
    padding: 18px 12px 12px;
    margin-top: 15px;
    border-top: 1px solid var(--line);
    border-radius: 6px;
  }
  .report-workspace > h3 {
    font-size: 12px;
    margin-bottom: 9px;
  }
  .report-filters {
    font-size: 7px;
    gap: 5px;
    margin-bottom: 10px;
  }
  .report-workspace table {
    min-width: 500px;
    font-size: 9px;
  }
  .report-workspace thead th {
    font-size: 8px;
  }
  .report-workspace td:first-child {
    font-size: 9px;
  }
  .report-workspace td,
  .report-workspace thead th {
    padding: 9px 7px;
  }
  .markets-section,
  .crm-section,
  .ai-section,
  .integrations-section,
  .portal-section,
  .features-section,
  .cta-section {
    height: auto;
    padding: 58px 22px;
    position: relative;
  }
  .markets-section {
    background-size: auto 100%;
    background-position: 66% center;
  }
  .markets-copy,
  .crm-copy,
  .ai-copy,
  .portal-copy,
  .cta-copy {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    max-width: 480px;
  }
  .lower-page h2 {
    font-size: 32px;
    line-height: 1.04;
    letter-spacing: -1.4px;
  }
  .markets-copy h2 {
    white-space: normal;
    margin-top: 13px;
    font-size: 31px;
  }
  .markets-copy > p,
  .crm-copy > p,
  .portal-copy > p {
    font-size: 14px;
    line-height: 22px;
    margin-top: 18px;
    white-space: normal;
  }
  .market-options {
    gap: 12px;
    margin-top: 25px;
    height: 56px;
    flex-wrap: nowrap;
  }
  .market-options > button {
    min-width: 24px;
    gap: 5px;
  }
  .market-options > button > span {
    font-size: 23px;
    line-height: 25px;
  }
  .market-options > button > small {
    font-size: 9px;
  }
  .market-count {
    width: 46px;
    height: 47px;
    margin-top: -7px;
  }
  .market-total {
    font-size: 10px;
    margin-top: 7px;
  }
  .market-workspace {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 303px;
    grid-template-columns: 83px 1fr;
    margin-top: 32px;
    border-radius: 7px;
  }
  .lower-page .mini-brand {
    font-size: 10px;
    gap: 4px;
  }
  .lower-page .app-sidebar {
    padding: 15px 8px;
  }
  .lower-page .app-nav {
    gap: 4px;
    margin-top: 16px;
  }
  .lower-page .app-nav > span {
    font-size: 7px;
    padding: 6px 3px;
    gap: 5px;
  }
  .lower-page .app-nav .icon {
    width: 11px;
    height: 11px;
  }
  .market-form {
    padding: 17px 12px;
  }
  .market-form h3 {
    font-size: 13px;
    margin-bottom: 20px;
  }
  .market-form label {
    font-size: 8px;
    margin-bottom: 5px;
  }
  .form-select {
    height: 29px;
    font-size: 8.5px;
    margin-bottom: 12px;
    padding: 0 7px;
  }
  .form-two {
    gap: 7px;
  }
  .market-form .app-button {
    height: 29px;
    font-size: 9px;
    width: 90px;
    margin-top: 2px;
  }
  .crm-copy h2 {
    margin-top: 13px;
    font-size: 32px;
    line-height: 31px;
  }
  .crm-copy .text-link {
    margin-top: 20px;
  }
  .crm-workspace {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 267px;
    grid-template-columns: 73px 1fr;
    margin-top: 30px;
    border-radius: 7px;
  }
  .crm-workspace .app-sidebar {
    padding: 15px 6px;
  }
  .crm-workspace .app-nav > span {
    font-size: 6px;
    padding: 6px 2px;
    gap: 3px;
  }
  .crm-main {
    padding: 15px 10px 10px;
  }
  .contact-identity {
    gap: 8px;
    align-items: center;
  }
  .contact-identity > img {
    width: 68px;
    height: 56px;
  }
  .contact-identity > div {
    padding-top: 0;
  }
  .contact-identity h3 {
    font-size: 9px;
    white-space: normal;
    line-height: 1.5;
  }
  .contact-identity h3 .tag {
    font-size: 5px;
    margin-left: 2px;
  }
  .contact-identity p {
    font-size: 7px;
    margin-top: 5px;
  }
  .crm-tabs {
    font-size: 7px;
    gap: 13px;
    height: 32px;
    margin-top: 10px;
  }
  .crm-events > article {
    gap: 7px;
    padding: 14px 0 11px;
  }
  .crm-events strong {
    font-size: 8px;
  }
  .crm-events p {
    font-size: 6.7px;
    margin-top: 5px;
    line-height: 1.5;
  }
  .crm-events time {
    font-size: 5px;
  }
  .event-icon {
    width: 14px;
    height: 14px;
  }
  .ai-section {
    background-position: 15% center;
    background-size: auto 100%;
    padding-bottom: 58px;
  }
  .ai-copy h2 {
    font-size: 32px;
    line-height: 32px;
    margin-top: 13px;
  }
  .ai-copy > p {
    font-size: 14px;
    margin-top: 17px;
  }
  .chat-demo {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    gap: 15px;
    margin-top: 32px;
  }
  .chat-card {
    padding: 17px 15px;
    gap: 11px;
    border-radius: 8px;
  }
  .user-card {
    height: auto;
    min-height: 90px;
    margin-left: 17px;
  }
  .chat-avatar {
    width: 27px;
    height: 27px;
  }
  .chat-meta {
    font-size: 10px;
    line-height: 1.3;
    margin-bottom: 9px;
  }
  .chat-meta time {
    font-size: 8px;
  }
  .chat-card p {
    font-size: 11px;
    line-height: 17px;
  }
  .assistant-card {
    height: auto;
    min-height: 159px;
  }
  .assistant-card .brand-mark {
    width: 25px;
    height: 28px;
    font-size: 23px;
  }
  .assistant-card .chat-meta > span {
    font-size: 10px;
  }
  .assistant-card h3 {
    font-size: 12px;
    margin-top: 11px;
    margin-bottom: 7px;
  }
  .assistant-card p {
    font-size: 11px;
    line-height: 17px;
  }
  .assistant-chevron {
    font-size: 17px;
    right: 13px;
    top: 76px;
  }
  .execute-button {
    height: 36px;
    font-size: 11px;
    margin-top: 14px;
  }
  .success-card {
    height: auto;
    min-height: 115px;
  }
  .success-circle {
    width: 25px;
    height: 25px;
    font-size: 19px;
  }
  .success-card h3 {
    font-size: 12px;
    margin: 0 0 9px;
  }
  .success-card p {
    font-size: 10.5px;
    line-height: 16px;
  }
  .activity-log {
    font-size: 11px;
    margin-top: 12px;
    gap: 7px;
  }
  .integrations-section {
    padding: 54px 22px;
  }
  .integrations-heading h2 {
    font-size: 29px;
    line-height: 30px;
    white-space: normal;
    letter-spacing: -1.2px;
    margin-top: 13px;
  }
  .integration-total {
    position: static;
    display: block;
    transform: none;
    font-size: 10px;
    margin-top: 13px;
  }
  .integration-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 24px;
  }
  .integration-tile {
    height: 81px;
    padding: 14px;
    gap: 12px;
    border-radius: 6px;
  }
  .integration-tile > strong {
    font-size: 9px;
  }
  .integration-logo,
  .integration-logo img {
    width: 30px;
    height: 30px;
  }
  .fakturownia b {
    font-size: 23px;
    width: 23px;
    height: 24px;
  }
  .integration-more > strong {
    font-size: 28px;
  }
  .integration-more > span {
    font-size: 10px;
  }
  .stripe {
    font-size: 25px;
  }
  .ifirma {
    font-size: 25px;
  }
  .portal-copy h2 {
    font-size: 32px;
    line-height: 32px;
    margin-top: 13px;
  }
  .portal-copy .text-link {
    margin-top: 20px;
  }
  .portal-workspace {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 225px;
    margin-top: 30px;
    grid-template-columns: 69px 1fr;
    border-radius: 7px;
  }
  .portal-workspace .app-sidebar {
    padding: 14px 6px;
  }
  .portal-workspace .app-nav > span {
    font-size: 5.6px;
    gap: 3px;
    padding: 5px 2px;
  }
  .portal-workspace .app-nav .icon {
    width: 9px;
    height: 9px;
  }
  .portal-workspace .mini-brand {
    font-size: 8px;
  }
  .portal-workspace .mini-brand > span {
    width: 12px;
    height: 15px;
    font-size: 12px;
  }
  .portal-main {
    padding: 16px 10px;
  }
  .portal-heading h3 {
    font-size: 10px;
  }
  .portal-heading > span {
    font-size: 5.5px;
    padding: 4px 5px;
  }
  .portal-main h4 {
    font-size: 8px;
    margin: 12px 0 5px;
  }
  .portal-release {
    height: 76px;
    gap: 7px;
    padding: 12px 0;
  }
  .portal-release .poster {
    width: 30px;
    height: 47px;
  }
  .portal-release h3 {
    font-size: 7px;
    white-space: normal;
    line-height: 1.4;
  }
  .portal-release p {
    font-size: 5.5px;
    margin-top: 6px;
  }
  .portal-release p i {
    margin: 0 3px;
  }
  .portal-release .app-button {
    font-size: 5px;
    padding: 0 5px;
    gap: 5px;
    min-width: 48px;
    height: 23px;
  }
  .portal-release .app-button b {
    font-size: 12px;
  }
  .quiet-button {
    font-size: 5.5px;
    padding: 0 6px;
    height: 23px;
    gap: 7px;
  }
  .features-section {
    padding: 55px 20px;
  }
  .features-heading h2 {
    font-size: 29px;
    line-height: 30px;
    margin-top: 13px;
  }
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 11px;
    margin-top: 26px;
  }
  .feature-grid > a {
    height: 58px;
    gap: 8px;
    padding: 12px 9px;
    border-radius: 6px;
  }
  .feature-grid > a > span {
    font-size: 8px;
    white-space: normal;
  }
  .feature-grid .icon {
    width: 20px;
    height: 20px;
  }
  .feature-grid > a > b {
    font-size: 11px;
  }
  .all-features {
    height: 41px !important;
    font-size: 12px !important;
    margin-top: 25px;
    padding: 0 20px !important;
    gap: 20px !important;
  }
  .cta-section {
    padding: 55px 22px;
    background-position: 57% center;
    background-size: auto 100%;
  }
  .cta-copy h2 {
    font-size: 28px;
    line-height: 29px;
    white-space: normal;
  }
  .cta-copy p {
    font-size: 13px;
    line-height: 20px;
    margin-top: 15px;
  }
  .cta-copy .btn {
    margin-top: 22px;
  }
  .site-footer {
    height: auto;
    min-height: 150px;
    padding: 35px 22px;
    gap: 23px 18px;
    flex-wrap: wrap;
  }
  .site-footer .brand {
    font-size: 18px;
    flex-basis: 100%;
  }
  .site-footer .brand-mark {
    width: 20px;
    height: 23px;
    font-size: 20px;
  }
  .site-footer > nav {
    font-size: 9px;
    gap: 17px;
    margin: 0;
    flex-basis: 100%;
  }
  .footer-locales {
    font-size: 9px;
    margin: 0;
    gap: 17px;
  }
  .site-footer > small {
    font-size: 8px;
    margin-left: auto;
  }
  .feature-dialog {
    padding: 25px;
  }
  .feature-dialog h2 {
    font-size: 27px;
  }
}
@media (max-width: 360px) {
  .hero h1 {
    font-size: 39px;
  }
  .hero-actions {
    gap: 16px;
  }
  .hero-actions .text-link {
    font-size: 11px;
  }
  .market-options {
    gap: 8px;
  }
  .market-count {
    width: 43px;
  }
  .coverage-globe {
    display: none;
  }
  .coverage-stats strong {
    font-size: 22px;
  }
  .integration-tile {
    padding: 11px;
    gap: 9px;
  }
  .integration-tile > strong {
    font-size: 8px;
  }
  .crm-workspace {
    grid-template-columns: 64px 1fr;
  }
  .portal-workspace {
    grid-template-columns: 60px 1fr;
  }
  .portal-workspace .app-nav > span {
    font-size: 5px;
  }
  .portal-release .app-button {
    font-size: 4.5px;
  }
  .portal-heading > span {
    font-size: 5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
  .chart-line {
    stroke-dashoffset: 0;
  }
}
/* App surfaces retain their own foreground colour inside the dark hero. */
.workspace {
  color: var(--ink);
}
/* First reference-comparison corrections. */
.coverage-stats {
  gap: calc(35 * var(--u));
}
.coverage-globe {
  transform: translateY(calc(-8 * var(--u)));
}
.release-header h3 {
  font-size: calc(12 * var(--u));
}
.booking-table thead th:first-child,
.booking-table tbody th {
  width: calc(87 * var(--u));
}
.booking-table td {
  padding-left: calc(1.5 * var(--u));
  padding-right: calc(1.5 * var(--u));
}
.schedule {
  font-size: calc(6.6 * var(--u));
}
@media (max-width: 700px) {
  .coverage-stats {
    gap: 8px 12px;
  }
  .coverage-globe {
    transform: none;
  }
  .release-header h3 {
    font-size: 13px;
  }
  .booking-table {
    min-width: 390px;
  }
  .schedule {
    font-size: 8px;
  }
}
/* Second board was displayed at 749 px in the approved image preview.
   Its native 758 px canvas includes a proportional 1.012× resampling. */
@media (min-width: 701px) {
  :root {
    --v: calc(var(--u) * 953 / 749);
  }
  .site-footer {
    height: calc(90 * var(--v));
  }
  .markets-copy h2 {
    font-size: calc(31 * var(--v));
  }
  .integration-total {
    transform: none;
  }
  .integration-grid {
    margin-top: calc(8 * var(--v));
  }
  .market-form label {
    font-size: calc(7 * var(--v));
  }
  .form-select {
    font-size: calc(7.5 * var(--v));
  }
  .contact-identity h3 {
    font-size: calc(11 * var(--v));
  }
  .crm-events strong {
    font-size: calc(8.2 * var(--v));
  }
  .crm-events p {
    font-size: calc(7.2 * var(--v));
  }
}
/* Second visual pass: match the original lower-board positions and artwork. */
.exact-logo {
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
}
.exact-logo:before,
.exact-logo:after {
  display: none !important;
}
.exact-logo img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.second-poster {
  background-image: url("site-assets/silent-path.webp");
}
.success-time {
  position: absolute;
  right: calc(13 * var(--v));
  top: calc(12 * var(--v));
  font-size: calc(6.5 * var(--v));
  color: #a0aec0;
}
@media (min-width: 701px) {
  .portal-workspace {
    left: calc(296.5 * var(--v));
    width: calc(421 * var(--v));
    height: calc(185 * var(--v));
    grid-template-columns: calc(98.5 * var(--v)) 1fr;
  }
  .portal-workspace .app-sidebar {
    padding-left: calc(12 * var(--v));
    padding-right: calc(8 * var(--v));
  }
  .portal-copy {
    top: calc(30 * var(--v));
  }
  .portal-copy > p {
    line-height: calc(15 * var(--v));
  }
  .portal-copy .text-link {
    margin-top: calc(10 * var(--v));
  }
  .portal-release .poster {
    width: calc(36 * var(--v));
    height: calc(49 * var(--v));
  }
  .features-section {
    padding-top: calc(11 * var(--v));
  }
  .feature-grid {
    margin-top: calc(8 * var(--v));
    gap: calc(10 * var(--v)) calc(12 * var(--v));
  }
  .all-features {
    margin-top: calc(23 * var(--v));
  }
  .cta-copy p {
    line-height: calc(14 * var(--v));
    margin-top: calc(8 * var(--v));
  }
  .cta-copy .btn {
    margin-top: calc(13 * var(--v));
  }
}
/* Final measured offsets from the repeated side-by-side comparison. */
@media (min-width: 701px) {
  .all-features {
    margin-top: calc(9 * var(--v));
  }
  .site-footer .brand {
    font-size: calc(13.5 * var(--v));
  }
  .site-footer > nav {
    margin-left: calc(60 * var(--v));
  }
}
/* Quality fixes: proportional photography, resolution-independent flags and logos. */
.cta-section {
  background-size: cover;
  background-position: center 60%;
}
.ai-section {
  background-size: cover;
  background-position: left center;
}
.country-flag {
  width: calc(26 * var(--v));
  height: calc(19 * var(--v));
  object-fit: cover;
  border-radius: calc(1 * var(--v));
  box-shadow: 0 calc(1 * var(--v)) calc(3 * var(--v)) #10213b18;
}
.market-options > button > span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(25 * var(--v));
  font-size: 0;
}
.field-flag {
  width: calc(12 * var(--v));
  height: calc(9 * var(--v));
  object-fit: cover;
  flex-shrink: 0;
}
.market-caption {
  color: inherit !important;
  margin-left: 0 !important;
}
.select-arrow {
  margin-left: auto !important;
}
.exact-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* The accepted AI conversation now sits inside a complete chat window. */
.ai-section {
  height: calc(448 * var(--v));
}
.chat-window {
  position: absolute;
  left: calc(394 * var(--v));
  top: calc(22 * var(--v));
  width: calc(332 * var(--v));
  border: calc(1 * var(--v)) solid #dce4ef;
  border-radius: calc(10 * var(--v));
  background: #f4f7fb;
  overflow: hidden;
  box-shadow: 0 calc(12 * var(--v)) calc(45 * var(--v)) #0003;
  color: #1b2c45;
}
.chat-window-header {
  height: calc(34 * var(--v));
  display: flex;
  align-items: center;
  gap: calc(7 * var(--v));
  padding: 0 calc(12 * var(--v));
  background: #fff;
  border-bottom: calc(1 * var(--v)) solid #e3eaf3;
}
.chat-window-header .brand-mark {
  width: calc(17 * var(--v));
  height: calc(19 * var(--v));
  font-size: calc(16 * var(--v));
  border-radius: calc(3 * var(--v));
}
.chat-window-header strong {
  display: block;
  font-size: calc(9 * var(--v));
  line-height: 1.2;
  letter-spacing: calc(-0.15 * var(--v));
}
.chat-window-header small {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--v));
  font-size: calc(6 * var(--v));
  line-height: 1.2;
  margin-top: calc(3 * var(--v));
  color: #8797ae;
}
.chat-window-header small i {
  width: calc(3.5 * var(--v));
  height: calc(3.5 * var(--v));
  border-radius: 50%;
  background: #26b876;
}
.chat-window-controls {
  margin-left: auto;
  color: #a4afbe;
  font-size: calc(12 * var(--v));
  letter-spacing: calc(1 * var(--v));
  white-space: nowrap;
}
.chat-window .chat-demo {
  position: static;
  left: auto;
  top: auto;
  width: auto;
  gap: calc(9 * var(--v));
  padding: calc(11 * var(--v));
  margin: 0;
}
.chat-window .chat-card {
  box-shadow: 0 calc(2 * var(--v)) calc(8 * var(--v)) #1d375a04;
  border-color: #e7edf5;
}
.chat-composer {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--v));
  height: calc(34 * var(--v));
  padding: calc(6 * var(--v)) calc(11 * var(--v));
  background: white;
  border-top: calc(1 * var(--v)) solid #e4ebf3;
}
.chat-composer input {
  min-width: 0;
  flex: 1;
  border: 0;
  background: none;
  color: #63748b;
  font: inherit;
  font-size: calc(8 * var(--v));
  outline: none;
}
.chat-composer input::placeholder {
  color: #9aa7b9;
}
.chat-composer > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(21 * var(--v));
  height: calc(21 * var(--v));
  background: var(--orange);
  border-radius: calc(5 * var(--v));
  font-size: calc(15 * var(--v));
  color: white;
  line-height: 1;
}
/* KDM generation & delivery — same geometry and typography as adjacent chapters. */
.kdm-section {
  height: calc(260 * var(--u));
  position: relative;
  background: #f9fbfe;
}
.kdm-copy {
  position: absolute;
  left: calc(54 * var(--u));
  top: calc(47 * var(--u));
  width: calc(328 * var(--u));
}
.kdm-copy h2 {
  font-size: calc(31 * var(--u));
  line-height: calc(32 * var(--u));
  margin-top: calc(10 * var(--u));
  letter-spacing: calc(-1.4 * var(--u));
}
.kdm-copy > p {
  font-size: calc(11.5 * var(--u));
  line-height: calc(17 * var(--u));
  margin-top: calc(15 * var(--u));
  color: #6c7e98;
  white-space: nowrap;
}
.kdm-copy .text-link {
  font-size: calc(12 * var(--u));
  margin-top: calc(17 * var(--u));
}
.kdm-workspace {
  position: absolute;
  left: calc(400 * var(--u));
  top: calc(29 * var(--u));
  width: calc(518 * var(--u));
  height: calc(204 * var(--u));
  padding: calc(14 * var(--u)) calc(15 * var(--u)) calc(12 * var(--u));
}
.kdm-title {
  display: flex;
  align-items: center;
  gap: calc(9 * var(--u));
}
.kdm-key-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(29 * var(--u));
  height: calc(32 * var(--u));
  border: calc(1 * var(--u)) solid #ffe1cb;
  border-radius: calc(5 * var(--u));
  color: var(--orange);
  background: #fff7f1;
}
.kdm-key-icon .icon {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
}
.kdm-title h3 {
  font-size: calc(11 * var(--u));
  letter-spacing: calc(-0.2 * var(--u));
  line-height: 1.2;
}
.kdm-title p {
  font-size: calc(7.2 * var(--u));
  line-height: 1.3;
  margin-top: calc(4 * var(--u));
  color: #90a0b5;
}
.kdm-title > .tag {
  margin-left: auto;
  font-size: calc(6.5 * var(--u));
  padding: calc(4 * var(--u)) calc(6 * var(--u));
}
.kdm-summary {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  margin: calc(12 * var(--u)) 0 calc(9 * var(--u));
  font-size: calc(7.2 * var(--u));
  color: #7c8da6;
}
.kdm-summary strong {
  font-size: calc(10 * var(--u));
  font-weight: 650;
  color: #344a69;
  margin-right: calc(3 * var(--u));
}
.kdm-summary > i {
  font-style: normal;
  color: #ff9c68;
}
.kdm-table {
  font-size: calc(7 * var(--u));
  line-height: 1.2;
  color: #7386a3;
}
.kdm-table thead th {
  padding: calc(5 * var(--u)) calc(7 * var(--u));
  font-size: calc(6.8 * var(--u));
  font-weight: 500;
}
.kdm-table td {
  padding: calc(6 * var(--u)) calc(7 * var(--u));
}
.kdm-table td:first-child strong {
  display: block;
  font-weight: 550;
  font-size: calc(7.2 * var(--u));
  color: #465e7e;
}
.kdm-table small {
  display: block;
  font-size: calc(5.8 * var(--u));
  color: #a0acc0;
  margin-top: calc(3 * var(--u));
}
.kdm-table .tag {
  font-size: calc(6 * var(--u));
  padding: calc(3 * var(--u)) calc(5 * var(--u));
}
.kdm-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--u));
  margin-top: calc(8 * var(--u));
}
.kdm-bottom > span {
  font-size: calc(6.2 * var(--u));
  color: #91a0b5;
}
.kdm-bottom .app-button {
  font-size: calc(7 * var(--u));
  height: calc(22 * var(--u));
  padding: 0 calc(11 * var(--u));
  gap: calc(10 * var(--u));
}
@media (max-width: 700px) {
  .cta-section {
    background-size: cover;
    background-position: 60% center;
  }
  .country-flag {
    width: 26px;
    height: 19px;
  }
  .field-flag {
    width: 13px;
    height: 10px;
  }
  .market-options > button > span {
    height: 25px;
  }
  .ai-section {
    height: auto;
    padding-bottom: 58px;
  }
  .chat-window {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    margin-top: 32px;
    border-radius: 10px;
  }
  .chat-window-header {
    height: 46px;
    padding: 0 14px;
    gap: 9px;
  }
  .chat-window-header .brand-mark {
    width: 22px;
    height: 25px;
    font-size: 20px;
  }
  .chat-window-header strong {
    font-size: 12px;
  }
  .chat-window-header small {
    font-size: 8px;
    margin-top: 4px;
    gap: 5px;
  }
  .chat-window-header small i {
    width: 4px;
    height: 4px;
  }
  .chat-window-controls {
    font-size: 15px;
    letter-spacing: 1px;
  }
  .chat-window .chat-demo {
    margin: 0;
    gap: 12px;
    padding: 12px;
  }
  .chat-window .user-card {
    margin-left: 10px;
  }
  .chat-composer {
    height: 45px;
    padding: 8px 14px;
    gap: 10px;
  }
  .chat-composer input {
    font-size: 10px;
  }
  .chat-composer > span {
    width: 26px;
    height: 26px;
    font-size: 19px;
    border-radius: 6px;
  }
  .kdm-section {
    height: auto;
    padding: 56px 20px;
  }
  .kdm-copy {
    position: static;
    width: auto;
    max-width: 460px;
  }
  .kdm-copy h2 {
    font-size: 32px;
    line-height: 33px;
    margin-top: 12px;
    letter-spacing: -1.4px;
  }
  .kdm-copy > p {
    font-size: 14px;
    line-height: 22px;
    margin-top: 18px;
    white-space: normal;
  }
  .kdm-copy .text-link {
    font-size: 13px;
    margin-top: 22px;
  }
  .kdm-workspace {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    min-height: 242px;
    margin-top: 30px;
    padding: 16px 13px;
    border-radius: 7px;
  }
  .kdm-title h3 {
    font-size: 12px;
  }
  .kdm-title p {
    font-size: 8px;
    margin-top: 5px;
  }
  .kdm-key-icon {
    width: 30px;
    height: 34px;
  }
  .kdm-key-icon .icon {
    width: 21px;
    height: 21px;
  }
  .kdm-title > .tag {
    font-size: 5.5px;
    padding: 4px;
  }
  .kdm-summary {
    font-size: 7px;
    gap: 11px;
    margin: 15px 0 12px;
  }
  .kdm-summary strong {
    font-size: 10px;
  }
  .kdm-table {
    font-size: 8px;
    min-width: 430px;
  }
  .kdm-table thead th {
    font-size: 7px;
    padding: 7px;
  }
  .kdm-table td {
    padding: 8px 7px;
  }
  .kdm-table td:first-child strong {
    font-size: 8px;
  }
  .kdm-table small {
    font-size: 6.5px;
  }
  .kdm-table .tag {
    font-size: 7px;
    padding: 4px 5px;
  }
  .kdm-bottom {
    gap: 10px;
    margin-top: 13px;
  }
  .kdm-bottom > span {
    font-size: 7px;
    max-width: 165px;
  }
  .kdm-bottom .app-button {
    font-size: 8px;
    height: 27px;
    padding: 0 11px;
    gap: 10px;
  }
}
@media (min-width: 701px) {
  .kdm-section {
    height: calc(296 * var(--u));
  }
  .kdm-workspace {
    height: calc(240 * var(--u));
  }
}
.contact-identity > img {
  object-position: right center;
}

/* ===== Pass of 26 Oct 2026 (Marcin): header, one-screen hero, chevrons, spacing, login. ===== */
:root {
  --header-h: 64px;
}
html {
  scroll-padding-top: calc(var(--header-h) + 8px);
}
/* A drawn chevron instead of the U+2304 glyph, which sits on the baseline in every font. */
.chev {
  display: inline-block;
  flex-shrink: 0;
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.45em;
  background: currentColor;
  opacity: 0.55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.release-filters > span,
.small-filters > span,
.report-filters span,
.portal-heading > span {
  display: inline-flex;
  align-items: center;
}
.form-select > span:last-child > .chev,
.select-arrow > .chev,
.assistant-chevron > .chev {
  margin-left: 0;
}
.assistant-chevron > .chev {
  opacity: 1;
}

/* Header: sticky, larger and readable type, active section underlined. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.site-header.scrolled {
  border-bottom-color: #e9edf3;
  box-shadow: 0 6px 24px #0f1e360d;
}
.nav-mobile-only {
  display: none;
}
.lang-switch {
  position: relative;
}
.lang-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid #e3e8f0;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: #2a3a50;
  transition: border-color 0.2s, background 0.2s;
}
.lang-button:hover,
.lang-button[aria-expanded="true"] {
  border-color: #cfd8e5;
  background: #f8fafc;
}
.lang-button .chev {
  margin-left: 0;
}
.lang-flag,
.lang-menu img,
.footer-locales img {
  width: 20px;
  height: 15px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px #0f1e3614;
  flex-shrink: 0;
}
.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 196px;
  list-style: none;
  margin: 0;
  padding: 6px;
  background: #fff;
  border: 1px solid #e6ebf2;
  border-radius: 12px;
  box-shadow: 0 20px 44px #0f1e3626;
  z-index: 60;
}
.lang-menu[hidden] {
  display: none;
}
.lang-menu button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  font-size: 14px;
  line-height: 1.3;
  color: #24344a;
  text-align: left;
}
.lang-menu button:hover,
.lang-menu button:focus-visible {
  background: #f4f6fa;
  outline: none;
}
.lang-menu button[aria-current="true"] {
  background: #fff3ec;
  color: var(--orange);
  font-weight: 650;
}
.footer-locales {
  gap: 4px !important;
}
.footer-locales button {
  display: flex;
  padding: 4px;
  border: 0;
  border-radius: 5px;
  background: none;
  opacity: 0.55;
  transition: opacity 0.2s, background 0.2s;
}
.footer-locales button:hover,
.footer-locales button[aria-current="true"] {
  opacity: 1;
  background: #f4f6fa;
}
.footer-locales img {
  width: 18px;
  height: 13px;
}
@media (min-width: 701px) {
  .header-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 calc(33 * var(--u)) 0 calc(50 * var(--u));
  }
  .site-header .brand {
    font-size: 22px;
    gap: 7px;
    flex-shrink: 0;
  }
  .site-header .brand-mark {
    width: 26px;
    height: 28px;
    font-size: 23px;
    border-radius: 5px;
  }
  .main-nav {
    flex: 1;
    justify-content: center;
    gap: 2px;
    font-size: 14px;
    font-weight: 560;
    color: #44536a;
  }
  .main-nav a {
    position: relative;
    padding: 8px 11px;
    border-radius: 8px;
    transition: color 0.2s, background 0.2s;
  }
  .main-nav a:hover {
    color: var(--ink);
    background: #f3f5f9;
  }
  .main-nav a.is-active {
    color: var(--ink);
  }
  .main-nav a.is-active:after {
    content: "";
    position: absolute;
    left: 11px;
    right: 11px;
    bottom: 1px;
    height: 2px;
    border-radius: 2px;
    background: var(--orange);
  }
  .header-actions {
    gap: 10px;
    font-size: 14px;
    color: #2a3a50;
    flex-shrink: 0;
  }
  .login {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    font-weight: 620;
    transition: background 0.2s, color 0.2s;
  }
  .login .icon {
    width: 17px;
    height: 17px;
  }
  .login:hover {
    background: #f3f5f9;
    color: var(--ink);
  }
  .header-actions .btn {
    height: 40px;
    font-size: 14px;
    padding: 0 18px;
    gap: 10px;
    border-radius: 8px;
  }
  /* Hero: header + hero fill exactly one screen; the content is centred vertically. */
  .hero {
    height: min(calc(505 * var(--u)), max(calc(100vh - var(--header-h)), calc(380 * var(--u))));
    background-size: cover;
    background-position: center;
  }
  .hero-copy {
    top: 50%;
    transform: translateY(-50%);
  }
  .booking-workspace {
    top: 50%;
    transform: translateY(-47%);
    box-shadow: 0 24px 60px #0000004d;
  }
  /* Reconciliations: its own card with a gap, not glued under the three source cards. */
  .report-sources {
    gap: calc(8 * var(--u));
  }
  .report-sources article {
    height: calc(60 * var(--u));
  }
  .report-workspace {
    height: auto;
    margin-top: calc(10 * var(--u));
    padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(8 * var(--u));
    border-top: calc(1 * var(--u)) solid #e9edf3;
    border-radius: calc(5 * var(--u));
  }
  .report-workspace > h3 {
    margin-bottom: calc(9 * var(--u));
  }
  .report-filters {
    margin-bottom: calc(10 * var(--u));
  }
}
/* Between phone and wide desktop the section links move into the menu button. */
@media (min-width: 701px) and (max-width: 1320px) {
  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    order: 3;
    width: 40px;
    height: 40px;
    border: 1px solid #e3e8f0;
    border-radius: 8px;
    background: #fff;
  }
  .header-actions {
    margin-left: auto;
  }
  .main-nav {
    position: absolute;
    top: var(--header-h);
    right: calc(33 * var(--u));
    flex: none;
    display: none;
    flex-direction: column;
    align-items: stretch;
    min-width: 240px;
    padding: 8px;
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 12px;
    box-shadow: 0 20px 44px #0f1e3626;
  }
  .main-nav.open {
    display: flex;
  }
  .main-nav a.is-active:after {
    display: none;
  }
}
/* Phone: flag stays in the bar, login and demo go into the menu. */
@media (max-width: 700px) {
  :root {
    --header-h: 66px;
  }
  .header-actions {
    display: flex;
    margin-left: auto;
    gap: 8px;
  }
  .header-actions .login,
  .header-actions .btn,
  .lang-code {
    display: none;
  }
  .nav-mobile-only {
    display: block;
  }
  .nav-demo {
    color: var(--orange);
    font-weight: 650;
  }
  .lang-menu {
    position: fixed;
    top: 70px;
    right: 12px;
  }
  .site-footer .footer-locales {
    flex-wrap: wrap;
  }
}

/* Login dialog: same form and API as the panel's login (POST /api/auth/login). */
.login-dialog {
  width: min(880px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 40px 100px #0a121f66;
}
.login-dialog[open] {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  animation: login-in 0.25s ease-out;
}
.login-dialog::backdrop {
  background: #0a111ccc;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
@keyframes login-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}
.login-dialog > .dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 9px;
  background: #f3f5f9;
  color: #4a5a70;
}
.login-dialog > .dialog-close:hover {
  background: #e8ecf2;
}
.login-dialog > .dialog-close .icon {
  width: 18px;
  height: 18px;
}
.login-art {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 520px;
  padding: 36px;
  color: #fff;
  background: #141018 url("site-assets/hero-cinema.webp") 30% center / cover no-repeat;
}
.login-art:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0a0d1626 0%, #0a0d16e6 78%);
}
.login-art-copy {
  position: relative;
}
.login-art .eyebrow {
  font-size: 11px;
}
.login-art strong {
  display: block;
  margin-top: 10px;
  font-size: 32px;
  line-height: 1.05;
  font-weight: 740;
  letter-spacing: -0.04em;
}
.login-art ul {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
  font-size: 14px;
  color: #dfe3ea;
}
.login-art li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.login-art li:before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px #ff59092e;
}
.login-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 48px 36px;
  font-size: 14px;
}
.login-form .brand {
  font-size: 22px;
  gap: 7px;
}
.login-form .brand-mark {
  width: 26px;
  height: 28px;
  font-size: 23px;
  border-radius: 5px;
}
.login-form h2 {
  margin-top: 28px;
  font-size: 28px;
  letter-spacing: -0.035em;
}
.login-sub {
  margin-top: 6px;
  font-size: 14.5px;
}
.login-error {
  margin-top: 18px;
  padding: 10px 12px;
  border: 1px solid #ffd0c2;
  border-radius: 9px;
  background: #fff4f0;
  color: #c2410c;
  font-size: 13.5px;
}
.login-error[hidden] {
  display: none;
}
.login-form label {
  margin-top: 18px;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 620;
  color: #2a3a50;
}
.login-form input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid #dbe2ec;
  border-radius: 10px;
  background: #fbfcfe;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.login-form input::placeholder {
  color: #a5b1c2;
}
.login-form input:focus {
  border-color: var(--orange);
  background: #fff;
  box-shadow: 0 0 0 4px #ff590920;
}
.password-field {
  position: relative;
}
.password-field input {
  padding-right: 48px;
}
.password-toggle {
  position: absolute;
  top: 5px;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #8a98ab;
}
.password-toggle:hover,
.password-toggle[aria-pressed="true"] {
  color: var(--orange);
  background: #fff3ec;
}
.password-toggle .icon {
  width: 18px;
  height: 18px;
}
.login-submit {
  width: 100%;
  height: 48px;
  margin-top: 24px;
  gap: 10px;
  font-size: 15px;
  border-radius: 10px;
}
.login-submit:disabled {
  opacity: 0.7;
  transform: none;
}
.login-foot {
  margin-top: 18px;
  font-size: 13.5px;
  text-align: center;
}
.login-foot a,
.login-secure a {
  color: var(--orange);
  font-weight: 600;
}
.login-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid #eef1f6;
  font-size: 12.5px;
  color: #8a98ab;
}
.login-secure .icon {
  width: 14px;
  height: 14px;
}
@media (max-width: 760px) {
  .login-dialog[open] {
    grid-template-columns: 1fr;
  }
  .login-art {
    display: none;
  }
  .login-form {
    padding: 40px 24px 28px;
  }
}
/* Live sales metric cards: the fixed height clipped the "vs. last week" line. */
@media (min-width: 701px) {
  .sales-metrics > div {
    height: auto;
    padding: calc(8 * var(--u)) calc(9 * var(--u)) calc(7 * var(--u));
  }
  .sales-metrics strong {
    font-size: calc(16 * var(--u));
    line-height: 1.2;
    margin: calc(3 * var(--u)) 0 calc(2 * var(--u));
  }
  .sales-metrics small {
    display: block;
    line-height: 1.3;
  }
  .live-workspace {
    overflow: hidden;
  }
}
/* ===== Translations (i18n.js) ===== */
html.i18n-pending body {
  visibility: hidden;
}
/* Integration without a logo file: a coloured monogram, not an imitation of the brand mark. */
.integration-mono {
  border-radius: calc(7 * var(--v));
  color: #fff;
  font-size: calc(12 * var(--v));
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.market-options > button > span img {
  pointer-events: none;
}
.report-workspace td b,
.sales-metrics b,
.release-filters b,
.small-filters b,
.report-filters b {
  font-weight: inherit;
}
/* Other languages run longer than the English layout was measured for: let copy wrap. */
html:not([data-lang="en"]):not([data-lang="en-us"]) .kdm-copy > p,
html:not([data-lang="en"]):not([data-lang="en-us"]) .reporting-copy > p,
html:not([data-lang="en"]):not([data-lang="en-us"]) .markets-copy > p,
html:not([data-lang="en"]):not([data-lang="en-us"]) .markets-copy h2,
html:not([data-lang="en"]):not([data-lang="en-us"]) .integrations-heading h2,
html:not([data-lang="en"]):not([data-lang="en-us"]) .report-sources h3 {
  white-space: normal;
}
html:not([data-lang="en"]):not([data-lang="en-us"]) .integrations-heading h2 {
  max-width: 72%;
}
html[data-lang="zh"] body {
  font-family: Inter, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}
html[data-lang="ja"] body {
  font-family: Inter, "Hiragino Sans", "Yu Gothic UI", "Meiryo", "Noto Sans JP", sans-serif;
}
html[data-lang="hi"] body {
  font-family: Inter, "Nirmala UI", "Noto Sans Devanagari", sans-serif;
}
html[data-lang="zh"] :is(h1, h2, h3),
html[data-lang="ja"] :is(h1, h2, h3),
html[data-lang="hi"] :is(h1, h2, h3) {
  letter-spacing: 0;
  line-height: 1.25;
}html:not([data-lang="en"]):not([data-lang="en-us"]) :is(h1, h2, p) {
  white-space: normal;
}
html:not([data-lang="en"]):not([data-lang="en-us"]) .market-form .app-button {
  width: auto;
}/* Translations wrap by width; the English desktop line breaks would orphan words. */
html:not([data-lang="en"]):not([data-lang="en-us"]) .desktop-break {
  display: none;
}
/* Live sales copy sits on a bright photo: give the orange bits a light backing. */
@media (min-width: 701px) {
  .live-copy .eyebrow,
  .live-copy .text-link {
    display: inline-flex;
    padding: calc(3 * var(--u)) calc(7 * var(--u));
    margin-left: calc(-7 * var(--u));
    border-radius: calc(5 * var(--u));
    background: #ffffffd9;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}
/* ===== Second pass of 26 Oct (Marcin's screenshots) ===== */
.presales-strong {
  color: var(--orange);
  font-weight: 700;
}
.integration-logo img {
  border-radius: calc(7 * var(--v));
}
/* Mock-up sidebars: labels wrap instead of running out of the panel in longer languages. */
.app-nav > span,
.app-sidebar-bottom > span {
  white-space: normal;
  line-height: 1.2;
  min-width: 0;
}
@media (min-width: 701px) {
  /* Buttons size to their label (Polish/German labels are longer than the English). */
  .hero-actions .btn {
    width: auto;
    min-width: calc(143 * var(--u));
    padding: 0 calc(20 * var(--u));
  }
  /* Sections with headings that may wrap grow with their content. */
  .integrations-section {
    height: auto;
    min-height: calc(277 * var(--v));
    padding-bottom: calc(40 * var(--v));
  }
  .features-section {
    height: auto;
    min-height: calc(257 * var(--v));
    padding-bottom: calc(40 * var(--v));
  }
  .features-heading h2 {
    margin-bottom: calc(6 * var(--v));
  }
  .feature-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: calc(22 * var(--v));
  }
  .feature-grid > a {
    height: auto;
    min-height: calc(47 * var(--v));
    padding-top: calc(8 * var(--v));
    padding-bottom: calc(8 * var(--v));
  }
  .feature-grid > a > span {
    white-space: normal;
    line-height: 1.25;
    min-width: 0;
  }
  .site-footer > small {
    margin-left: auto;
  }
  .site-footer .lang-switch {
    margin-left: calc(24 * var(--v));
  }
}
/* Footer language picker opens upwards. */
.lang-switch-up .lang-menu {
  top: auto;
  bottom: calc(100% + 8px);
}
/* Contact dialog: same frame as the login dialog. */
.contact-art {
  background-image: url("site-assets/cta-cinema.webp");
  background-position: 60% center;
}
.contact-form {
  padding-top: 40px;
}
.contact-form h2 {
  margin-top: 0;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}
.contact-grid > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.contact-form label {
  display: block;
}
.contact-form textarea {
  width: 100%;
  min-height: 84px;
  padding: 12px 14px;
  border: 1px solid #dbe2ec;
  border-radius: 10px;
  background: #fbfcfe;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  resize: vertical;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.contact-form textarea:focus {
  border-color: var(--orange);
  background: #fff;
  box-shadow: 0 0 0 4px #ff590920;
}
.contact-note {
  font-size: 12.5px;
  color: #8a98ab;
}
.contact-dialog {
  overflow-y: auto;
}
@media (max-width: 700px) {
  /* Markets copy sits on a photo: a light veil keeps text and the +121 button readable. */
  .markets-section:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #ffffffee 0%, #ffffffe0 48%, #ffffff00 78%);
    pointer-events: none;
  }
  .markets-copy {
    position: relative;
    z-index: 1;
  }
  .market-count {
    background: #fff;
  }
  /* Phone width is too narrow for the mock-up sidebars: show the main panel only. */
  .market-workspace,
  .crm-workspace,
  .portal-workspace {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  .market-workspace .app-sidebar,
  .crm-workspace .app-sidebar,
  .portal-workspace .app-sidebar {
    display: none;
  }
  .contact-grid {
    grid-template-columns: 1fr;
  }
}.hero-actions {
  flex-wrap: wrap;
  row-gap: 12px;
}
.hero-actions .text-link {
  white-space: nowrap;
}/* "Built for your market": filled by i18n.js for the visitor's home market. */
.local-section {
  background: linear-gradient(180deg, #fff 0%, #fff8f3 100%);
  border-top: 1px solid #f1ece8;
  padding: calc(34 * var(--u)) calc(54 * var(--u)) calc(38 * var(--u));
}
.local-head {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
}
.local-flag {
  width: calc(42 * var(--u));
  height: calc(31 * var(--u));
  object-fit: cover;
  border-radius: calc(4 * var(--u));
  box-shadow: 0 0 0 1px #0f1e3614, 0 calc(4 * var(--u)) calc(12 * var(--u)) #0f1e3614;
}
.local-head h2 {
  margin-top: calc(5 * var(--u));
  font-size: calc(26 * var(--u));
  letter-spacing: calc(-1.1 * var(--u));
}
.local-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(12 * var(--u));
  margin-top: calc(20 * var(--u));
}
.local-grid article {
  padding: calc(14 * var(--u)) calc(15 * var(--u));
  border: 1px solid #efe7e1;
  border-top: calc(2 * var(--u)) solid var(--orange);
  border-radius: calc(6 * var(--u));
  background: #fff;
  box-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) #2a1a0a08;
}
.local-grid h3 {
  font-size: calc(10.5 * var(--u));
  font-weight: 700;
  letter-spacing: calc(-0.2 * var(--u));
  line-height: 1.25;
}
.local-grid p {
  margin-top: calc(6 * var(--u));
  font-size: calc(8.6 * var(--u));
  line-height: 1.45;
}
@media (max-width: 700px) {
  .local-section {
    padding: 48px 20px;
  }
  .local-flag {
    width: 36px;
    height: 27px;
  }
  .local-head h2 {
    font-size: 27px;
    letter-spacing: -1px;
  }
  .local-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 22px;
  }
  .local-grid article {
    padding: 14px 16px;
  }
  .local-grid h3 {
    font-size: 15px;
  }
  .local-grid p {
    font-size: 13px;
  }
}@media (min-width: 701px) {
  /* Market configuration mock-up: grows with its content, the button keeps a margin. */
  .market-workspace {
    height: auto;
    min-height: calc(243 * var(--v));
  }
  .market-form {
    padding-bottom: calc(16 * var(--v));
  }
}@media (min-width: 701px) {
  .markets-section {
    height: calc(362 * var(--v));
  }
}
/* 27 Oct: homepage integrations = 11 tools + "more" tile, six smaller tiles per row. */
@media (min-width: 701px) {
  .integration-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: calc(9 * var(--v));
    margin-top: calc(17 * var(--v)); /* visually equal to the eyebrow-to-heading gap */
  }
  .integration-tile {
    height: calc(54 * var(--v));
    gap: calc(9 * var(--v));
    padding: calc(9 * var(--v)) calc(11 * var(--v));
  }
  .integration-tile > strong {
    font-size: calc(7.2 * var(--v));
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .integration-logo,
  .integration-logo img {
    width: calc(24 * var(--v));
    height: calc(24 * var(--v));
  }
  .integration-more {
    gap: calc(1 * var(--v));
    padding: calc(5 * var(--v));
  }
  .integration-more > strong {
    font-size: calc(17 * var(--v));
    line-height: 1.1;
    overflow: visible;
  }
  .integration-more > span {
    font-size: calc(7.5 * var(--v));
  }
  .integration-more b {
    font-size: calc(9 * var(--v));
    margin-left: calc(4 * var(--v));
  }
}
@media (max-width: 700px) {
  .integration-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .integration-tile {
    height: 76px;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 8px 6px;
    text-align: center;
  }
  .integration-tile > strong {
    font-size: 9px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .integration-logo,
  .integration-logo img {
    width: 26px;
    height: 26px;
  }
}
/* Day squares in booking grids (one per day of the play week). */
.schedule.with-days, .booking-cell.with-days {
  display: flex !important; flex-direction: column; align-items: stretch; justify-content: center; gap: 4px;
  text-align: left;
}
.with-days .day-label { font-size: 0.82em; line-height: 1.1; white-space: nowrap; }
.with-days .day-squares { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.with-days .day-squares i { display: block; aspect-ratio: 1; border-radius: 2px; background: currentColor; opacity: 0.55; }
.with-days .day-squares i.off { background: #c9d2df; opacity: 0.35; }
.schedule.orange-fill.with-days .day-squares i { background: #fff; opacity: 0.85; }
.schedule.peach.with-days .day-squares i, .booking-cell.peach.with-days .day-squares i { background: #f39a5f; opacity: 0.9; }
.schedule.mint.with-days .day-squares i, .booking-cell.mint.with-days .day-squares i { background: #4fbf88; opacity: 0.85; }

.with-days .day-squares i.off { background: transparent; box-shadow: inset 0 0 0 1px #0f1e3624; opacity: 1; }

/* Day squares always fit inside their cell. */
.schedule.with-days, .booking-cell.with-days { min-width: 0; overflow: hidden; box-sizing: border-box; }
.with-days .day-squares { width: 100%; min-width: 0; box-sizing: border-box; gap: 2px; }
.with-days .day-squares i { width: auto !important; min-width: 0 !important; height: auto !important; margin: 0 !important; }