/* ==========================================================================
   Platform-1 section ("Platform" — tabbed feature showcase)
   ========================================================================== */

.platform-1 {
  padding-top: 0;
  padding-bottom: 0;
}

.platform-1 .container {
  display: flex;
  flex-direction: column;
}

/* ---------- Intro ---------- */

.platform-1-intro {
  padding: 100px 48px 64px;
  border-bottom: 0.5px solid var(--border-color);
  max-width: 784px;
}

.platform-1-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  margin-bottom: 16px;
  background: #E6F4FE;
  border: 1px solid #FFFFFF;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: #0588F0;
}

.platform-1-heading {
  font-size: 48px;
  line-height: 1.17;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--text-main);
  margin-bottom: 16px;
}

.platform-1-subtext {
  font-size: 18px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--text-muted);
}

/* ---------- Tabs + panels layout ---------- */

.platform-1-body {
  display: flex;
  align-items: flex-start;
}

.platform-1-tabs {
  position: sticky;
  top: 100px;
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 56px;
  border-right: 0.5px solid var(--border-color);
}

.platform-1-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  padding: 10px 0 10px 40px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.006em;
  color: #A3A3A3;
  cursor: pointer;
  text-align: left;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.platform-1-tab-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

img.platform-1-tab-icon {
  width: 15.3px;
  height: 18px;
}

.platform-1-tab:hover {
  color: #5A5A5A;
}

.platform-1-tab.is-active {
  color: var(--text-main);
  border-left-color: #0090FF;
  background: #FFFFFF;
}

/* ---------- Panels ---------- */

.platform-1-panels {
  flex: 1 1 auto;
  min-width: 0;
}

.platform-1-panel {
  display: none;
}

.platform-1-panel.is-active {
  display: block;
  animation: platform1FadeIn 0.3s ease;
}

@keyframes platform1FadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.platform-1-panel-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 48px;
}

.platform-1-panel[data-panel="tulvo-ai"] .platform-1-panel-text {
  padding-top: 56px;
}

.platform-1-panel-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: uppercase;
  color: #0588F0;
}

.platform-1-panel-label svg,
.platform-1-panel-label img {
  width: 15.3px;
  height: 18px;
  flex-shrink: 0;
}

.platform-1-panel-label svg[data-lucide] {
  width: 18px;
  height: 18px;
}

.platform-1-panel-title {
  font-size: 24px;
  line-height: 1.33;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-main);
  max-width: 640px;
}

.platform-1-panel[data-panel="boards-data"] .platform-1-panel-title {
  max-width: 423px;
}

.platform-1-panel[data-panel="documents"] .platform-1-panel-title {
  max-width: 326px;
}

.platform-1-panel-desc {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #657080;
}

.platform-1-panel-visual {
  position: relative;
  background: #F6F6F7;
  border-top: 0.5px solid var(--border-color);
  border-bottom: 0.5px solid var(--border-color);
  overflow: hidden;
  height: 813px;
}

.platform-1-panel-visual::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 137px;
  background: linear-gradient(to bottom, rgba(246, 246, 247, 0), #F6F6F7 90%);
  pointer-events: none;
}

.platform-1-visual-img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   Tulvo AI visual
   ========================================================================== */

.platform-1-visual-tulvo-ai {
  padding: 0;
}

.ta-card {
  position: absolute;
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.32), 0 4px 12px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

.ta-card-page {
  left: 48px;
  top: 48px;
  width: 515px;
  max-width: calc(100% - 96px);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ta-card-chat {
  right: 48px;
  top: 125px;
  width: 380px;
  max-width: calc(100% - 96px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ta-page-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-main);
}
.ta-page-header svg { width: 15px; height: 15px; }

.ta-field { display: flex; flex-direction: column; gap: 6px; }
.ta-field label { font-size: 11px; color: #A3A3A3; }
.ta-hint { font-size: 10px; color: #A3A3A3; }

.ta-input {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-main);
  background: #FFFFFF;
}
.ta-input svg { width: 13px; height: 13px; color: #A3A3A3; }
.ta-input-select { justify-content: space-between; }
.ta-input-select span { flex: 1; }

.ta-layout-grid, .ta-template-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ta-layout-option, .ta-template-option {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #FAFAFA;
}

.ta-layout-option.is-selected, .ta-template-option.is-selected {
  border-color: #0090FF;
  background: #F2F8FF;
}

.ta-layout-option.is-locked { opacity: 0.5; }

.ta-layout-thumb {
  width: 32px;
  height: 24px;
  border-radius: 4px;
  background: #E5E5E5;
  flex-shrink: 0;
}

.ta-template-option > svg[data-lucide]:first-child {
  width: 16px;
  height: 16px;
  color: var(--text-main);
  flex-shrink: 0;
}

.ta-layout-copy { display: flex; flex-direction: column; gap: 2px; }
.ta-layout-copy strong { font-size: 11px; font-weight: 500; color: var(--text-main); }
.ta-layout-copy span { font-size: 9.5px; color: #A3A3A3; }

.ta-lock-icon { position: absolute; top: 10px; right: 10px; width: 11px; height: 11px; color: #A3A3A3; }
.ta-check-icon { position: absolute; top: 10px; right: 10px; width: 14px; height: 14px; color: #0090FF; }

.ta-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ta-page-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}

.ta-btn {
  height: 32px;
  padding: 0 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border-color);
  background: #FFFFFF;
  color: var(--text-main);
  cursor: pointer;
}
.ta-btn-dark { background: #171717; color: #FFFFFF; border: none; }

/* chat card */

.ta-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-color);
}
.ta-chat-brand { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #737373; }
.ta-chat-brand svg { width: 13px; height: 13px; }
.ta-chat-header-actions { display: flex; align-items: center; gap: 12px; color: #737373; }
.ta-chat-header-actions svg { width: 13px; height: 13px; }
.ta-chip {
  display: flex;
  align-items: center;
  gap: 3px;
  background: #F5F5F5;
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 11px;
  opacity: 0.8;
}
.ta-chip svg { width: 11px; height: 11px; }

.ta-chat-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 16px 16px;
}
.ta-chat-logo { width: 24px; height: 27px; color: #0A0A0A; margin-bottom: 20px; }
.ta-chat-body h4 { font-size: 15px; font-weight: 600; color: var(--text-main); margin-bottom: 7px; }
.ta-chat-body p { font-size: 11px; line-height: 1.4; color: #737373; max-width: 230px; margin-bottom: 20px; }

.ta-suggestion-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.ta-suggestion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: #FFFFFF;
  cursor: pointer;
  font-family: inherit;
}
.ta-suggestion svg { width: 14px; height: 14px; color: #525252; }
.ta-suggestion strong { font-size: 11px; font-weight: 500; color: var(--text-main); }
.ta-suggestion span { font-size: 9.5px; color: #A3A3A3; }

.ta-chat-input {
  margin: 10px;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ta-chat-input > span { font-size: 11px; color: #737373; }
.ta-chat-input-row { display: flex; align-items: center; justify-content: space-between; }
.ta-chat-input-row > svg { width: 18px; height: 18px; color: #737373; }
.ta-chat-send {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: #171717;
  opacity: 0.5;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ta-chat-send svg { width: 12px; height: 12px; color: #FFFFFF; }

/* ==========================================================================
   Boards & Templates visual: a board as it looks in the app (toolbar, Kanban / Grid / List), and under it the data
   template that feeds it, wired to the boards that read from it. js/boards-views.js switches the view.
   ========================================================================== */

.platform-1-visual-boards { padding: 40px 48px; }
.platform-1-visual-boards::after { display: none; } /* everything fits, nothing to fade */

.bd-wrap { display: flex; flex-direction: column; gap: 18px; font-size: 13px; color: var(--text-main); }

/* Board window */
.bd-app {
  overflow: hidden;
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.32), 0 0 0 1px rgba(10, 10, 10, 0.05), 0 12px 32px -12px rgba(10, 10, 10, 0.12);
}
.bd-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px 10px 14px;
  border-bottom: 1px solid var(--border-color);
}
.bd-crumb { display: flex; align-items: center; gap: 7px; color: #737373; white-space: nowrap; }
.bd-crumb strong { color: var(--text-main); font-weight: 500; }
.bd-sep { color: #C4C4C4; }
.bd-back {
  display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 3px;
  border: 1px solid var(--border-color); border-radius: 7px; color: #525252;
}
.bd-back svg { width: 14px; height: 14px; }
.bd-controls { display: flex; align-items: center; gap: 8px; }
.bd-template-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
  border: 1px solid var(--border-color); border-radius: 8px; font-weight: 500;
}
.bd-template-chip svg { width: 14px; height: 14px; color: #525252; }
.bd-badge {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: #171717; color: #FFFFFF; font-size: 10.5px; font-weight: 600;
}
.bd-switch { display: inline-flex; padding: 3px; border-radius: 9px; background: #F2F2F3; }
.bd-switch button {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border: 0; border-radius: 7px; background: transparent; color: #737373;
  font: 500 12.5px/1 inherit; font-family: inherit; cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.bd-switch button svg { width: 14px; height: 14px; }
.bd-switch button:hover { color: var(--text-main); }
.bd-switch button[aria-pressed="true"] { background: #FFFFFF; color: var(--text-main); box-shadow: 0 1px 2px rgba(10, 10, 10, 0.1); }
.bd-switch button:focus-visible, .bd-board:focus-visible { outline: 2px solid #0588F0; outline-offset: 2px; }

/* The three views share one stage; only the chosen one shows */
.bd-stage { position: relative; height: 318px; padding: 12px; background: #FAFAFA; }
.bd-view { position: absolute; inset: 12px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s 0.28s; }
[data-view="kanban"] [data-bd-panel="kanban"],
[data-view="grid"] [data-bd-panel="grid"],
[data-view="list"] [data-bd-panel="list"] { opacity: 1; visibility: visible; transform: none; transition: opacity 0.28s ease, transform 0.28s ease; }

/* Stage colours, as on the app's kanban columns */
.is-lead { --st-bg: #FDF3EC; --st-pill: #FBE4D5; --st-ink: #A4410E; }
.is-qualified { --st-bg: #FDF7E7; --st-pill: #F8EBC2; --st-ink: #7F5A00; }
.is-proposal { --st-bg: #F5F2FC; --st-pill: #E7E1F8; --st-ink: #553A9E; }
.is-won { --st-bg: #EEF8F2; --st-pill: #D6F1E0; --st-ink: #1D7343; }
.bd-stage-pill {
  display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 6px;
  background: var(--st-pill); color: var(--st-ink); font-size: 11.5px; font-weight: 500; white-space: nowrap;
}
.bd-stage-pill svg, .bd-tag svg { width: 11px; height: 11px; }
.bd-tag {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px;
  border: 1px solid var(--border-color); border-radius: 6px; background: #FFFFFF;
  font-size: 11.5px; color: var(--text-main); white-space: nowrap;
}
.bd-value { font-weight: 500; font-variant-numeric: tabular-nums; }
.bd-muted { color: #8A8A8A; }
.bd-avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #FFFFFF; }

.bd-card {
  display: flex; flex-direction: column; gap: 12px; padding: 11px 12px;
  border: 1px solid rgba(10, 10, 10, 0.06); border-radius: 11px; background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.04);
}
.bd-card p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--text-main); }
.bd-card-meta { display: flex; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid #F1F1F1; }
.bd-card-meta .bd-value { margin-left: auto; font-size: 12px; }

/* Kanban */
.bd-kanban { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.bd-col { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; background: var(--st-bg); }
.bd-col-head { display: flex; align-items: center; gap: 8px; padding: 0 2px 2px; font-weight: 600; font-size: 12.5px; }
.bd-col-count { padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.75); color: #737373; font-size: 11px; font-weight: 400; }
.bd-col-head svg { width: 14px; height: 14px; margin-left: auto; color: #8A8A8A; }

/* Grid */
.bd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: min-content; gap: 10px; align-content: start; }
.bd-grid .bd-card { min-height: 128px; justify-content: space-between; }
.bd-grid .bd-card-meta { flex-wrap: wrap; }

/* List */
.bd-list { overflow: hidden; border: 1px solid rgba(10, 10, 10, 0.06); border-radius: 11px; background: #FFFFFF; }
.bd-tr {
  display: grid; grid-template-columns: minmax(0, 2.3fr) 1fr 1fr 0.6fr 0.8fr 0.8fr; align-items: center; gap: 10px;
  height: 36.5px; padding: 0 14px; border-bottom: 1px solid #F1F1F1;
}
.bd-tr:last-child { border-bottom: 0; }
.bd-th { height: 34px; background: #FCFCFC; color: #737373; font-size: 12px; font-weight: 500; }
.bd-td-title { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-td-title svg { flex: none; width: 13px; height: 13px; color: #A3A3A3; }

/* Template -> boards */
.bd-flow { display: grid; grid-template-columns: 300px minmax(0, 1fr) 270px; align-items: center; }
.bd-tpl {
  padding: 14px; border-radius: 16px; background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.05), 0 8px 24px -12px rgba(10, 10, 10, 0.14);
}
.bd-tpl-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bd-tpl-head div { display: flex; flex-direction: column; gap: 1px; }
.bd-tpl-head strong { font-size: 14px; font-weight: 600; }
.bd-tpl-head span { font-size: 11.5px; color: #8A8A8A; }
.bd-tpl-icon {
  position: relative; display: grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid var(--border-color); border-radius: 9px; color: #404040;
}
.bd-tpl-icon::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 8px; height: 8px; border-radius: 50%; background: #17B26A; box-shadow: 0 0 0 2px #FFFFFF; }
.bd-tpl-icon svg { width: 15px; height: 15px; }
.bd-props { margin: 0; padding: 0; list-style: none; border: 1px solid #F0F0F0; border-radius: 10px; }
.bd-props li { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-bottom: 1px solid #F3F3F3; font-size: 12.5px; }
.bd-props li:last-child { border-bottom: 0; }
.bd-props svg { width: 13px; height: 13px; color: #737373; }
.bd-props span { margin-left: auto; padding: 1px 7px; border: 1px solid #ECECEC; border-radius: 999px; color: #737373; font-size: 10.5px; }
.bd-tpl-foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: #737373; }
.bd-tpl-foot svg { width: 13px; height: 13px; }
.bd-tpl-foot strong { margin-left: auto; color: var(--text-main); font-weight: 500; }

.bd-wires { width: 100%; height: 210px; overflow: visible; }
.bd-wire { fill: none; stroke: #D9D9DC; stroke-width: 1.5; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; transition: stroke 0.25s ease; }
[data-view="kanban"] [data-wire="kanban"],
[data-view="grid"] [data-wire="grid"],
[data-view="list"] [data-wire="list"] { stroke: #0588F0; stroke-width: 2; animation: bd-flow 1.2s linear infinite; }
@keyframes bd-flow { to { stroke-dashoffset: -18; } }

.bd-boards { display: flex; flex-direction: column; gap: 8px; }
.bd-boards-label { height: 18px; margin: 0 0 0 2px; line-height: 18px; font-size: 11.5px; font-weight: 500; color: #8A8A8A; }
.bd-board {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 56px; padding: 0 12px;
  border: 1px solid transparent; border-radius: 12px; background: #FFFFFF; text-align: left; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.05), 0 2px 6px -2px rgba(10, 10, 10, 0.06);
  font-family: inherit; color: var(--text-main);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.bd-board:hover { transform: translateY(-1px); }
.bd-board[aria-pressed="true"] { border-color: #0588F0; box-shadow: 0 0 0 3px rgba(5, 136, 240, 0.14); }
.bd-board-icon { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: #F2F2F3; color: #404040; }
.bd-board[aria-pressed="true"] .bd-board-icon { background: #E6F2FE; color: #0573CC; }
.bd-board-icon svg { width: 15px; height: 15px; }
.bd-board > span:last-child { display: flex; flex-direction: column; gap: 1px; }
.bd-board strong { font-size: 13px; font-weight: 500; }
.bd-board em { font-style: normal; font-size: 11.5px; color: #8A8A8A; }

@media (prefers-reduced-motion: reduce) {
  .bd-view, [data-view] [data-bd-panel] { transition: none; transform: none; }
  .bd-wire { animation: none !important; }
  .bd-board:hover { transform: none; }
}

/* ==========================================================================
   Documents visual
   ========================================================================== */

.platform-1-visual-documents {
  padding: 48px;
  min-height: 560px;
}

/* Matches the Documents page in the Tulvo app: a top bar (back, breadcrumb, people, more), then the page on a grey
   canvas with the outline button at its corner, a title, the text and the "/" command menu. */
.doc-card {
  background: #F7F7F7;
  border-radius: 20px;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.32), 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.doc-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #FFFFFF;
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
  color: #737373;
}
.doc-breadcrumb { display: flex; align-items: center; gap: 8px; }
.doc-breadcrumb strong { color: var(--text-main); font-weight: 500; }
.doc-slash { color: #A3A3A3; }
.doc-back, .doc-more {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px;
  border: 1px solid var(--border-color); border-radius: 7px;
  background: #FFFFFF; color: #525252;
}
.doc-back svg, .doc-more svg { width: 14px; height: 14px; }
.doc-back { margin-right: 4px; }
.doc-toolbar-actions { display: flex; align-items: center; gap: 12px; }
.doc-avatars { display: flex; align-items: center; }
.doc-avatars img {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #FFFFFF; margin-left: -7px; object-fit: cover;
}
.doc-avatars img:first-child { margin-left: 0; }
.doc-live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px; border-radius: 999px;
  background: #ECFDF3; color: #067647; font-size: 12px; font-weight: 500;
}
.doc-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #17B26A; }

.doc-canvas { padding: 14px; }
.doc-page {
  position: relative;
  min-height: 430px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: #FFFFFF;
}
.doc-outline {
  position: absolute; top: 12px; left: 12px;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border: 1px solid var(--border-color); border-radius: 7px; color: #525252;
}
.doc-outline svg { width: 14px; height: 14px; }

.doc-body { position: relative; max-width: 520px; margin: 0 auto; padding: 34px 24px 28px; }
.doc-body h4 { margin: 0 0 12px; font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: var(--text-main); }
.doc-p { font-size: 14px; line-height: 1.6; color: #404040; }
.doc-h { margin: 20px 0 8px; font-size: 16px; font-weight: 500; color: var(--text-main); }

.doc-todo { margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.5; color: #404040; }
.doc-todo li { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.doc-todo li.is-done { color: #A3A3A3; text-decoration: line-through; }
.doc-check {
  display: grid; place-items: center; flex: none;
  width: 16px; height: 16px; border: 1.5px solid #D4D4D4; border-radius: 4px; background: #FFFFFF;
}
.is-done .doc-check { border-color: #0588F0; background: #0588F0; color: #FFFFFF; }
.doc-check svg { width: 11px; height: 11px; stroke-width: 3; }

.doc-typing { margin-top: 2px; font-size: 14px; line-height: 1.6; color: var(--text-main); }
.doc-filter { display: inline-flex; align-items: center; padding: 1px 6px 1px 5px; border-radius: 6px; background: #F2F2F2; }
.doc-filter-ph { margin-left: 1px; color: #A3A3A3; }
.doc-caret { width: 1.5px; height: 17px; margin-left: 1px; background: var(--text-main); animation: doc-caret 1s steps(1) infinite; }
@keyframes doc-caret { 50% { opacity: 0; } }

/* The editor's "/" menu, as in the app: Style and Insert groups, the hovered row in grey. */
.doc-slash-menu {
  display: flex; flex-direction: column; gap: 2px;
  width: 232px; margin-top: 8px; padding: 6px;
  border: 1px solid #EFEFEF; border-radius: 14px; background: #FFFFFF;
  box-shadow: 0 12px 32px -10px rgba(10, 10, 10, 0.18), 0 2px 6px rgba(10, 10, 10, 0.04);
}
.doc-slash-title { padding: 8px 8px 4px; font-size: 12px; font-weight: 500; color: var(--text-main); }
.doc-slash-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; font-size: 14px; color: #525252; }
.doc-slash-item svg { width: 15px; height: 15px; color: #525252; }
.doc-slash-item.is-active { background: #EDEDED; color: var(--text-main); font-weight: 500; }
.doc-slash-sep { height: 1px; margin: 6px 4px; background: #EDEDED; }

@media (prefers-reduced-motion: reduce) { .doc-caret { animation: none; } }

@media (max-width: 640px) {
  .doc-body { padding: 40px 16px 20px; }
}

/* ==========================================================================
   Reports visual
   ========================================================================== */

.platform-1-visual-reports {
  padding: 48px;
  min-height: 560px;
}

.rp-card {
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.32), 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.rp-tab {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-main);
}

.rp-kpi-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px solid var(--border-color);
}
.rp-kpi { padding: 16px 20px; border-right: 1px solid var(--border-color); }
.rp-kpi:last-child { border-right: none; }
.rp-kpi-top { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #A3A3A3; margin-bottom: 10px; }
.rp-kpi-top svg { width: 13px; height: 13px; }
.rp-kpi-top svg:last-child { margin-left: auto; }
.rp-kpi-value { font-size: 26px; font-weight: 500; color: var(--text-main); margin-bottom: 10px; }
.rp-kpi-foot { font-size: 11px; color: #A3A3A3; }

.rp-chart-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  border-bottom: 1px solid var(--border-color);
}
.rp-bar-card { padding: 16px 20px; border-right: 1px solid var(--border-color); }
.rp-pie-card { padding: 16px 20px; display: flex; flex-direction: column; align-items: center; }
.rp-card-head { display: flex; align-items: center; font-size: 13px; font-weight: 500; color: var(--text-main); margin-bottom: 4px; }
.rp-card-head svg { width: 13px; height: 13px; margin-left: auto; color: #A3A3A3; }
.rp-card-sub { font-size: 11px; color: #A3A3A3; margin-bottom: 16px; }

.rp-bars {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 140px;
}
.rp-bars::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  bottom: 22px;
  background-image:
    repeating-linear-gradient(to right, #E5E5E5 0 4px, transparent 4px 8px),
    repeating-linear-gradient(to right, #E5E5E5 0 4px, transparent 4px 8px),
    repeating-linear-gradient(to right, #E5E5E5 0 4px, transparent 4px 8px),
    repeating-linear-gradient(to right, #E5E5E5 0 4px, transparent 4px 8px);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 0%, 0 33%, 0 66%, 0 100%;
}
.rp-bar {
  flex: 1 1 0;
  height: calc(var(--v) * 22px);
  min-height: 3px;
  background: #0090FF;
  border-radius: 4px 4px 0 0;
  position: relative;
  z-index: 1;
}
.rp-bar span {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--text-main);
}
.rp-bar-labels {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  font-size: 9.5px;
  color: #A3A3A3;
}
.rp-bar-labels span { flex: 1 1 0; text-align: center; }

.rp-pie { margin: 4px 0 12px; overflow: visible; }
.rp-pie-label { font-size: 10px; fill: var(--text-main); font-family: inherit; }
.rp-pie-foot { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #A3A3A3; }
.rp-pie-foot svg { width: 11px; height: 11px; }

.rp-leaderboard { padding: 16px 20px; }
.rp-lb-rows { border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; }
.rp-lb-row {
  display: flex;
  align-items: stretch;
  font-size: 12px;
  color: var(--text-main);
  border-bottom: 1px solid var(--border-color);
}
.rp-lb-row:last-child { border-bottom: none; }
.rp-lb-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  flex-shrink: 0;
  background: #FCFCFC;
  border-right: 1px solid var(--border-color);
  color: #737373;
}
.rp-lb-content { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; padding: 8px 12px; min-width: 0; }
.rp-lb-content img { width: 15px; height: 15px; border-radius: 3px; object-fit: cover; }
.rp-lb-bar { flex: 1; height: 4px; background: var(--border-color); border-radius: 2px; position: relative; overflow: hidden; }
.rp-lb-bar::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: calc(var(--v) * 100%);
  background: #0A0A0A;
}
.rp-lb-value { color: #A3A3A3; width: 16px; text-align: right; }

/* ==========================================================================
   Deploy & Host visual
   ========================================================================== */

.platform-1-visual-deploy {
  padding: 48px;
  min-height: 560px;
  display: flex;
  justify-content: center;
}

/* The shared fade at the bottom of a panel would wash out the bottom of this screenshot */
.platform-1-visual-deploy::after {
  display: none;
}

.dp-shot {
  width: 100%;
  max-width: 860px;
  align-self: flex-start;
  overflow: hidden;
  border: 0.5px solid var(--border-color);
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.32), 0 4px 12px rgba(0, 0, 0, 0.05);
}

.dp-screenshot {
  display: block;
  width: 100%;
  height: auto;
}

/* Tablets and phones: show the upload card at a readable size instead of the whole screen */
@media (max-width: 1024px) {
  .platform-1-visual-deploy {
    padding: 24px 16px;
    min-height: 0;
  }

  .dp-shot {
    position: relative;
    aspect-ratio: 1 / 0.86;
  }

  .dp-screenshot {
    position: absolute;
    top: -10.2%;
    left: -69.5%;
    width: 190%;
    max-width: none;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  .platform-1-body { flex-direction: column; align-items: stretch; gap: 32px; }
  /* One swipeable row instead of tabs wrapping unevenly: no scrollbar, tabs snap, and the right edge
     fades when more tabs follow. js/mock-scale.js keeps the selected tab in view. */
  .platform-1-tabs {
    position: static;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px 16px;
    flex: 1 1 auto;
    padding: 0 36px;
    border-right: none;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 12px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  }
  .platform-1-tabs::-webkit-scrollbar { display: none; }
  .platform-1-tab { flex-shrink: 0; width: auto; padding: 8px 12px; border-left: none; border-bottom: 2px solid transparent; white-space: nowrap; scroll-snap-align: start; }
  .platform-1-tab.is-active { border-bottom-color: #0090FF; }
  .platform-1-panel-visual { height: auto; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 640px) {
  .platform-1-intro { padding: 64px 24px 40px; }
  .platform-1-heading { font-size: var(--section-title-phone); line-height: var(--section-title-phone-lh); letter-spacing: -0.02em; }
  .platform-1-body { padding: 16px 12px; }
  .platform-1-tabs { padding: 0 32px 0 0; }
  /* Phones: a 16px gutter around the mock-ups instead of 48px, so more of the mock-up shows */
  .platform-1-visual-boards,
  .platform-1-visual-documents,
  .platform-1-visual-reports { padding-left: 16px; padding-right: 16px; }
  .platform-1-tab { font-size: 16px; }
  /* 12px body gutter + 12px here = the same 24px text edge as the section heading */
  .platform-1-panel-text,
  .platform-1-panel[data-panel="tulvo-ai"] .platform-1-panel-text { padding: 24px 12px 8px; }
}

/* =========================================================================
   Home page showcase: the feature section sticks below the header while the
   page scrolls, and the scroll position picks the feature (js/platform-showcase.js).
   Only on body.home-showcase, and only when the viewport can fit it; everywhere
   else the normal stacked tabs + panels layout above applies.
   ========================================================================= */
@media (min-width: 1025px) and (min-height: 640px) {
  .home-showcase {
    --p1-header: 64px;
    --p1-stick: calc(100vh - var(--p1-header));
    --p1-step: 70vh;
    --p1-steps: 5;
  }

  @supports (height: 100dvh) {
    .home-showcase {
      --p1-stick: calc(100dvh - var(--p1-header));
      --p1-step: 70dvh;
    }
  }

  .home-showcase .platform-1-track {
    height: calc(var(--p1-stick) + var(--p1-steps) * var(--p1-step));
  }

  .home-showcase .platform-1-stick {
    position: sticky;
    top: var(--p1-header);
    height: var(--p1-stick);
    background: var(--bg-color);
  }

  .home-showcase .platform-1-body {
    height: 100%;
    align-items: stretch;
  }

  .home-showcase .platform-1-tabs {
    position: static;
    align-self: stretch;
    padding-top: 40px;
  }

  .home-showcase .platform-1-panels {
    position: relative;
    height: 100%;
  }

  /* All five panels stay rendered (images and mock-ups are ready before they show);
     only the active one is visible and reachable. */
  .home-showcase .platform-1-panel,
  .home-showcase .platform-1-panel.is-active {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    animation: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s linear 0.14s;
  }

  .home-showcase .platform-1-panel.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.3s ease 0.12s, transform 0.3s ease 0.12s, visibility 0s;
  }

  .home-showcase .platform-1-panel-text,
  .home-showcase .platform-1-panel[data-panel="tulvo-ai"] .platform-1-panel-text {
    flex: 0 0 auto;
    padding: 36px 48px 24px;
    gap: 12px;
  }

  .home-showcase .platform-1-panel-visual {
    flex: 1 1 0;
    min-height: 0;
    height: auto;
  }
}

@media (min-width: 1025px) and (min-height: 640px) and (prefers-reduced-motion: reduce) {
  .home-showcase .platform-1-panel,
  .home-showcase .platform-1-panel.is-active {
    transition: none;
    transform: none;
  }
}

/* Mock-ups keep their desktop layout and are scaled down to fit narrow screens (js/mock-scale.js sets --mock-zoom).
   One that still pans sideways fades at its right edge until scrolled to the end, so it reads as "swipe for more". */
@media (max-width: 1024px) {
  .platform-1-panel-visual.is-pannable:not(.is-at-end) {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
  }
}

.mock-scale { display: contents; }

@media (max-width: 1024px) {
  .mock-scale {
    display: block;
    position: relative;
    width: 958px;
    height: 813px;
    zoom: var(--mock-zoom, 0.58);
  }
}