:root {
  color-scheme: light;
  --bg: #F6F7FB;
  --paper: #FFFFFF;
  --ink: #1D1F29;
  --muted: #667085;
  --line: #E6E8F0;
  --blue: #16B364;
  --blue-2: #E9F9F0;
  --teal: #2C96D1;
  --green: #16B364;
  --brass: #FF7A1A;
  --brass-2: #FFF4E6;
  --navy: #1D1F29;
  --primary-hover: #0E8F50;
  --primary-border: #BDEDD3;
  --working: #FDAB3D;
  --stuck: #E2445C;
  --manual: #FFC928;
  --waiting: #C4C4C4;
  --shadow: 0 18px 48px rgba(13, 19, 41, .12);
  font-family: "Segoe UI Semibold", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Sector solution landing pages */
.solution-page { --solution-accent:#238f70; --solution-soft:#edf8f4; background:#fbfcfe; color:#18212f; }
.solution-page main { display:block; }
.solution-page .nav,.solution-page .footer { max-width:1240px; margin-inline:auto; }
.solution-hero,.solution-section,.solution-cta { max-width:1180px; margin-inline:auto; }
.solution-hero { display:grid; grid-template-columns:minmax(0,.92fr) minmax(380px,1.08fr); align-items:stretch; gap:44px; padding:64px 28px 54px; }
.solution-copy { align-self:start; padding-top:12px; }
.solution-kicker { margin:0 0 18px; color:var(--solution-accent); font-size:13px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.solution-hero h1 { margin:0; font-size:clamp(44px,5.8vw,72px); line-height:.99; letter-spacing:-.052em; }
.solution-hero h1 em { color:var(--solution-accent); font-style:normal; }
.solution-lead { margin:24px 0 0; color:#5e6878; font-size:18px; line-height:1.75; }
.solution-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.solution-page .btn { background:var(--solution-accent); }
.solution-page .btn.secondary { border-color:#dce3e9; background:#fff; color:#18212f; }
.solution-photo { margin:0; min-height:480px; overflow:hidden; border-radius:28px; box-shadow:0 28px 70px rgba(24,33,47,.14); }
.solution-photo img { width:100%; height:100%; min-height:480px; object-fit:cover; }
.solution-section { padding:58px 28px; }
.solution-section-head { max-width:740px; margin-bottom:28px; }
.solution-section h2,.solution-cta h2 { margin:6px 0 12px; font-size:clamp(32px,4vw,48px); line-height:1.08; letter-spacing:-.04em; }
.solution-section-head>p:last-child,.solution-card p,.solution-safety p,.solution-cta p { color:#667085; line-height:1.7; }
.solution-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.solution-card { padding:26px; border:1px solid #e1e6ec; border-radius:20px; background:#fff; box-shadow:0 18px 48px rgba(24,33,47,.06); }
.solution-card span { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--solution-soft); color:var(--solution-accent); font-weight:850; }
.solution-card h3 { margin:18px 0 8px; font-size:21px; }
.solution-card p { margin:0; }
.solution-proof { background:linear-gradient(135deg,var(--solution-soft),#fff); }
.solution-safety { max-width:1124px; margin:18px auto 58px; padding:28px; border:1px solid #dce8e3; border-radius:20px; background:#fff; }
.solution-safety h2 { margin:0 0 8px; font-size:23px; }
.solution-safety p { margin:0; }
.solution-cta { display:flex; align-items:center; justify-content:space-between; gap:32px; margin-bottom:34px; padding:42px; border:1px solid #dce8e3; border-radius:26px; background:var(--solution-soft); }
.solution-cta>div:first-child { max-width:700px; }
.solution-cta p { margin:0; }
@media (max-width:820px) {
  .solution-hero { grid-template-columns:1fr; padding-top:42px; }
  .solution-photo,.solution-photo img { min-height:340px; }
  .solution-grid { grid-template-columns:1fr; }
  .solution-cta { align-items:flex-start; flex-direction:column; margin-inline:18px; }
}
@media (max-width:560px) {
  .solution-hero,.solution-section { padding-left:18px; padding-right:18px; }
  .solution-hero h1 { font-size:clamp(40px,13vw,56px); }
  .solution-photo { border-radius:20px; }
  .solution-safety { margin-inline:18px; }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  overflow-x: hidden;
}

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

.shell {
  min-height: 100vh;
}

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px clamp(20px, 5vw, 72px);
  border-bottom: 1px solid rgba(217, 216, 210, .84);
  background: rgba(244, 244, 241, .9);
  backdrop-filter: blur(14px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 750;
  letter-spacing: 0;
  color: #272c2f;
}

.brand-mark {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--navy);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 22px rgba(47, 52, 55, .16);
}

.brand-mark span {
  width: 13px;
  height: 16px;
  border-right: 3px solid #FFFFFF;
  border-bottom: 3px solid #FFFFFF;
  transform: rotate(42deg) translate(-1px, -1px);
  border-radius: 1px;
}

.brand-mark::after {
  content: "";
  position: absolute;
  right: 7px;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--brass);
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  color: var(--muted);
  font-size: 13px;
}

.mobile-menu-button {
  display: none;
}

.language-picker {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
}

.language-picker button {
  min-width: 34px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.language-picker button.active {
  background: var(--blue-2);
  color: var(--blue);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid var(--blue);
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
  white-space: normal;
}

.btn.secondary {
  border-color: var(--line);
  background: var(--paper);
  color: var(--ink);
}

.btn.secondary.light {
  border-color: rgba(255, 255, 255, .32);
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr);
  gap: clamp(28px, 6vw, 72px);
  align-items: center;
  padding: clamp(42px, 7vw, 82px) clamp(20px, 5vw, 72px) 34px;
}

.builder-hero,
.docs-page {
  padding: clamp(42px, 7vw, 82px) clamp(20px, 5vw, 72px) 34px;
}

.builder-hero {
  max-width: 940px;
}

.builder-hero h1,
.docs-page h1 {
  max-width: 860px;
}

.builder-hero p,
.docs-page > p {
  max-width: 720px;
  color: var(--muted);
  font-size: 16px;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--blue);
  font-weight: 750;
  font-size: 12px;
  text-transform: uppercase;
}

h1 {
  max-width: 680px;
  margin: 0;
  color: #303538;
  font-size: clamp(34px, 4.8vw, 58px);
  line-height: 1.03;
  letter-spacing: 0;
}

.hero p {
  max-width: 640px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 16px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
  max-width: 560px;
}

.stat {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.stat b,
.metric b {
  display: block;
  color: #303538;
  font-size: 18px;
}

.stat span,
.metric span {
  color: var(--muted);
  font-size: 12px;
}

.product-shot {
  overflow: hidden;
  border: 1px solid #D8E1F2;
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 18px 44px rgba(29, 31, 41, .10);
}

.shot-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  border-bottom: 1px solid #DCE3F0;
  background: #FFFFFF;
}

.shot-top b {
  font-size: 14px;
}

.task-preview-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid #DCE3F0;
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
}

.task-preview-toolbar button {
  border: 0;
  border-radius: 6px;
  background: #04AAFF;
  color: #FFFFFF;
  cursor: default;
  font: inherit;
  font-weight: 750;
  padding: 8px 13px;
  box-shadow: 0 8px 18px rgba(4, 170, 255, .18);
  white-space: nowrap;
}

.task-preview-toolbar span {
  white-space: nowrap;
}

.task-preview {
  display: grid;
  gap: 18px;
  min-height: 0;
  padding: 18px 20px;
  background: #F6F7FB;
  overflow: hidden;
}

.task-group-preview {
  min-width: 0;
}

.task-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #303538;
}

.task-group-head b {
  color: #2C96D1;
  font-size: 17px;
}

.task-group-head small {
  color: var(--muted);
  font-size: 11px;
}

.phase-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--teal);
}

.phase-dot.green {
  background: var(--green);
}

.task-grid-preview {
  display: grid;
  grid-template-columns: 38px minmax(210px, 2.2fr) minmax(130px, 1.25fr) minmax(100px, 1fr) minmax(120px, 1.15fr) 116px minmax(92px, .9fr);
  overflow: hidden;
  border-left: 6px solid #2C96D1;
  border-radius: 6px;
  background: #FFFFFF;
  box-shadow: 0 8px 22px rgba(31, 41, 55, .07);
}

.task-grid-preview > div {
  min-height: 46px;
  padding: 0 10px;
  border-right: 1px solid #CFD8EA;
  border-bottom: 1px solid #CFD8EA;
  color: var(--ink);
  font-size: 12px;
  overflow: hidden;
}

.task-grid-preview > div:nth-child(7n) {
  border-right: 0;
}

.task-grid-head {
  min-height: 36px !important;
  padding-block: 9px !important;
  background: #FFFFFF;
  color: #4B5565 !important;
  font-weight: 750;
  text-align: center;
}

.select-cell,
.title-cell,
.customer-cell,
.owner-cell,
.resource-cell,
.status-cell,
.date-cell {
  display: flex;
  align-items: center;
}

.select-cell {
  justify-content: center;
}

.title-cell {
  gap: 6px;
  padding: 0 !important;
  position: relative;
}

.title-editor {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 45px;
  padding: 0 12px 0 34px;
  border-left: 4px solid #2C96D1;
  background: #FFFFFF;
  color: #1D1F29;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
}

.detail-cue {
  position: absolute;
  left: 9px;
  z-index: 1;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid #C8D2E5;
  border-radius: 5px;
  background: #FFFFFF;
  color: #64748B;
  font-size: 15px;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(29, 31, 41, .08);
}

.customer-cell,
.date-cell {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
}

.owner-cell,
.resource-cell {
  gap: 7px;
  justify-content: center;
  position: relative;
}

.resource-cell {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  text-align: center;
  padding-right: 20px !important;
}

.resource-cell > span:first-child {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell-caret {
  color: #334155;
  font-size: 11px;
}

.owner-cell .cell-caret,
.resource-cell .cell-caret {
  position: absolute;
  right: 8px;
}

.status-cell {
  padding: 0 !important;
}

.task-grid-preview b,
.task-summary-row b {
  display: block;
  color: #303538;
  font-size: 12px;
  line-height: 1.25;
}

.task-grid-preview small,
.task-summary-row small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.task-grid-preview input {
  width: 15px;
  height: 15px;
  accent-color: var(--blue);
}

.avatar {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 999px;
  background: var(--teal);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 800;
}

.avatar.purple {
  background: var(--brass);
}

.avatar.green {
  background: var(--green);
}

.status,
.source-pill {
  display: grid;
  min-height: 100%;
  width: 100%;
  place-items: center;
  border-radius: 0;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  white-space: normal;
}

.status-new {
  background: var(--teal);
}

.status-working {
  background: var(--working);
}

.status-done {
  background: var(--green);
}

.source-pill {
  border-radius: 999px;
  background: rgba(87, 155, 252, .14);
  color: #2768C2;
}

.source-pill.teal {
  background: rgba(78, 204, 198, .16);
  color: #12807B;
}

.source-pill.gray {
  background: #F0F2F5;
  color: #667085;
}

.task-summary-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 210px;
  gap: 12px;
  align-items: center;
  min-width: 820px;
  padding: 13px 16px;
  border-left: 6px solid var(--green);
  border-radius: 6px;
  background: #FFFFFF;
  box-shadow: 0 10px 26px rgba(31, 41, 55, .08);
}

.task-summary-row span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border-radius: 999px;
  background: rgba(0, 200, 117, .12);
  color: #087E4E;
  font-size: 12px;
  font-weight: 800;
}

.preview-side-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.preview-side-grid article {
  padding: 14px;
  border: 1px solid #D8E1F2;
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 8px 20px rgba(31, 41, 55, .05);
}

.preview-side-grid b {
  display: block;
  margin-top: 10px;
  color: #303538;
  font-size: 13px;
}

.preview-side-grid p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.tag-row {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.tag {
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--blue-2);
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
}

.tag.green {
  background: var(--brass-2);
  color: #80672f;
}

.chat-panel {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}

.chat-head {
  padding: 13px;
  border-bottom: 1px solid #e8e6df;
}

.chat-thread {
  padding: 14px;
}

.message {
  max-width: 88%;
  margin-bottom: 12px;
  padding: 11px;
  border: 1px solid #E4E7EC;
  border-radius: 8px;
  background: var(--paper);
}

.message.ai {
  margin-left: auto;
  border-color: #b8d6d1;
  background: var(--blue-2);
}

.calendar-strip {
  margin-top: 12px;
  padding: 11px;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
}

.calendar-strip small {
  display: block;
  color: #d8d5cb;
}

.section {
  padding: 42px clamp(20px, 5vw, 72px);
}

.section-head {
  max-width: 760px;
  margin-bottom: 22px;
}

.section h2 {
  margin: 0;
  color: #303538;
  font-size: 28px;
  line-height: 1.14;
}

.section-head p {
  margin: 10px 0 0;
  color: var(--muted);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.sector-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sector-grid span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--primary-border);
  border-radius: 999px;
  background: var(--paper);
  color: #303538;
  font-size: 13px;
  font-weight: 750;
  box-shadow: 0 10px 28px rgba(13, 19, 41, .06);
}

.feature {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  border-radius: 8px;
  background: var(--brass-2);
  color: #80672f;
  font-weight: 800;
}

.feature h3 {
  margin: 0;
  color: #303538;
  font-size: 16px;
}

.feature p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.extension-section {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(247, 248, 252, 0)),
    radial-gradient(circle at 18% 14%, rgba(34, 211, 238, .16), transparent 32%),
    radial-gradient(circle at 84% 22%, rgba(236, 72, 153, .12), transparent 30%);
}

.extension-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.extension-card {
  min-height: 260px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 14px 36px rgba(13, 19, 41, .08);
}

.extension-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--blue-2);
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
}

.extension-card h3 {
  margin: 16px 0 0;
  color: #303538;
  font-size: 20px;
  line-height: 1.2;
}

.extension-card p {
  margin: 10px 0 0;
  color: var(--muted);
}

.extension-card ul {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.extension-card li {
  position: relative;
  padding-left: 20px;
  color: var(--ink);
  font-size: 13px;
}

.extension-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, .14);
}

.code-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.code-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 12px 32px rgba(13, 19, 41, .08);
}

.code-card h3,
.docs-page h2 {
  margin: 0 0 10px;
  color: #303538;
}

.code-card pre,
.prompt-box,
.docs-page pre {
  overflow: auto;
  margin: 12px 0 0;
  padding: 14px;
  border-radius: 10px;
  background: var(--navy);
  color: #EEF2FF;
  white-space: pre-wrap;
}

.prompt-box {
  max-width: 980px;
}

.recipe-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.recipe-list a {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--blue);
  font-weight: 750;
}

.docs-page {
  max-width: 1040px;
}

.docs-page h1 {
  margin-bottom: 14px;
  font-size: clamp(30px, 4vw, 48px);
}

.docs-page h2 {
  margin-top: 28px;
  font-size: 22px;
}

.docs-page ol,
.plain-list {
  display: grid;
  gap: 9px;
  max-width: 760px;
  color: var(--muted);
}

.workflow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.step {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.step span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-bottom: 12px;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 24px clamp(20px, 5vw, 72px) 54px;
  padding: 24px;
  border-radius: 12px;
  background: #5746E8;
  color: #fff;
}

.cta-band p {
  margin: 6px 0 0;
  color: #d8d5cb;
}

.onboarding {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
  gap: 28px;
  align-items: start;
  padding: 42px clamp(20px, 5vw, 72px);
}

.login-page {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(380px, .7fr);
  gap: 28px;
  align-items: start;
  padding: 42px clamp(20px, 5vw, 72px);
}

.contact-hero {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(360px, .72fr);
  gap: clamp(24px, 5vw, 58px);
  align-items: start;
  padding: clamp(42px, 7vw, 82px) clamp(20px, 5vw, 72px) 54px;
}

.contact-hero > div > p:not(.eyebrow) {
  max-width: 680px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 16px;
}

.contact-points {
  display: grid;
  gap: 12px;
  max-width: 660px;
  margin-top: 26px;
}

.contact-points div {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}

.contact-points b,
.contact-card-head h2 {
  display: block;
  color: #303538;
}

.contact-points span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.contact-form-slot {
  min-width: 0;
  width: 100%;
}

.redirect-page {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 18%, rgba(34, 211, 238, .18), transparent 34%),
    radial-gradient(circle at 82% 8%, rgba(236, 72, 153, .14), transparent 32%),
    var(--bg);
}

.redirect-card {
  width: min(520px, 100%);
}

.redirect-card h1 {
  margin-top: 12px;
  font-size: 34px;
}

.redirect-card p:not(.eyebrow) {
  color: var(--muted);
}

.panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.panel.pad {
  padding: 22px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Registration is intentionally simple and spacious for non-technical users. */
.onboarding .panel.pad {
  padding: clamp(24px, 4vw, 36px);
}

.onboarding .form-grid {
  grid-template-columns: 1fr;
  gap: 20px;
}

.onboarding .form-grid label {
  gap: 9px;
  font-size: 14px;
}

.onboarding .form-grid input,
.onboarding .form-grid select,
.onboarding .form-grid textarea {
  min-height: 54px;
  padding: 14px 15px;
  border-radius: 10px;
  font-size: 16px;
}

label {
  display: grid;
  gap: 6px;
  color: #4b504f;
  font-size: 12px;
  font-weight: 700;
}

label.full {
  grid-column: 1 / -1;
}

input,
select,
textarea {
  min-width: 0;
  width: 100%;
  min-height: 40px;
  border: 1px solid #E4E7EC;
  border-radius: 8px;
  padding: 9px 10px;
  color: var(--ink);
  background: #fffefa;
  font: inherit;
  font-size: 13px;
}

.password-rule {
  color: var(--muted);
  font-size: 12px;
}

.password-rule.invalid {
  color: #b42318;
}

.password-rule.valid {
  color: var(--green);
}

textarea {
  min-height: 92px;
  resize: vertical;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.is-hidden {
  display: none !important;
}

.wizard-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}

.wizard-steps span {
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.wizard-steps span.active {
  border-color: #b8d6d1;
  background: var(--blue-2);
  color: var(--blue);
}

.wizard-steps span.complete {
  border-color: #ded2b4;
  background: var(--brass-2);
  color: #80672f;
}

.wizard-panel {
  min-height: 280px;
}

.wizard-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.wizard-final[hidden] {
  display: none;
}

.success-note {
  margin: 14px 0 0;
  color: var(--green);
  font-weight: 700;
}

.result {
  display: none;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #ded2b4;
  border-radius: 8px;
  background: var(--brass-2);
}

.result.show {
  display: block;
}

.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0;
}

.confirm-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.confirm-form.is-complete {
  display: none;
}

.form-actions.split {
  justify-content: space-between;
}

code,
pre {
  font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
}

pre {
  overflow: auto;
  max-width: 100%;
  margin: 10px 0 0;
  padding: 12px;
  border-radius: 8px;
  background: var(--navy);
  color: #f4f1e9;
}

.checklist {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--muted);
}

.check b {
  color: #303538;
}

.footer {
  padding: 28px clamp(20px, 5vw, 72px);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 980px) {
  .hero,
  .onboarding,
  .login-page,
  .contact-hero {
    grid-template-columns: 1fr;
  }

  .feature-grid,
  .extension-grid,
  .workflow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .shell {
    min-width: 0;
  }

  .nav {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px 12px;
    padding: 12px 16px;
  }

  .mobile-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
  }

  .mobile-menu-button > span { display: grid; gap: 3px; width: 14px; }
  .mobile-menu-button i { display: block; width: 14px; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform .18s ease, opacity .18s ease; }
  .mobile-menu-button[aria-expanded="true"] i:first-child { transform: translateY(4.5px) rotate(45deg); }
  .mobile-menu-button[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
  .mobile-menu-button[aria-expanded="true"] i:last-child { transform: translateY(-4.5px) rotate(-45deg); }

  .nav-links {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: space-between;
    gap: 10px;
    overflow: visible;
    padding: 0;
  }

  .nav-links > a {
    flex: 0 0 auto;
  }

  .nav-links > a:not(.btn) { display: none; }
  .nav-links .language-picker { order: 1; }
  .nav-links .btn { order: 2; min-height: 36px; padding-inline: 14px; }
  .mobile-menu-open .nav-links { flex-wrap: wrap; }
  .mobile-menu-open .nav-links > a:not(.btn) { display: block; order: 3; width: 100%; padding: 10px 4px; border-top: 1px solid var(--line); }

  .hero,
  .builder-hero,
  .docs-page,
  .section,
  .onboarding,
  .login-page,
  .contact-hero {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero,
  .onboarding,
  .login-page,
  .contact-hero {
    gap: 18px;
  }

  h1 {
    font-size: 30px;
    line-height: 1.1;
  }

  .hero p,
  .builder-hero p,
  .docs-page > p {
    font-size: 14px;
  }

  .hero-actions,
  .result-actions,
  .form-actions,
  .wizard-actions {
    width: 100%;
  }

  .hero-actions .btn,
  .result-actions .btn,
  .form-actions .btn,
  .wizard-actions .btn,
  .redirect-card .btn {
    width: 100%;
  }

  .hero-stats,
  .feature-grid,
  .extension-grid,
  .workflow,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .cta-band {
    align-items: flex-start;
    flex-direction: column;
    margin-left: 16px;
    margin-right: 16px;
    padding: 18px;
  }

  .panel.pad {
    padding: 16px;
  }

  .wizard-steps {
    grid-template-columns: 1fr;
  }

  .wizard-panel {
    min-height: 0;
  }

  .redirect-page {
    align-items: start;
    padding: 14px;
  }

  .redirect-card h1 {
    font-size: 26px;
    line-height: 1.16;
  }

  .code-card,
  .prompt-box,
  .docs-page pre {
    overflow-wrap: anywhere;
  }
}

/* Simple Vola style: calm, ChatGPT-inspired product surfaces. */
:root {
  --bg: #F7F7F5;
  --paper: #FFFFFF;
  --ink: #2F2F2F;
  --muted: #6E6E6E;
  --line: #E5E5E5;
  --blue: #16B364;
  --blue-2: #F2F2F0;
  --teal: #6B6B6B;
  --green: #16A34A;
  --brass: #8E8E8A;
  --brass-2: #F7F7F5;
  --navy: #2F2F2F;
  --shadow: none;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
}

.nav {
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom-color: var(--line);
  background: rgba(247, 247, 245, .94);
}

.brand,
h1,
.section h2,
.feature h3,
.extension-card h3,
.contact-points b,
.stat b,
.metric b,
.mini-card strong,
.message strong {
  color: var(--ink);
}

.brand-mark {
  border-radius: 8px;
  background: #16B364;
  box-shadow: none;
}

.brand-mark::after {
  background: #F7F7F5;
}

.nav-links,
.hero p,
.section-head p,
.feature p,
.extension-card p,
.contact-hero > div > p:not(.eyebrow),
.contact-points span,
.footer {
  color: var(--muted);
}

.eyebrow {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
}

h1 {
  max-width: 760px;
  font-size: clamp(36px, 4.6vw, 56px);
  font-weight: 500;
  line-height: 1.08;
}

.btn {
  min-height: 38px;
  border-color: #2F2F2F;
  border-radius: 999px;
  background: #2F2F2F;
  box-shadow: none;
  font-weight: 500;
}

.btn.secondary,
.btn.secondary.light {
  border-color: var(--line);
  background: var(--paper);
  color: var(--ink);
}

.hero {
  align-items: start;
}

.product-shot,
.feature,
.extension-card,
.code-card,
.step,
.panel,
.stat,
.contact-points div,
.task-grid-preview,
.task-summary-row,
.recipe-list a {
  border-color: var(--line);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: none;
}

.task-preview {
  background: #F7F7F5;
}

.extension-section {
  background: transparent;
}

.extension-badge,
.tag,
.icon,
.tag.green {
  background: #F2F2F0;
  color: #2F2F2F;
  font-weight: 500;
}

.step span {
  background: #2F2F2F;
}

.cta-band {
  border: 1px solid var(--line);
  background: #16B364;
  box-shadow: none;
}

.nav-links .btn {
  border-color: #16B364;
  background: #16B364;
}

input,
select,
textarea {
  border-color: var(--line);
  background: #FFFFFF;
}

pre,
.code-card pre,
.prompt-box,
.docs-page pre {
  background: #2F2F2F;
}

.brand,
.nav-links,
.stat b,
.metric b,
.shot-top b,
.task-group-head b,
.feature h3,
.extension-card h3,
.step h3,
.contact-points b,
.code-card h3,
.docs-page h2,
label,
.wizard-steps span,
.check b {
  font-weight: 500;
}

.section h2 {
  font-size: 26px;
  font-weight: 500;
}

.feature h3,
.extension-card h3 {
  font-size: 16px;
}

.hero p,
.section-head p,
.contact-hero > div > p:not(.eyebrow),
.builder-hero p,
.docs-page > p {
  font-size: 15px;
}

@media (max-width: 680px) {
  h1 {
    font-size: 32px;
  }
}

/* Vola Work OS palette: Vola primary with monday-style status color use. */
:root {
  --bg: #F6F7FB;
  --paper: #FFFFFF;
  --ink: #1F2937;
  --muted: #667085;
  --line: #E6E8F0;
  --blue: #16B364;
  --blue-2: #E9F9F0;
  --teal: #579BFC;
  --green: #00C875;
  --brass: #A25DDC;
  --brass-2: #E9F9F0;
  --navy: #1F2937;
  --primary-hover: #0E8F50;
  --primary-border: #BDEDD3;
  --working: #FDAB3D;
  --stuck: #E2445C;
  --manual: #4ECCC6;
  --waiting: #C4C4C4;
  --shadow: 0 14px 34px rgba(31, 41, 55, .08);
}

body,
.shell {
  background: var(--bg);
  color: var(--ink);
}

.nav {
  border-bottom-color: var(--line);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
}

.brand,
.brand > span,
.nav-links a:hover {
  color: var(--blue);
}

.brand-mark {
  background: var(--blue);
  color: #FFFFFF;
}

.brand-mark::after {
  background: #FFFFFF;
}

.btn,
.nav-links .btn {
  border-color: var(--blue);
  background: var(--blue);
  color: #FFFFFF;
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease, border-color .14s ease;
}

.btn:hover,
.nav-links .btn:hover {
  border-color: var(--primary-hover);
  background: var(--primary-hover);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(255, 88, 88, .16);
}

.btn:active {
  transform: translateY(1px) scale(.99);
}

/* VolaCRM growth palette and logo refresh. */
:root {
  --blue: #16B364;
  --blue-2: #E9F9F0;
  --teal: #2C96D1;
  --green: #16B364;
  --brass: #FF7A1A;
  --brass-2: #FFF4E6;
  --navy: #1D1F29;
  --ink: #1D1F29;
  --primary-hover: #0E8F50;
  --primary-border: #BDEDD3;
  --manual: #FFC928;
}

.brand,
.brand > span {
  color: #1D1F29;
}

.brand-mark {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 10px;
  background: #1D1F29;
  color: #16B364;
  box-shadow: 0 12px 26px rgba(29, 31, 41, .16);
}

.brand-mark span {
  width: auto;
  height: auto;
  border: 0;
  transform: none;
}

.brand-mark span::before {
  content: "V";
  color: #16B364;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}

.brand-mark::before {
  content: "";
  position: absolute;
  left: 7px;
  bottom: 6px;
  width: 20px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #16B364, #2C96D1);
  z-index: -1;
}

.brand-mark::after {
  right: 6px;
  top: 6px;
  width: 6px;
  height: 6px;
  background: #2C96D1;
  box-shadow: -8px 18px 0 #FF7A1A, 7px 19px 0 #FFC928;
}

.btn.secondary,
.btn.secondary.light {
  border-color: var(--line);
  background: var(--paper);
  color: var(--ink);
}

.btn.secondary:hover,
.btn.secondary.light:hover {
  border-color: var(--primary-border);
  background: var(--blue-2);
  color: var(--blue);
}

.product-shot,
.feature,
.extension-card,
.code-card,
.step,
.panel,
.stat,
.contact-points div,
.task-grid-preview,
.task-summary-row,
.recipe-list a {
  border-color: var(--line);
  background: var(--paper);
  box-shadow: none;
}

.product-shot:hover,
.feature:hover,
.extension-card:hover,
.task-grid-preview:hover,
.task-summary-row:hover,
.recipe-list a:hover {
  border-color: var(--primary-border);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.task-preview {
  background: var(--bg);
}

.eyebrow,
.icon {
  color: var(--blue);
}

.icon {
  background: var(--blue-2);
}

.tag,
.extension-badge {
  background: var(--blue-2);
  color: var(--blue);
}

.tag.green {
  background: rgba(0, 200, 117, .12);
  color: #087A4A;
}

.step:nth-child(1) span {
  background: var(--teal);
}

.step:nth-child(2) span {
  background: var(--working);
}

.step:nth-child(3) span {
  background: var(--manual);
}

.step:nth-child(4) span {
  background: var(--green);
}

.calendar-strip {
  background: var(--brass);
}

.message {
  border-color: var(--line);
}

.message.user {
  background: var(--blue);
}

.cta-band {
  border-color: transparent;
  background: var(--blue);
  color: #FFFFFF;
}

/* Final VolaCRM brand palette guard. */
:root {
  --blue: #16B364;
  --blue-2: #E9F9F0;
  --teal: #2C96D1;
  --green: #16B364;
  --brass: #FF7A1A;
  --brass-2: #FFF4E6;
  --navy: #1D1F29;
  --ink: #1D1F29;
  --primary-hover: #0E8F50;
  --primary-border: #BDEDD3;
  --manual: #FFC928;
}

.brand,
.brand > span {
  color: #1D1F29 !important;
}

.brand-mark {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M18 24 30 44 47 17' fill='none' stroke='%2316B364' stroke-width='9' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M39 16h9' stroke='%23FF7A1A' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M37 24h8' stroke='%23F04438' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 78% 78% !important;
  box-shadow: inset 0 0 0 1px #D8DEE8, 0 10px 22px rgba(16, 24, 40, .08) !important;
}

.brand-mark span {
  display: none !important;
}

.brand-mark::before,
.brand-mark::after {
  content: none !important;
}

/* Product-page preview is a fixed illustration, not an interactive scroller. */
.product-shot {
  overflow: hidden !important;
}

.product-shot .task-preview-toolbar {
  overflow: hidden !important;
}

.product-shot .task-preview {
  box-sizing: border-box;
  max-height: 405px;
  min-height: 0 !important;
  gap: 14px;
  overflow: hidden !important;
  padding: 16px 18px 18px;
}

.product-shot .task-group-preview,
.product-shot .preview-side-grid {
  min-width: 0 !important;
  width: 100%;
}

.product-shot .task-grid-preview {
  grid-template-columns: 36px minmax(190px, 1.8fr) minmax(122px, 1fr) minmax(92px, .8fr) minmax(112px, .95fr) 108px minmax(82px, .7fr);
}

.product-shot .task-grid-preview > div {
  min-height: 40px;
  padding-inline: 8px;
  font-size: 11px;
}

.product-shot .task-grid-head {
  min-height: 32px !important;
  padding-block: 7px !important;
}

.product-shot .title-cell {
  gap: 6px;
}

.product-shot .detail-cue {
  width: 17px;
  height: 17px;
  font-size: 13px;
}

.product-shot .avatar {
  width: 24px;
  height: 24px;
}

.product-shot .preview-side-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.product-shot .preview-side-grid article {
  display: grid;
  align-content: start;
  min-height: 112px;
  padding: 12px 14px;
}

.product-shot .preview-side-grid b {
  margin-top: 9px;
}

.product-shot .source-pill {
  min-height: 30px;
  width: 100%;
  align-self: start;
}

/* Agency-first product site */
.agency-site {
  background: #fff;
}

.agency-site .shell {
  overflow: hidden;
}

.agency-site main > section,
.agency-site .agency-footer {
  width: min(100%, 1380px);
  margin-inline: auto;
}

.agency-nav {
  width: min(100%, 1380px);
  margin-inline: auto;
  padding-block: 12px;
  background: rgba(255, 255, 255, .94);
}

.agency-nav .nav-links a:not(.btn):hover {
  color: var(--blue);
}

.agency-hero {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(600px, 1.18fr);
  gap: clamp(34px, 5vw, 74px);
  align-items: center;
  max-width: 1380px;
  min-height: 680px;
  margin: 0 auto;
  padding: clamp(64px, 8vw, 112px) clamp(24px, 5vw, 78px) 72px;
}

.agency-hero-copy h1 {
  max-width: 620px;
  color: #20242e;
  font-size: clamp(42px, 5.2vw, 68px);
  line-height: 1.02;
}

.agency-lead {
  max-width: 610px;
  margin: 22px 0 0;
  color: #596174;
  font-size: 18px;
  line-height: 1.65;
}

.agency-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin-top: 32px;
  color: #71798a;
  font-size: 12px;
}

.agency-proof span {
  position: relative;
  padding-left: 17px;
}

.agency-proof span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
}

.agency-proof b {
  color: #343947;
}

.agency-console {
  min-width: 0;
  border: 1px solid #dde2eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(28, 36, 52, .14);
  transform: perspective(1300px) rotateY(-2deg);
  transform-origin: center left;
}

.console-topbar {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid #e5e8ef;
  color: #252a36;
  font-size: 12px;
}

.console-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 15px 0 0 #ffc928, 30px 0 0 #ff7a1a;
  margin-right: 30px;
}

.console-sync {
  margin-left: auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: #e9f9f0;
  color: #087f48;
  font-size: 10px;
  font-weight: 700;
}

.console-body {
  display: grid;
  grid-template-columns: 154px minmax(330px, 1fr) 210px;
  min-height: 430px;
}

.client-rail {
  padding: 15px 10px;
  border-right: 1px solid #e5e8ef;
  background: #f6f7fb;
}

.rail-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 5px 11px;
  color: #6d7587;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.rail-heading button {
  width: 24px;
  height: 24px;
  border: 1px solid #d9dee8;
  border-radius: 6px;
  background: #fff;
  color: #596174;
}

.client-site {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 54px;
  margin-bottom: 5px;
  padding: 7px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #343947;
  text-align: left;
}

.client-site.active {
  background: #e3f1ff;
  box-shadow: inset 3px 0 #2c96d1;
}

.client-site b,
.client-site small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-site b {
  font-size: 10px;
}

.client-site small {
  margin-top: 2px;
  color: #858c9b;
  font-size: 8px;
}

.site-avatar,
.contact-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #dff7e9;
  color: #087f48;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.site-avatar.orange,
.contact-avatar.peach {
  background: #fff0e3;
  color: #c94f00;
}

.site-avatar.blue,
.contact-avatar.mint {
  background: #e3f1ff;
  color: #216c9d;
}

.inquiry-panel {
  min-width: 0;
  padding: 17px 15px;
}

.inquiry-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.inquiry-heading small {
  color: #7a8292;
  font-size: 9px;
}

.inquiry-heading h2 {
  margin: 2px 0 0;
  font-size: 19px;
}

.inquiry-heading button,
.followup-action {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #159857;
  border-radius: 6px;
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
}

.inquiry-filters {
  display: flex;
  gap: 18px;
  margin-top: 16px;
  border-bottom: 1px solid #e5e8ef;
  color: #7a8292;
  font-size: 9px;
}

.inquiry-filters span {
  padding: 0 1px 9px;
}

.inquiry-filters .active {
  border-bottom: 2px solid #2c96d1;
  color: #252a36;
}

.inquiry-list {
  margin-top: 8px;
}

.inquiry-row {
  display: grid;
  grid-template-columns: 32px minmax(130px, 1fr) 44px 52px 72px;
  gap: 8px;
  align-items: center;
  min-height: 68px;
  padding: 8px 7px;
  border-bottom: 1px solid #edf0f5;
  border-radius: 6px;
}

.inquiry-row.selected {
  background: #f3f8fe;
  box-shadow: inset 3px 0 #2c96d1;
}

.inquiry-copy,
.inquiry-copy b,
.inquiry-copy small,
.owner-stack,
.owner-stack small {
  display: block;
  min-width: 0;
}

.inquiry-copy b {
  color: #303542;
  font-size: 10px;
}

.inquiry-copy small {
  overflow: hidden;
  margin-top: 4px;
  color: #7a8292;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-tag,
.inquiry-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  border-radius: 5px;
  font-size: 8px;
  font-weight: 700;
}

.channel-tag {
  background: #f0f2f6;
  color: #656d7e;
}

.owner-stack {
  text-align: center;
}

.owner-stack i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: 0 auto;
  border-radius: 50%;
  background: #743fc7;
  color: #fff;
  font-size: 7px;
  font-style: normal;
}

.owner-stack i.blue { background: #2c96d1; }
.owner-stack i.green { background: #16b364; }

.owner-stack small {
  margin-top: 2px;
  color: #858c9b;
  font-size: 7px;
}

.inquiry-status.new {
  background: #e3f1ff;
  color: #216c9d;
}

.inquiry-status.progress {
  background: #fff0e3;
  color: #b74b04;
}

.inquiry-status.scheduled {
  background: #dff7e9;
  color: #087f48;
}

.followup-panel {
  padding: 18px 15px;
  border-left: 1px solid #e5e8ef;
  background: #fbfcfe;
}

.followup-head {
  display: flex;
  gap: 9px;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid #e7eaf0;
}

.followup-head b,
.followup-head small {
  display: block;
}

.followup-head b { font-size: 11px; }
.followup-head small { color: #7a8292; font-size: 8px; }

.conversation-note {
  margin-top: 16px;
  padding: 11px;
  border: 1px solid #dfe5ef;
  border-radius: 7px;
  background: #fff;
}

.conversation-note small {
  color: #2c96d1;
  font-size: 8px;
  font-weight: 700;
}

.conversation-note p {
  margin: 6px 0 0;
  color: #4d5567;
  font-size: 9px;
  line-height: 1.55;
}

.followup-fields {
  display: grid;
  gap: 0;
  margin-top: 14px;
  border-top: 1px solid #e7eaf0;
}

.followup-fields label {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid #e7eaf0;
  color: #7a8292;
  font-size: 8px;
}

.followup-fields b {
  color: #343947;
  text-align: right;
}

.followup-action {
  width: 100%;
  margin-top: 16px;
}

.agency-section {
  width: 100%;
  max-width: 1380px;
  margin-inline: auto;
  padding: 84px clamp(24px, 6vw, 96px);
}

.compact-section {
  background: #f6f7fb;
}

.section-head.centered {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.agency-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  max-width: 1180px;
  margin: 36px auto 0;
  border-block: 1px solid #dfe3eb;
}

.agency-steps article {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  padding: 28px 32px;
  border-right: 1px solid #dfe3eb;
}

.agency-steps article:last-child { border-right: 0; }

.agency-steps span,
.capability-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #e9f9f0;
  color: #087f48;
  font-size: 11px;
  font-weight: 800;
}

.agency-steps h3,
.capability-grid h3 {
  margin: 0;
  font-size: 17px;
}

.agency-steps p,
.capability-grid p,
.audience-grid p {
  margin: 8px 0 0;
  color: #667085;
  font-size: 13px;
}

.capability-band {
  max-width: 1380px;
  margin: 0 auto;
}

.capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 34px;
  border: 1px solid #dfe3eb;
  border-radius: 10px;
  overflow: hidden;
}

.capability-grid article {
  min-height: 300px;
  padding: 30px;
  border-right: 1px solid #dfe3eb;
}

.capability-grid article:last-child { border-right: 0; }
.capability-icon { margin-bottom: 24px; }
.capability-icon.blue { background: #e3f1ff; color: #216c9d; }
.capability-icon.orange { background: #fff0e3; color: #b74b04; }

.capability-grid ul {
  display: grid;
  gap: 9px;
  margin: 22px 0 0;
  padding: 0;
  color: #424959;
  font-size: 12px;
  list-style: none;
}

.capability-grid li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--blue);
}

.audience-section {
  background: #f6f7fb;
}

.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 1100px;
  margin: 32px auto 0;
}

.audience-grid article {
  padding: 24px;
  border: 1px solid #dfe3eb;
  border-radius: 9px;
  background: #fff;
}

.audience-grid b { font-size: 16px; }
.audience-grid a { display: inline-block; margin-top: 14px; color: #087f48; font-size: 12px; font-weight: 750; }

.agency-cta {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  max-width: 1260px;
  margin: 0 auto;
  padding: 92px clamp(24px, 6vw, 72px);
}

.agency-cta h2 {
  max-width: 720px;
  margin: 0;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.08;
}

.agency-cta > div > p:not(.eyebrow) {
  margin: 12px 0 0;
  color: #667085;
}

.agency-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid #e5e8ef;
  background: #fff;
}

@media (max-width: 1180px) {
  .agency-hero {
    grid-template-columns: 1fr;
  }

  .agency-hero-copy {
    max-width: 760px;
  }

  .agency-console {
    transform: none;
  }
}

@media (max-width: 820px) {
  .agency-nav {
    align-items: flex-start;
  }

  .agency-nav .nav-links {
    justify-content: flex-end;
  }

  .agency-nav .nav-links a:not(.btn):not([href*="login"]) {
    display: none;
  }

  .agency-hero {
    display: block;
    min-height: 0;
    padding-top: 56px;
  }

  .agency-hero-copy h1 {
    font-size: 42px;
  }

  .agency-console {
    margin-top: 46px;
  }

  .console-body {
    grid-template-columns: 110px minmax(350px, 1fr);
    overflow: hidden;
  }

  .followup-panel {
    display: none;
  }

  .agency-steps,
  .capability-grid,
  .audience-grid {
    grid-template-columns: 1fr;
  }

  .agency-steps article,
  .capability-grid article {
    border-right: 0;
    border-bottom: 1px solid #dfe3eb;
  }

  .agency-steps article:last-child,
  .capability-grid article:last-child {
    border-bottom: 0;
  }

  .capability-grid article {
    min-height: 0;
  }

  .agency-cta,
  .agency-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .agency-nav .nav-links a[href*="login"] {
    display: none;
  }

  .agency-nav .btn {
    min-height: 34px;
    padding-inline: 11px;
    font-size: 11px;
  }

  .agency-hero {
    padding-inline: 18px;
  }

  .agency-hero-copy h1 {
    font-size: 36px;
  }

  .agency-lead {
    font-size: 15px;
  }

  .agency-proof {
    display: grid;
  }

  .agency-console {
    margin-inline: -8px;
  }

  .console-sync,
  .client-rail {
    display: none;
  }

  .console-body {
    display: block;
    min-height: 390px;
  }

  .inquiry-row {
    grid-template-columns: 30px minmax(120px, 1fr) 55px;
  }

  .inquiry-row .channel-tag,
  .inquiry-row .owner-stack {
    display: none;
  }

  .agency-section,
  .agency-cta {
    padding: 64px 20px;
  }

  .agency-steps article,
  .capability-grid article {
    padding: 22px;
  }
}
.workflow-story{padding-top:92px}.workflow-track{align-items:stretch;display:grid;grid-template-columns:1fr 28px 1fr 28px 1fr 28px 1fr 28px 1fr;margin:42px 0}.workflow-track article{background:#fff;border:1px solid #e7e4df;border-radius:18px;display:flex;flex-direction:column;gap:8px;min-height:142px;padding:20px}.workflow-track article b{color:#1c1c1c;font-size:15px;line-height:1.35}.workflow-track article small{color:#6f6b66;line-height:1.45}.workflow-track>i{align-self:center;background:#cbc5ef;height:2px;position:relative}.workflow-track>i:after{border-right:2px solid #8175c9;border-top:2px solid #8175c9;content:"";height:7px;position:absolute;right:0;top:-3px;transform:rotate(45deg);width:7px}.workflow-number{align-items:center;background:#eeebff;border-radius:9px;color:#5d4ab7;display:flex;font-size:11px;font-weight:800;height:28px;justify-content:center;width:34px}.missed-lead-compare{display:grid;gap:18px;grid-template-columns:1fr 1fr}.missed-lead-compare article{border-radius:24px;padding:30px}.missed-lead-compare h3{font-size:24px;margin:8px 0 18px}.missed-lead-compare ul{display:grid;gap:10px;list-style:none;margin:0 0 24px;padding:0}.missed-lead-compare li:before{content:"";display:inline-block;height:8px;margin-right:10px;width:8px;border-radius:50%}.without-vola{background:#f5f2ef;border:1px solid #e3ded8}.without-vola li:before{background:#b0a9a2}.without-vola strong{color:#8a5656}.with-vola{background:#25203a;color:#fff}.with-vola .eyebrow,.with-vola li{color:#d7d0f5}.with-vola li:before{background:#9becbb}.with-vola strong{color:#9becbb}.human-proof{align-items:center;display:grid;gap:56px;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}.human-proof figure{margin:0;position:relative}.human-proof figure:before{background:#d8cffd;border-radius:28px;content:"";inset:18px -18px -18px 18px;position:absolute;z-index:-1}.human-proof img{aspect-ratio:3/2;border-radius:28px;display:block;height:auto;object-fit:cover;width:100%}.human-proof h2{font-size:clamp(32px,4vw,52px);letter-spacing:-.04em;line-height:1.05;margin:10px 0 18px}.human-proof blockquote{background:#f4f1ff;border-left:4px solid #725bc7;border-radius:0 14px 14px 0;color:#342a55;font-size:18px;line-height:1.55;margin:24px 0;padding:20px 22px}.human-note{color:#6a6661;font-size:14px}.pricing-section{padding-top:96px}.pricing-grid{align-items:stretch;display:grid;gap:18px;grid-template-columns:repeat(4,1fr);margin-top:42px}.pricing-grid article{background:#fff;border:1px solid #dedad4;border-radius:24px;display:flex;flex-direction:column;padding:30px;position:relative}.pricing-grid article.featured{background:#262139;border-color:#262139;color:#fff;transform:translateY(-10px)}.pricing-grid .plan-name{color:#6f62be;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.pricing-grid .featured .plan-name,.pricing-grid .featured p,.pricing-grid .featured li{color:#d9d3ef}.pricing-grid h3{font-size:38px;margin:8px 0 12px}.pricing-grid h3 small{font-size:14px;font-weight:500}.pricing-grid ul{display:grid;gap:12px;list-style:none;margin:20px 0 28px;padding:0}.pricing-grid li:before{color:#62bd83;content:"✓";font-weight:800;margin-right:9px}.pricing-grid .btn{margin-top:auto;text-align:center}.popular{background:#a8efbd;border-radius:999px;color:#173722;font-size:11px;font-weight:800;padding:7px 12px;position:absolute;right:20px;top:20px}.margin-example{align-items:center;background:#f3f0e9;border-radius:20px;display:grid;gap:18px;grid-template-columns:1fr auto 1fr auto 1fr;margin-top:28px;padding:24px 30px}.margin-example div span,.margin-example div strong{display:block}.margin-example div span{color:#716d68;font-size:13px}.margin-example div strong{font-size:18px;margin-top:6px}.margin-example .minus,.margin-example .equals{color:#9a948c;font-size:25px}.margin-example .margin-result strong{color:#287344}.trust-section{padding-top:94px}.trust-grid{display:grid;gap:16px;grid-template-columns:repeat(4,1fr);margin:40px 0 24px}.trust-grid article{background:#fff;border:1px solid #e5e1da;border-radius:20px;padding:24px}.trust-grid article>span{color:#7263bd;font-size:12px;font-weight:800}.trust-grid h3{font-size:19px;margin:18px 0 10px}.trust-grid p{color:#68645f;font-size:14px;line-height:1.65;margin:0}.trust-links{align-items:center;background:#262139;border-radius:18px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:17px}.trust-links a{border:1px solid #5b526e;border-radius:999px;color:#eee9ff;font-size:13px;padding:9px 14px;text-decoration:none}.trust-links a:hover{background:#3a3350}@media(max-width:1000px){.workflow-track{grid-template-columns:repeat(5,1fr)}.workflow-track>i{display:none}.pricing-grid,.trust-grid{grid-template-columns:repeat(2,1fr)}.pricing-grid article.featured{transform:none}.human-proof{gap:34px}.margin-example{grid-template-columns:1fr}.margin-example>.minus,.margin-example>.equals{display:none}}@media(max-width:720px){.workflow-track,.missed-lead-compare,.human-proof,.pricing-grid,.trust-grid{grid-template-columns:1fr}.workflow-track{gap:10px}.human-proof figure{order:2}.margin-example{padding:22px}.pricing-grid article{padding:24px}.popular{position:static;align-self:flex-start;margin-bottom:12px}}

.pricing-grid article.free-plan{background:#f8fdf9;border-color:#b8dfc7}


/* Polished onboarding progress indicator */
.wizard-progress {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: -4px 0 30px;
  padding: 4px;
}

.wizard-progress::before {
  content: "";
  position: absolute;
  top: 32px;
  left: 17%;
  right: 17%;
  height: 2px;
  background: #e3e8e6;
}

.wizard-step {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 10px;
  min-width: 0;
  color: #98a2a0;
  text-align: center;
  transition: color .2s ease;
}

.wizard-step-icon {
  position: relative;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 2px solid #e3e8e6;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(29, 31, 41, .06);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.wizard-step-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wizard-step-copy {
  display: grid;
  justify-items: center;
  line-height: 1.25;
}

.wizard-step-copy small {
  color: inherit;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.wizard-step-copy strong {
  margin-top: 3px;
  color: #66706d;
  font-size: 14px;
}

.wizard-step-copy em {
  max-width: 150px;
  margin-top: 4px;
  color: #98a2a0;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
}

.wizard-step.active {
  color: var(--green);
}

.wizard-step.active .wizard-step-icon {
  border-color: var(--green);
  background: linear-gradient(145deg, #f2fff7, #e3f8ec);
  box-shadow: 0 8px 22px rgba(22, 179, 100, .18);
  transform: translateY(-2px);
}

.wizard-step.active .wizard-step-copy strong {
  color: #087f48;
}

.wizard-step.complete {
  color: #fff;
}

.wizard-step.complete .wizard-step-icon {
  border-color: var(--green);
  background: var(--green);
  box-shadow: 0 7px 18px rgba(22, 179, 100, .2);
}

.wizard-step.complete .wizard-step-icon svg {
  opacity: 0;
}

.wizard-step.complete .wizard-step-icon::after {
  content: "✓";
  position: absolute;
  font-size: 24px;
  font-weight: 800;
}

.wizard-step.complete .wizard-step-copy small,
.wizard-step.complete .wizard-step-copy strong {
  color: #087f48;
}

@media (max-width: 640px) {
  .wizard-progress {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 24px;
  }

  .wizard-progress::before {
    top: 31px;
    bottom: 31px;
    left: 28px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .wizard-step {
    grid-template-columns: 56px minmax(0, 1fr);
    justify-items: stretch;
    align-items: center;
    gap: 12px;
    text-align: left;
  }

  .wizard-step-icon {
    width: 56px;
    height: 56px;
    border-radius: 17px;
  }

  .wizard-step-copy {
    justify-items: start;
  }

  .wizard-step-copy em {
    max-width: none;
  }
}


/* AI workspace platform story */
.ai-platform-story{background:linear-gradient(180deg,#f8fbff 0%,#f2fbf6 100%);border-block:1px solid #dfe9e5}
.platform-flow{display:grid;grid-template-columns:minmax(150px,1fr) 32px minmax(150px,1fr) 32px minmax(180px,1.15fr) 32px minmax(150px,1fr);align-items:center;gap:8px;max-width:1180px;margin:34px auto}
.flow-card{min-height:150px;display:flex;flex-direction:column;justify-content:center;gap:7px;padding:20px;border:1px solid #dce3ed;border-radius:16px;background:#fff;box-shadow:0 12px 30px rgba(29,31,41,.07)}
.flow-card small{color:#667085;font-weight:650}.flow-card b{font-size:15px;line-height:1.4}.flow-symbol{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#eaf2ff;color:#155eef;font-weight:800;font-size:17px}
.prompt-card{border-color:#cddfff}.ai-card{background:#f7f5ff;border-color:#ddd5ff}.ai-card .flow-symbol{background:#ebe7ff;color:#6938ef}.tenant-card{position:relative;border:2px solid #12b76a;background:#ecfdf3}.tenant-label{position:absolute;top:11px;right:13px;color:#067647;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.tenant-card div{display:grid;grid-template-columns:24px 1fr;align-items:center;gap:7px;padding:10px;border-radius:9px;background:#fff}.tenant-card i{display:grid;place-items:center;width:21px;height:21px;border-radius:6px;background:#dcfae6;color:#067647;font-style:normal;font-weight:800}.tenant-card .muted-row{opacity:.5}.live-card{border-color:#b7e6cc}.live-card .flow-symbol{background:#dcfae6;color:#067647}.flow-arrow{text-align:center;color:#7f8da3;font-size:24px}
.use-case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1080px;margin:0 auto}.use-case-grid article{padding:23px;border:1px solid #e1e6ee;border-radius:15px;background:#fff}.use-case-grid h3{margin:14px 0 6px}.use-case-grid p{margin:0;color:#667085}.use-case-grid small{display:inline-block;margin-top:14px;color:#067647;font-weight:750}.use-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;font-size:24px;font-weight:800}.palette-icon{background:#ffe8f2;color:#c11574}.family-icon{background:#eaf2ff;color:#155eef}.farm-icon{background:#e8f8ed;color:#07883f}.platform-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:26px}

.connector-product-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(390px,.9fr);gap:48px;align-items:center;padding:clamp(48px,8vw,92px) clamp(20px,5vw,72px)}
.security-visual{display:grid;grid-template-columns:125px 48px 1fr;align-items:center}.security-node{padding:18px;border:1px solid #d8e2ee;border-radius:15px;background:#fff;box-shadow:0 14px 34px rgba(29,31,41,.08);text-align:center}.security-node b,.security-node small{display:block}.security-node small{margin-top:4px;color:#667085}.security-line{height:2px;background:#84adff;position:relative}.security-line:after{content:"";position:absolute;right:0;top:-4px;width:8px;height:8px;border-top:2px solid #528bff;border-right:2px solid #528bff;transform:rotate(45deg)}.security-tenant{display:grid;gap:9px;padding:15px;border:2px solid #12b76a;border-radius:18px;background:#ecfdf3}.security-tenant>small{color:#067647;text-transform:uppercase;font-weight:800;font-size:10px;letter-spacing:.08em}.security-workspace{padding:12px;border:1px solid #cee8da;border-radius:10px;background:#fff}.security-workspace.locked{opacity:.48}.feature-table{max-width:1100px;margin:28px auto;border:1px solid #e1e6ee;border-radius:15px;overflow:hidden;background:#fff}.feature-row{display:grid;grid-template-columns:.75fr 1.25fr 1fr;gap:16px;padding:16px 20px;border-top:1px solid #edf0f5}.feature-row:first-child{border-top:0;background:#f8fafc;font-weight:800}.feature-row span{color:#667085}.plain-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.plain-steps article{padding:20px;border:1px solid #e1e6ee;border-radius:14px;background:#fff}.plain-steps strong{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e9f9f0;color:#07883f}.plain-steps h3{margin:12px 0 6px}.plain-steps p{margin:0;color:#667085}

@media(max-width:1000px){.platform-flow{grid-template-columns:1fr 24px 1fr}.platform-flow .flow-arrow:nth-of-type(2){display:none}.tenant-card,.live-card{margin-top:12px}.connector-product-hero{grid-template-columns:1fr}}
@media(max-width:760px){.platform-flow{grid-template-columns:1fr}.flow-arrow{transform:rotate(90deg)}.use-case-grid,.plain-steps{grid-template-columns:1fr}.security-visual{grid-template-columns:100px 36px 1fr}.feature-row{grid-template-columns:1fr;gap:4px}.feature-row:first-child{display:none}}

/* Templates catalog */
.templates-page {
  --template-ink: #172033;
  --template-muted: #667085;
  --template-line: #e5e9ef;
  --template-green: #ef7e31;
  --template-green-dark: #b94b0b;
  background:
    radial-gradient(circle at 5% 4%, rgba(239,126,49,.11), transparent 29rem),
    radial-gradient(circle at 97% 18%, rgba(77,91,188,.08), transparent 34rem),
    #fbfcfe;
  color: var(--template-ink);
  font-family: Inter, "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 16px;
}
.templates-page .nav { position: relative; max-width: 1240px; margin: 0 auto; padding: 22px 28px; border: 0; background: transparent; backdrop-filter: none; }
.templates-page .brand { color: var(--template-ink); font-size: 17px; }
.templates-page .brand-mark { background: var(--template-ink); }
.templates-page .nav-links { gap: 24px; font-size: 14px; }
.templates-page .nav-links .active { color: var(--template-green-dark); font-weight: 800; }
.templates-page .btn { min-height: 44px; padding: 0 19px; border-color: var(--template-green); border-radius: 12px; background: var(--template-green); box-shadow: 0 10px 24px rgba(239,126,49,.18); font-size: 14px; }
.templates-page .btn:hover { background: var(--template-green-dark); transform: translateY(-2px); }
.templates-page .btn.secondary { border-color: var(--template-line); background: #fff; color: var(--template-ink); box-shadow: none; }
.templates-hero { max-width: 1180px; margin: 0 auto; padding: clamp(62px,8vw,108px) 28px 76px; text-align: center; }
.templates-kicker { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 22px; padding: 8px 13px; border: 1px solid #f2cfb4; border-radius: 999px; background: rgba(255,255,255,.82); color: var(--template-green-dark); font-size: 13px; font-weight: 800; }
.templates-kicker span { width: 8px; height: 8px; border-radius: 50%; background: var(--template-green); box-shadow: 0 0 0 5px #fff0e5; }
.templates-hero h1 { max-width: 980px; margin: 0 auto; font-size: clamp(44px,6.6vw,76px); line-height: .99; letter-spacing: -.055em; }
.templates-hero h1 em { color: var(--template-green); font-style: normal; }
.templates-hero > p:not(.templates-kicker) { max-width: 760px; margin: 26px auto 0; color: var(--template-muted); font-size: clamp(17px,2vw,20px); line-height: 1.65; }
.template-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 34px; }
.template-jump a { padding: 10px 15px; border: 1px solid var(--template-line); border-radius: 999px; background: rgba(255,255,255,.88); color: #344054; font-size: 13px; font-weight: 750; box-shadow: 0 8px 22px rgba(23,32,51,.04); }
.template-jump a:hover { border-color: #efb88f; color: var(--template-green-dark); }
.featured-templates { max-width: 1240px; margin: 0 auto; padding: 38px 28px 92px; }
.templates-section-head { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(280px,.8fr); gap: 56px; align-items: end; max-width: 1120px; margin: 0 auto 42px; }
.templates-page .eyebrow { margin: 0 0 10px; color: var(--template-green-dark); font-size: 12px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.templates-section-head h2,.templates-adapt h2,.templates-cta h2 { margin: 0; font-size: clamp(34px,4.5vw,54px); line-height: 1.06; letter-spacing: -.045em; }
.templates-section-head > p { margin: 0; color: var(--template-muted); line-height: 1.7; }
.template-story { display: grid; grid-template-columns: minmax(280px,.68fr) minmax(0,1.32fr); gap: clamp(34px,5vw,70px); align-items: start; max-width: 1180px; margin: 0 auto 34px; padding: clamp(28px,4.5vw,58px); overflow: hidden; border: 1px solid var(--template-line); border-radius: 30px; background: rgba(255,255,255,.94); box-shadow: 0 26px 76px rgba(23,32,51,.08); scroll-margin-top: 30px; }
.template-story:nth-of-type(even) .template-copy { order: 2; }
.template-story:nth-of-type(even) .template-visual-pair { order: 1; }
.dentist-story { background: linear-gradient(145deg,#fff 55%,#eff8f4); }
.art-story { background: linear-gradient(145deg,#fff 55%,#fff7ed); }
.project-story { background: linear-gradient(145deg,#fff 55%,#f2f3fb); }
.template-index { color: var(--template-green-dark); font-size: 12px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.template-copy h2 { margin: 13px 0 14px; font-size: clamp(34px,4vw,50px); line-height: 1.04; letter-spacing: -.045em; }
.template-lead { margin: 0 0 23px; color: #475467; font-size: 17px; line-height: 1.65; }
.template-copy ul { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; color: #344054; font-size: 14px; }
.template-copy li { display: flex; gap: 10px; }
.template-copy li::before { content: "✓"; color: var(--template-green); font-weight: 900; }
.template-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 28px; }
.text-link { color: var(--template-green-dark); font-size: 14px; font-weight: 800; }
.text-link span { display: inline-block; transition: transform .2s; }
.text-link:hover span { transform: translateX(4px); }
.template-visual-pair { position: relative; min-height: 510px; }
.template-visual-pair figure { position: absolute; margin: 0; overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 22px 54px rgba(23,32,51,.18); }
.template-visual-pair img { display: block; width: 100%; height: 100%; object-fit: cover; }
.template-visual-pair figcaption { position: absolute; right: 12px; bottom: 12px; left: 12px; padding: 10px 12px; border-radius: 11px; background: rgba(18,24,38,.78); color: #fff; font-size: 11px; line-height: 1.4; backdrop-filter: blur(8px); }
.template-visual-pair figcaption span { color: #a9f0c7; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.lifestyle-visual { inset: 0 26% 15% 0; }
.app-visual { z-index: 2; inset: 39% 0 0 22%; border: 7px solid #fff; }
.app-visual img { object-position: center; }
.templates-adapt { max-width: 1124px; margin: 0 auto 34px; padding: clamp(50px,7vw,82px); border-radius: 30px; background: #25203a; color: #fff; text-align: center; }
.templates-adapt .eyebrow { color: #ffc99f; }
.templates-adapt h2 { max-width: 760px; margin: 0 auto; }
.templates-adapt > p:not(.eyebrow) { max-width: 680px; margin: 19px auto 0; color: #d7d0f5; font-size: 17px; line-height: 1.7; }
.adapt-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.adapt-pills span { padding: 9px 13px; border: 1px solid #5b526e; border-radius: 999px; background: #332d49; color: #eeeafb; font-size: 12px; }
.templates-cta { display: flex; align-items: center; justify-content: space-between; gap: 42px; max-width: 1124px; margin: 0 auto 34px; padding: clamp(38px,6vw,68px); border: 1px solid #f0d8c6; border-radius: 28px; background: linear-gradient(135deg,#fff3e9,#fff 58%,#fff8f1); }
.templates-cta > div:first-child { max-width: 700px; }
.templates-cta .template-actions { flex: 0 0 auto; margin-top: 0; }
.templates-footer { display: flex; flex-wrap: wrap; gap: 18px 28px; justify-content: space-between; max-width: 1180px; margin: 0 auto; padding: 28px; border-top: 0; background: transparent; }
@media (max-width: 900px) {
  .templates-page .nav-links a:not(.btn):not(.active) { display: none; }
  .templates-section-head,.template-story { grid-template-columns: 1fr; }
  .templates-section-head { gap: 16px; }
  .template-story:nth-of-type(even) .template-copy,.template-copy { order: 1; }
  .template-story:nth-of-type(even) .template-visual-pair,.template-visual-pair { order: 2; }
  .template-visual-pair { min-height: 480px; }
  .templates-cta { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 600px) {
  .templates-page .nav { flex-direction: row; align-items: center; padding: 16px 18px; }
  .templates-page .brand > span:last-child { display: none; }
  .templates-page .nav-links { width: auto; padding: 0; }
  .templates-page .nav-links .active { display: none; }
  .templates-hero { padding: 48px 18px 54px; }
  .templates-hero h1 { font-size: clamp(40px,13vw,56px); }
  .template-jump { align-items: stretch; flex-direction: column; }
  .featured-templates { padding: 26px 14px 64px; }
  .template-story { gap: 28px; padding: 22px; border-radius: 22px; }
  .template-visual-pair { display: grid; gap: 12px; min-height: 0; }
  .template-visual-pair figure { position: relative; inset: auto; border: 0; border-radius: 16px; }
  .template-visual-pair img { aspect-ratio: 3/2; height: auto; }
  .app-visual img { aspect-ratio: 16/10; }
  .template-actions { align-items: stretch; flex-direction: column; }
  .template-actions .btn { justify-content: center; text-align: center; }
  .templates-adapt,.templates-cta { margin: 0 14px 24px; padding: 42px 24px; border-radius: 22px; }
  .templates-footer > span:nth-child(2) { display: none; }
}

/* Homepage paths into templates and custom work */
.homepage-pathways{max-width:1180px;margin:0 auto;padding:22px 28px 104px}.pathways-heading{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:54px;align-items:end;margin-bottom:30px}.pathways-heading .eyebrow{margin:0 0 10px;color:#b94b0b;font-size:12px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.pathways-heading h2{margin:0;color:#18212f;font-size:clamp(34px,4.5vw,54px);line-height:1.06;letter-spacing:-.045em}.pathways-heading>p{margin:0;color:#667085;line-height:1.7}.pathways-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.pathway-card{position:relative;isolation:isolate;display:flex;min-height:360px;overflow:hidden;align-items:flex-end;padding:28px;border:1px solid rgba(255,255,255,.35);border-radius:24px;background-color:#25203a;background-position:center;background-size:cover;color:#fff;box-shadow:0 22px 58px rgba(24,33,47,.15);transition:transform .22s ease,box-shadow .22s ease}.pathway-card::before{position:absolute;z-index:-1;inset:0;background:linear-gradient(0deg,rgba(15,20,32,.9) 0%,rgba(15,20,32,.5) 48%,rgba(15,20,32,.08) 78%),linear-gradient(90deg,rgba(15,20,32,.45),transparent 70%);content:""}.pathway-card:hover{transform:translateY(-5px);box-shadow:0 29px 70px rgba(24,33,47,.23)}.pathway-card:hover b i{transform:translateX(5px)}.pathway-dentist{background-image:url("assets/dentist-demo-card.821300b9aba138fc.jpg");background-position:60% center}.pathway-art{background-image:url("assets/art-school-demo-card.afc50e575d2d0001.jpg");background-position:58% center}.pathway-project{background-image:url("assets/project-planner-team.bc86003e56a4e762.jpg");background-position:center}.pathway-custom{background-image:radial-gradient(circle at 82% 18%,rgba(255,174,112,.22),transparent 15rem),linear-gradient(135deg,#25203a,#344b65)}.pathway-custom::after{position:absolute;z-index:-1;right:-55px;top:-70px;width:240px;height:240px;border:1px solid rgba(255,174,112,.24);border-radius:50%;content:""}.pathway-number,.pathway-spark{position:absolute;top:22px;left:22px;display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(255,255,255,.35);border-radius:12px;background:rgba(20,25,38,.42);font-size:12px;font-weight:850;backdrop-filter:blur(8px)}.pathway-spark{color:#ffc99f;font-size:19px}.pathway-card div{max-width:490px}.pathway-card small{color:#ffd7b8;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.pathway-card h3{margin:7px 0 8px;font-size:clamp(25px,3vw,34px);line-height:1.08;letter-spacing:-.035em}.pathway-card p{margin:0;color:#e4e7ec;font-size:14px;line-height:1.55;text-shadow:0 1px 8px rgba(0,0,0,.45)}.pathway-card b{display:inline-flex;align-items:center;gap:7px;margin-top:18px;color:#ffc99f;font-size:13px}.pathway-card b i{font-style:normal;transition:transform .2s}.pathways-all{margin:22px 0 0;text-align:center}.pathways-all a{color:#b94b0b;font-size:14px;font-weight:800}.pathways-all span{display:inline-block;transition:transform .2s}.pathways-all a:hover span{transform:translateX(4px)}
@media(max-width:820px){.pathways-heading{grid-template-columns:1fr;gap:14px}.pathways-grid{grid-template-columns:1fr}.pathway-card{min-height:330px}}
@media(max-width:560px){.homepage-pathways{padding:24px 18px 76px}.pathway-card{min-height:310px;padding:22px;border-radius:20px}.pathway-number,.pathway-spark{top:18px;left:18px}.pathway-dentist{background-position:66% center}.pathway-art{background-position:63% center}}

/* Individual template pages */
.template-detail-page {
  --detail-ink: #172033;
  --detail-muted: #667085;
  --detail-line: #e5e9ef;
  --detail-accent: #ef7e31;
  --detail-accent-dark: #b94b0b;
  background: #fbfcfe;
  color: var(--detail-ink);
  font-family: Inter, "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 16px;
}
.art-detail,.project-detail { --detail-accent: #ef7e31; --detail-accent-dark: #b94b0b; }
.template-detail-page .nav { position: relative; max-width: 1240px; margin: 0 auto; padding: 22px 28px; border: 0; background: transparent; backdrop-filter: none; }
.template-detail-page .brand { color: var(--detail-ink); font-size: 17px; }
.template-detail-page .brand-mark { background: var(--detail-ink); }
.template-detail-page .nav-links { gap: 22px; font-size: 14px; }
.template-detail-page .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 19px; border-color: var(--detail-accent); border-radius: 12px; background: var(--detail-accent); box-shadow: 0 10px 24px color-mix(in srgb,var(--detail-accent) 18%,transparent); color: #fff; font-size: 14px; }
.template-detail-page .btn:hover { background: var(--detail-accent-dark); transform: translateY(-2px); }
.template-detail-page .btn.secondary { border-color: var(--detail-line); background: #fff; box-shadow: none; color: var(--detail-ink); }
.detail-hero { display: grid; grid-template-columns: minmax(0,.85fr) minmax(440px,1.15fr); gap: clamp(42px,6vw,82px); align-items: start; max-width: 1180px; margin: 0 auto; padding: clamp(62px,8vw,104px) 28px 94px; }
.detail-kicker { display: inline-block; margin: 0 0 20px; color: var(--detail-accent-dark); font-size: 13px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.detail-hero h1 { margin: 0; font-size: clamp(46px,5.7vw,72px); line-height: .99; letter-spacing: -.055em; }
.detail-hero h1 em { color: var(--detail-accent); font-style: normal; }
.detail-hero-copy > p:not(.detail-kicker) { margin: 24px 0 0; color: var(--detail-muted); font-size: 18px; line-height: 1.7; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.detail-lifestyle { position: relative; margin: 0; overflow: hidden; border-radius: 28px; background: #fff; box-shadow: 0 28px 76px rgba(23,32,51,.16); }
.detail-lifestyle::after { position: absolute; inset: 0; background: linear-gradient(0deg,rgba(12,19,31,.55),transparent 46%); content: ""; pointer-events: none; }
.detail-lifestyle img { display: block; width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.detail-lifestyle figcaption { position: absolute; z-index: 1; right: 24px; bottom: 22px; left: 24px; color: #fff; font-size: 13px; font-weight: 700; }
.detail-proof { display: grid; grid-template-columns: minmax(260px,.55fr) minmax(0,1.45fr); gap: clamp(34px,6vw,76px); align-items: start; max-width: 1180px; margin: 0 auto 96px; padding: clamp(30px,5vw,56px); border: 1px solid var(--detail-line); border-radius: 30px; background: #fff; box-shadow: 0 25px 70px rgba(23,32,51,.07); }
.template-detail-page .eyebrow { margin: 0 0 10px; color: var(--detail-accent-dark); font-size: 12px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.detail-proof h2,.detail-features h2,.detail-fit h2,.detail-cta h2 { margin: 0; font-size: clamp(34px,4.3vw,52px); line-height: 1.06; letter-spacing: -.045em; }
.detail-proof div > p:last-child,.detail-fit div > p:last-child { color: var(--detail-muted); line-height: 1.7; }
.detail-proof figure { margin: 0; overflow: hidden; border: 1px solid var(--detail-line); border-radius: 18px; background: #f8fafc; }
.detail-proof img { display: block; width: 100%; height: auto; }
.detail-features { max-width: 1124px; margin: 0 auto 96px; padding: 0 28px; }
.detail-features > h2 { max-width: 720px; }
.detail-feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 36px; }
.detail-feature-grid article { padding: 28px; border: 1px solid var(--detail-line); border-radius: 21px; background: #fff; }
.detail-feature-grid article > span { color: var(--detail-accent); font-size: 12px; font-weight: 900; }
.detail-feature-grid h3 { margin: 20px 0 10px; font-size: 20px; }
.detail-feature-grid p { margin: 0; color: var(--detail-muted); font-size: 14px; line-height: 1.7; }
.detail-fit { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(260px,.75fr); gap: 48px; align-items: center; max-width: 1124px; margin: 0 auto 34px; padding: clamp(44px,7vw,76px); border-radius: 30px; background: #25203a; color: #fff; }
.detail-fit .eyebrow,.art-detail .detail-fit .eyebrow,.project-detail .detail-fit .eyebrow { color: #ffc99f; }
.detail-fit div > p:last-child { color: #d7d0f5; }
.detail-swaps { display: grid; gap: 10px; }
.detail-swaps span { padding: 12px 15px; border: 1px solid #5b526e; border-radius: 999px; background: #332d49; color: #eeeafb; font-size: 13px; text-align: center; }
.detail-cta { display: flex; align-items: center; justify-content: space-between; gap: 40px; max-width: 1124px; margin: 0 auto 34px; padding: clamp(40px,6vw,68px); border: 1px solid #f0d8c6; border-radius: 28px; background: linear-gradient(135deg,#fff3e9,#fff 58%,#fff8f1); }
.detail-cta > div:first-child { max-width: 670px; }
.detail-cta .detail-actions { flex: 0 0 auto; margin-top: 0; }
.detail-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 28px; max-width: 1180px; margin: 0 auto; padding: 28px; border-top: 0; background: transparent; }
@media (max-width: 900px) {
  .template-detail-page .nav-links a:not(.btn):not(:first-child) { display: none; }
  .detail-hero,.detail-proof,.detail-fit { grid-template-columns: 1fr; }
  .detail-hero { padding-top: 54px; }
  .detail-lifestyle { max-width: 700px; }
  .detail-feature-grid { grid-template-columns: 1fr; }
  .detail-cta { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 600px) {
  .template-detail-page .nav { flex-direction: row; align-items: center; padding: 16px 18px; }
  .template-detail-page .brand > span:last-child { display: none; }
  .template-detail-page .nav-links { width: auto; padding: 0; }
  .template-detail-page .nav-links > a:not(.btn) { display: none; }
  .detail-hero { gap: 34px; padding: 46px 18px 64px; }
  .detail-hero h1 { font-size: clamp(42px,13vw,56px); }
  .detail-proof { margin: 0 14px 70px; padding: 22px; border-radius: 22px; }
  .detail-features { margin-bottom: 70px; padding: 0 18px; }
  .detail-fit,.detail-cta { margin: 0 14px 24px; padding: 40px 24px; border-radius: 22px; }
  .detail-actions { align-items: stretch; flex-direction: column; width: 100%; }
  .detail-footer > span:nth-child(2) { display: none; }
}

/* Custom application inquiry */
.custom-app-page { --custom-ink:#172033; --custom-muted:#667085; --custom-line:#e5e9ef; --custom-green:#ef7e31; background:radial-gradient(circle at 8% 8%,rgba(239,126,49,.12),transparent 32rem),radial-gradient(circle at 95% 34%,rgba(83,100,199,.1),transparent 34rem),#fbfcfe; color:var(--custom-ink); font-family:Inter,"Segoe UI",ui-sans-serif,system-ui,-apple-system,sans-serif; font-size:16px; }
.custom-app-page .nav { position:relative; max-width:1240px; margin:0 auto; padding:22px 28px; border:0; background:transparent; backdrop-filter:none; }
.custom-app-page .brand { color:var(--custom-ink); font-size:17px; }.custom-app-page .brand-mark{background:var(--custom-ink)}
.custom-app-page .nav-links{gap:24px;font-size:14px}.custom-app-page .nav-links .active{color:#b94b0b;font-weight:800}
.custom-app-page .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 19px;border-color:var(--custom-green);border-radius:12px;background:var(--custom-green);color:#fff;box-shadow:0 10px 24px rgba(239,126,49,.18);font-size:14px}.custom-app-page .btn:hover{background:#b94b0b;transform:translateY(-2px)}.custom-app-page .btn.secondary{border-color:var(--custom-line);background:#fff;color:var(--custom-ink);box-shadow:none}
.custom-app-hero{display:grid;grid-template-columns:minmax(0,.85fr) minmax(440px,1.15fr);gap:clamp(42px,7vw,92px);align-items:start;max-width:1180px;margin:0 auto;padding:clamp(62px,8vw,104px) 28px 90px}
.custom-app-kicker{margin:0 0 20px;color:#b94b0b;font-size:13px;font-weight:850;letter-spacing:.09em;text-transform:uppercase}.custom-app-copy h1{margin:0;font-size:clamp(48px,6vw,76px);line-height:.99;letter-spacing:-.055em}.custom-app-copy h1 em{color:var(--custom-green);font-style:normal}.custom-app-copy>p:not(.custom-app-kicker){margin:25px 0 0;color:var(--custom-muted);font-size:19px;line-height:1.7}
.custom-app-prompts{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}.custom-app-prompts span{padding:9px 12px;border:1px solid #f2cfb4;border-radius:999px;background:rgba(255,255,255,.8);color:#8f3d0b;font-size:12px;font-weight:700}
.custom-app-form-card{padding:clamp(26px,4vw,42px);border:1px solid var(--custom-line);border-radius:28px;background:rgba(255,255,255,.96);box-shadow:0 30px 80px rgba(23,32,51,.13)}.custom-app-page .eyebrow{margin:0 0 8px;color:#b94b0b;font-size:12px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.form-heading h2{margin:0;font-size:clamp(30px,3.4vw,43px);line-height:1.08;letter-spacing:-.04em}.form-heading>p:last-child{margin:14px 0 0;color:var(--custom-muted);font-size:14px;line-height:1.65}
.custom-app-form-card form{display:grid;grid-template-columns:repeat(2,1fr);gap:17px;margin-top:28px}.custom-app-form-card label{display:grid;gap:7px;color:#344054;font-size:12px;font-weight:800}.custom-app-form-card .full{grid-column:1/-1}.custom-app-form-card input,.custom-app-form-card textarea{width:100%;border:1px solid #d7dce5;border-radius:11px;background:#fbfcfe;color:var(--custom-ink);font:inherit;font-size:14px;outline:none}.custom-app-form-card input{height:46px;padding:0 13px}.custom-app-form-card textarea{resize:vertical;padding:12px 13px;line-height:1.5}.custom-app-form-card input:focus,.custom-app-form-card textarea:focus{border-color:var(--custom-green);box-shadow:0 0 0 3px rgba(239,126,49,.12)}.custom-app-form-card button{border:0;cursor:pointer}.custom-app-form-card button:disabled{cursor:wait;opacity:.65}.custom-app-status{min-height:20px;margin:0;color:var(--custom-muted);font-size:13px}.custom-app-status.success{color:#087a4a}.custom-app-status.error{color:#b42318}
.custom-app-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1124px;margin:0 auto 34px}.custom-app-steps article{padding:28px;border:1px solid var(--custom-line);border-radius:22px;background:#fff}.custom-app-steps article>span{color:var(--custom-green);font-size:12px;font-weight:900}.custom-app-steps h2{margin:18px 0 8px;font-size:22px}.custom-app-steps p{margin:0;color:var(--custom-muted);font-size:14px;line-height:1.65}
.custom-app-alternative{display:flex;align-items:center;justify-content:space-between;gap:42px;max-width:1124px;margin:0 auto 34px;padding:clamp(40px,6vw,68px);border-radius:28px;background:#25203a;color:#fff}.custom-app-alternative>div{max-width:720px}.custom-app-alternative .eyebrow{color:#ffc99f}.custom-app-alternative h2{margin:0;font-size:clamp(34px,4.3vw,52px);line-height:1.06;letter-spacing:-.045em}.custom-app-alternative p:last-child{color:#d7d0f5;line-height:1.7}.custom-app-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px 28px;max-width:1180px;margin:0 auto;padding:28px;border-top:0;background:transparent}
.contact-custom-link{max-width:1100px;margin:0 auto 50px;padding:0 28px;text-align:center}.contact-custom-link a{color:#b94b0b;font-weight:800}
@media(max-width:900px){.custom-app-page .nav-links a:not(.btn):not(.active){display:none}.custom-app-hero{grid-template-columns:1fr}.custom-app-copy{max-width:760px}.custom-app-steps{margin-inline:28px}.custom-app-alternative{margin-inline:28px}}
@media(max-width:600px){.custom-app-page .nav{flex-direction:row;align-items:center;padding:16px 18px}.custom-app-page .brand>span:last-child{display:none}.custom-app-page .nav-links{width:auto;padding:0}.custom-app-page .nav-links .active{display:none}.custom-app-hero{padding:46px 18px 64px}.custom-app-copy h1{font-size:clamp(42px,13vw,56px)}.custom-app-form-card{padding:22px;border-radius:22px}.custom-app-form-card form{grid-template-columns:1fr}.custom-app-steps{grid-template-columns:1fr;margin:0 14px 24px}.custom-app-alternative{align-items:flex-start;flex-direction:column;margin:0 14px 24px;padding:40px 24px;border-radius:22px}.custom-app-footer>span:nth-child(2){display:none}}

/* Public policy and support pages */
.legal-page{max-width:900px;margin:0 auto;padding:clamp(44px,7vw,84px) clamp(20px,5vw,56px) 80px}
.legal-page h1{font-size:clamp(34px,5vw,52px)}
.legal-page h2{margin:34px 0 10px;color:#303538;font-size:21px}
.legal-page p,.legal-page li{color:#4d5668;line-height:1.75}
.legal-page ul{display:grid;gap:9px;padding-left:22px}
.legal-page a,.legal-links a{color:#087f48;text-decoration:underline;text-underline-offset:3px}
.legal-updated{margin:10px 0 28px!important;color:#7a8292!important;font-size:13px}
.legal-warning{margin:18px 0;padding:18px 20px;border-left:4px solid #e05d42;border-radius:0 10px 10px 0;background:#fff4f0;color:#62261b;line-height:1.65}
.legal-links{display:flex;flex-wrap:wrap;gap:12px}


/* Current product hero: real Art School Scheduler application view. */
.product-hero-visual{margin:0;padding:0;overflow:hidden;background:#fff}
.product-hero-visual img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
@media(max-width:760px){.product-hero-visual img{min-height:360px;object-position:center;object-fit:cover}}


/* Creative workspace-product homepage */
.roadmap-site{background:#fbfaf7;color:#172033;overflow-x:hidden}
.roadmap-site .shell{position:relative;z-index:1;width:100%;max-width:1440px;margin:0 auto}
.roadmap-glow{position:absolute;border-radius:999px;filter:blur(2px);pointer-events:none;opacity:.7}
.glow-one{width:520px;height:520px;right:-180px;top:70px;background:radial-gradient(circle,#dff8e9 0,rgba(223,248,233,0) 70%)}
.glow-two{width:460px;height:460px;left:-220px;top:680px;background:radial-gradient(circle,#eee9ff 0,rgba(238,233,255,0) 70%)}
.roadmap-announcement{min-height:36px;display:flex;align-items:center;justify-content:center;gap:8px;margin:0 -42px;padding:0 24px;background:#172033;color:#fff;font-size:12px;letter-spacing:.01em}
.roadmap-announcement>span{color:#82e5ae}.roadmap-announcement a{color:#fff;font-weight:700;margin-left:10px}
.roadmap-nav{background:rgba(251,250,247,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(23,32,51,.08)}
.roadmap-hero{min-height:570px;padding:84px 5% 110px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);gap:9%;align-items:center}
.roadmap-hero-copy{max-width:830px}.roadmap-hero .eyebrow{display:flex;align-items:center;gap:9px}.roadmap-hero .eyebrow span{width:28px;height:2px;background:#16a163}
.roadmap-hero h1{font-size:clamp(48px,6vw,86px);line-height:.98;letter-spacing:-.055em;margin:18px 0 26px;color:#111827}
.roadmap-hero h1 em{font-style:normal;color:#16a163}.roadmap-hero-copy>p:not(.eyebrow){max-width:700px;font-size:18px;line-height:1.7;color:#596579}
.roadmap-primary{box-shadow:0 12px 28px rgba(22,161,99,.25);padding:14px 20px}.roadmap-primary span{font-size:18px}.roadmap-text-link{font-weight:750;color:#344054;text-decoration:none;padding:12px}
.roadmap-mini-proof{display:flex;gap:20px;flex-wrap:wrap;margin-top:28px;color:#667085;font-size:12px}.roadmap-mini-proof i{font-style:normal;color:#16a163;font-weight:900;margin-right:5px}
.roadmap-hero-note{position:relative;transform:rotate(2deg);background:#fff5bd;border:1px solid #e7d980;border-radius:3px 22px 22px 22px;padding:34px;box-shadow:0 28px 60px rgba(72,60,12,.13)}
.roadmap-hero-note:after{content:"";position:absolute;inset:8px -8px -8px 8px;border:1px solid rgba(184,151,21,.25);border-radius:3px 22px 22px;z-index:-1}.note-spark{position:absolute;right:22px;top:18px;color:#b18500;font-size:24px}
.roadmap-hero-note small{color:#766518;text-transform:uppercase;font-weight:800;letter-spacing:.1em}.roadmap-hero-note blockquote{margin:20px 0 28px;font:700 21px/1.5 ui-rounded,"Nunito",system-ui;color:#40370f}
.roadmap-hero-note div{border-top:1px solid #ddcb6d;padding-top:18px;display:grid;gap:4px}.roadmap-hero-note div span{font-size:11px;color:#766518}.roadmap-hero-note div b{font-size:14px}
.scheduler-showcase{position:relative;margin:0 3% 100px;padding:54px 3% 40px;border-radius:34px;background:linear-gradient(140deg,#edf7f1,#e8eef5);border:1px solid rgba(23,32,51,.07);box-shadow:0 28px 64px rgba(23,32,51,.11)}
.scheduler-label{position:absolute;top:18px;left:4%;right:4%;display:flex;align-items:center;gap:8px;color:#344054}.scheduler-label small{margin-left:auto;color:#667085}.live-dot{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 5px rgba(74,222,128,.14)}
.scheduler-frame{margin:0;border-radius:15px;overflow:hidden;background:#fff;box-shadow:0 24px 55px rgba(0,0,0,.28);border:1px solid #596379}.scheduler-frame img{display:block;width:100%;height:auto}
.frame-dots{height:32px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#eef1f5;border-bottom:1px solid #d9dee7}.frame-dots i{width:8px;height:8px;border-radius:50%;background:#ff7369}.frame-dots i:nth-child(2){background:#ffc857}.frame-dots i:nth-child(3){background:#46c980}.frame-dots span{margin:auto;color:#8490a3;font-size:10px}
.floating-chip{position:absolute;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:11px 15px;box-shadow:0 14px 34px rgba(23,32,51,.16)}.floating-chip b{font-size:22px;color:#16a163}.floating-chip span{max-width:72px;font-size:11px;line-height:1.2;color:#667085}.chip-left{left:-12px;bottom:56px;transform:rotate(-4deg)}.chip-right{right:-10px;top:90px;transform:rotate(3deg)}
.roadmap-value-strip{margin:0 5% 120px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #dfe3e8;border-bottom:1px solid #dfe3e8}.roadmap-value-strip article{padding:28px;border-right:1px solid #dfe3e8;display:grid;gap:7px}.roadmap-value-strip article:last-child{border-right:0}.roadmap-value-strip strong{font-size:15px}.roadmap-value-strip span{color:#667085;font-size:12px;line-height:1.55}
.people-story{display:grid;gap:34px;padding:0 5% 130px}.people-panel{display:grid;grid-template-columns:1.05fr .95fr;min-height:480px;border-radius:30px;overflow:hidden;background:#fff;box-shadow:0 22px 60px rgba(23,32,51,.08)}.people-panel figure{margin:0;min-height:420px}.people-panel img{width:100%;height:100%;object-fit:cover;display:block}.people-panel .application-view{display:flex;align-items:center;justify-content:center;min-width:0;padding:clamp(18px,3vw,36px);background:rgba(255,255,255,.58)}.people-panel .application-view img{width:100%;height:auto;max-height:100%;aspect-ratio:16/9;object-fit:contain;border:1px solid rgba(23,32,51,.08);border-radius:12px;box-shadow:0 14px 34px rgba(23,32,51,.10)}.people-copy{padding:clamp(36px,6vw,80px);display:flex;flex-direction:column;justify-content:center}.people-copy h2{font-size:clamp(32px,4vw,54px);line-height:1.05;letter-spacing:-.04em;margin:12px 0 22px}.people-copy p:not(.eyebrow){color:#667085;line-height:1.75}.people-copy a{margin-top:18px;color:#0b8550;font-weight:800;text-decoration:none}.people-copy a span{margin-left:6px}.people-family{background:#f2edff}.people-business{background:#edf9f2}
.template-gallery{padding:110px 5%;background:#fff}.roadmap-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:45px}.roadmap-section-head h2{font-size:clamp(36px,4.5vw,60px);line-height:1.03;letter-spacing:-.045em;margin:10px 0 0}.roadmap-section-head>p{max-width:440px;color:#667085;line-height:1.7}.roadmap-section-head.centered{display:block;text-align:center}.template-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(230px,auto);gap:16px}.template-card{position:relative;overflow:hidden;border-radius:22px;padding:26px;background:#f4f6fa;border:1px solid #e6e9ef;display:flex;flex-direction:column;justify-content:space-between;transition:transform .2s,box-shadow .2s}.template-card:hover{transform:translateY(-5px);box-shadow:0 20px 36px rgba(23,32,51,.1)}.template-card:after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;right:-75px;bottom:-85px;background:rgba(255,255,255,.6)}.featured-template{grid-column:span 2;grid-row:span 2;background:linear-gradient(145deg,#dff8e9,#bcefd1);min-height:476px}.medical{background:#e8f1ff}.tasks{background:#fff0de}.notes{background:#fff6ba}.personal{background:#eee9ff}.standard{background:#e9f7f2}
.template-icon{width:52px;height:52px;border-radius:15px;background:rgba(255,255,255,.8);display:grid;place-items:center;font-size:25px;box-shadow:0 8px 18px rgba(23,32,51,.08)}.featured-template .template-icon{width:70px;height:70px;font-size:34px}.template-card small{color:#667085;text-transform:uppercase;letter-spacing:.09em;font-size:10px;font-weight:800}.template-card h3{font-size:22px;margin:8px 0}.featured-template h3{font-size:36px}.template-card p{color:#596579;line-height:1.55;margin-bottom:0}.template-meta{display:inline-block;margin-top:15px;color:#0b8550;font-weight:800;font-size:11px}.card-arrow{position:absolute;right:24px;top:24px;font-style:normal;font-size:25px}
.how-roadmap{padding:120px 5%}.roadmap-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.roadmap-steps article{position:relative;padding:26px;border:1px solid #e1e5eb;border-radius:22px;background:#fff}.roadmap-steps article>span{position:absolute;right:20px;top:18px;color:#a2aabb;font-weight:800;font-size:11px}.step-icon{width:44px;height:44px;border-radius:13px;background:#e8f8ef;color:#0b8550;display:grid;place-items:center;font-size:20px}.roadmap-steps h3{font-size:20px;margin:24px 0 9px}.roadmap-steps p{color:#667085;font-size:13px;line-height:1.65}
.roadmap-trust{margin:0 5% 120px;padding:60px;border-radius:30px;background:#172033;color:#fff;display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}.roadmap-trust h2{font-size:clamp(32px,4vw,52px);line-height:1.05;letter-spacing:-.04em;margin:12px 0}.roadmap-trust .eyebrow{color:#75dea4!important}.trust-pills{display:flex;flex-wrap:wrap;gap:10px}.trust-pills span{padding:11px 14px;border:1px solid #445069;border-radius:999px;color:#dce2ec;font-size:12px;background:rgba(255,255,255,.04)}
.roadmap-final-cta{position:relative;overflow:hidden;margin:0 5% 80px;padding:90px 9%;text-align:center;border-radius:34px;background:linear-gradient(135deg,#dff8e9,#f5f0ff);border:1px solid #d9e7df}.roadmap-final-cta h2{position:relative;font-size:clamp(38px,5vw,68px);line-height:1.03;letter-spacing:-.05em;max-width:900px;margin:14px auto 20px}.roadmap-final-cta>p:not(.eyebrow){color:#667085}.roadmap-final-cta .hero-actions{justify-content:center}.cta-orbit{position:absolute;border:1px solid rgba(22,161,99,.22);border-radius:50%}.orbit-one{width:320px;height:320px;left:-170px;top:-120px}.orbit-two{width:240px;height:240px;right:-90px;bottom:-120px}.roadmap-footer{margin-top:0}
@media(max-width:980px){.roadmap-hero{grid-template-columns:1fr;padding-top:60px}.roadmap-hero-note{max-width:520px}.roadmap-value-strip{grid-template-columns:1fr 1fr}.roadmap-value-strip article:nth-child(2){border-right:0}.roadmap-value-strip article:nth-child(-n+2){border-bottom:1px solid #dfe3e8}.template-bento{grid-template-columns:repeat(2,1fr)}.roadmap-steps{grid-template-columns:1fr 1fr}.roadmap-trust{grid-template-columns:1fr;gap:30px}.people-panel{grid-template-columns:1fr}.people-family .people-copy{order:2}.people-family figure{order:1}}
@media(max-width:640px){.roadmap-announcement{margin:0 -18px;font-size:10px}.roadmap-announcement a{display:none}.roadmap-hero{padding:48px 0 76px}.roadmap-hero h1{font-size:44px}.roadmap-hero-copy>p:not(.eyebrow){font-size:16px}.scheduler-showcase{margin:0 -8px 80px;padding:50px 10px 24px;border-radius:22px}.scheduler-frame{overflow-x:hidden}.scheduler-frame img{width:900px;max-width:none;transform:translateX(-170px)}.scheduler-label small,.floating-chip{display:none}.roadmap-value-strip{margin:0 0 80px;grid-template-columns:1fr}.roadmap-value-strip article{border-right:0;border-bottom:1px solid #dfe3e8}.people-story{padding:0 0 90px}.people-panel{border-radius:20px}.people-panel figure{min-height:280px}.people-copy{padding:32px 24px}.template-gallery{margin:0 -18px;padding:80px 18px}.roadmap-section-head{display:block}.template-bento{grid-template-columns:1fr}.featured-template{grid-column:auto;grid-row:auto;min-height:300px}.roadmap-steps{grid-template-columns:1fr}.roadmap-trust{margin:0 0 80px;padding:36px 24px}.roadmap-final-cta{margin:0 0 60px;padding:70px 22px}.roadmap-mini-proof{gap:10px}}

/* Keep every public-page mobile header in the same compact two-row layout. */
@media (max-width: 680px) {
  .nav {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    flex-direction: unset !important;
  }
  .nav .brand > span:last-child { display: none; }
  .nav .nav-links {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    padding: 0 !important;
  }
  .nav .language-picker { display: inline-flex !important; }
  .nav .nav-links > .btn { display: inline-flex !important; }
  .nav.mobile-menu-open .nav-links > a:not(.btn) { display: block !important; }
}


/* Crawlable public browser tools */
.public-tool-seo-page{margin:0;background:#f7f9f8;color:#17221e;font-family:Inter,"Segoe UI",ui-sans-serif,system-ui,-apple-system,sans-serif}
.public-tool-nav{display:flex;align-items:center;justify-content:space-between;max-width:1180px;margin:auto;padding:22px 28px}
.public-tool-nav nav{display:flex;align-items:center;gap:22px}.public-tool-nav nav>a:not(.btn){color:#53635c;font-size:13px;font-weight:750;text-decoration:none}
.public-tool-seo-page .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1px solid #5ca98c;border-radius:12px;background:#5ca98c;color:#fff;text-decoration:none;font-size:13px;font-weight:800;box-shadow:none}
.public-tool-seo-page .eyebrow{margin:0 0 13px;color:#367e64;font-size:11px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
.public-tool-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.65fr);gap:70px;align-items:center;max-width:1124px;margin:0 auto;padding:90px 28px 76px}
.public-tool-hero h1,.public-tools-index-hero h1{max-width:850px;margin:0;font-size:clamp(46px,6.5vw,78px);line-height:1;letter-spacing:-.055em}
.public-tool-hero .lead{max-width:720px;margin:24px 0 0;color:#65736d;font-size:19px;line-height:1.7}
.public-tool-actions{display:flex;align-items:center;gap:18px;margin-top:30px}.public-tool-actions>span{color:#5f7068;font-size:12px;font-weight:700}
.public-tool-hero aside{padding:28px;border:1px solid #dce8e2;border-radius:22px;background:#eef7f2}.public-tool-hero aside strong{font-size:16px}.public-tool-hero aside p{margin:10px 0 0;color:#5d6e66;font-size:13px;line-height:1.7}
.public-tool-details{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1124px;margin:0 auto 26px;padding:0 28px}.public-tool-details article{padding:36px;border:1px solid #e1e7e4;border-radius:22px;background:#fff}.public-tool-details h2{margin:0;font-size:27px;line-height:1.25;letter-spacing:-.025em}.public-tool-details ul{display:grid;gap:13px;margin:0;padding-left:20px;color:#53635c}
.public-tool-cloud{display:flex;align-items:center;justify-content:space-between;gap:30px;max-width:1068px;margin:0 auto 40px;padding:36px 42px;border-radius:22px;background:#17221e;color:#fff}.public-tool-cloud .eyebrow{color:#86c7ad}.public-tool-cloud h2{margin:0;font-size:28px}
.public-tool-footer{display:flex;justify-content:center;gap:26px;padding:30px;color:#75827c;font-size:12px}.public-tool-footer a{color:inherit}
.public-tools-index-hero{max-width:1124px;margin:auto;padding:78px 28px 50px}.public-tools-index-hero>p:not(.eyebrow){max-width:700px;color:#65736d;font-size:18px;line-height:1.7}.public-tools-index-hero aside{display:grid;gap:4px;margin-top:28px;padding:18px 20px;border:1px solid #dce8e2;border-radius:14px;background:#eef7f2}.public-tools-index-hero aside span{color:#5d6e66;font-size:12px;line-height:1.6}
.public-tools-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:1124px;margin:auto;padding:0 28px 70px}.public-tools-grid article{min-height:180px;padding:28px;border:1px solid #e1e7e4;border-radius:20px;background:#fff}.public-tools-grid h2{margin:0}.public-tools-grid h2 a{color:#17221e;text-decoration:none}.public-tools-grid p{color:#65736d;line-height:1.65}.public-tools-grid .text-link{color:#367e64;font-size:13px;font-weight:800;text-decoration:none}
@media(max-width:760px){.public-tool-nav{display:grid;grid-template-columns:1fr auto;gap:13px;padding:16px 18px}.public-tool-nav nav{gap:12px}.public-tool-nav nav>a:first-child{display:none}.public-tool-hero{grid-template-columns:1fr;gap:30px;padding:54px 18px}.public-tool-hero h1,.public-tools-index-hero h1{font-size:44px}.public-tool-actions{align-items:flex-start;flex-direction:column}.public-tool-details,.public-tools-grid{grid-template-columns:1fr;padding-inline:14px}.public-tool-cloud{align-items:flex-start;flex-direction:column;margin-inline:14px;padding:30px}.public-tools-index-hero{padding:50px 18px 36px}}


/* Homepage: local browser tools and cloud workspace choice */
.home-tool-modes{max-width:1180px;margin:0 auto;padding:18px 28px 92px}
.home-tool-modes-heading{max-width:820px;margin-bottom:30px}.home-tool-modes-heading h2{margin:6px 0 14px;color:#18212f;font-size:clamp(34px,4.4vw,54px);line-height:1.07;letter-spacing:-.045em}.home-tool-modes-heading>p:last-child{max-width:750px;margin:0;color:#667085;line-height:1.72}
.home-tool-mode-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:18px}
.home-tool-mode{display:flex;min-width:0;flex-direction:column;padding:clamp(28px,4vw,44px);border:1px solid #dfe6e2;border-radius:26px;background:#fff;box-shadow:0 20px 54px rgba(24,33,47,.07)}
.home-tool-mode.local-mode{background:linear-gradient(145deg,#edf8f3,#fff 62%)}.home-tool-mode.cloud-mode{background:linear-gradient(145deg,#f2f5ff,#fff 66%)}
.mode-label{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;color:#466157;font-size:11px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.mode-label i{width:8px;height:8px;border-radius:50%;background:#5ca98c;box-shadow:0 0 0 5px rgba(92,169,140,.13)}.cloud-mode .mode-label i{background:#6f87c9;box-shadow:0 0 0 5px rgba(111,135,201,.12)}
.home-tool-mode h3{margin:22px 0 10px;color:#18212f;font-size:clamp(27px,3vw,38px);line-height:1.1;letter-spacing:-.035em}.home-tool-mode>p{margin:0;color:#667085;line-height:1.68}.home-tool-mode>ul{display:grid;gap:11px;margin:24px 0 28px;padding:0;list-style:none;color:#4d596c;font-size:14px}.home-tool-mode>ul li:before{content:"✓";margin-right:9px;color:#5ca98c;font-weight:900}
.home-tool-links{display:flex;flex-wrap:wrap;gap:8px;margin:25px 0 28px}.home-tool-links a{padding:9px 11px;border:1px solid #d9e7e0;border-radius:999px;background:rgba(255,255,255,.84);color:#385448;font-size:12px;font-weight:750;text-decoration:none}.home-tool-links a:hover{border-color:#8cbda9;background:#fff}.home-tool-mode>.btn{align-self:flex-start;margin-top:auto}
.solution-page .home-tool-modes{padding-top:70px}.solution-page .home-tool-mode .btn.secondary{border-color:#d9e1ee;background:#fff;color:#344054}
@media(max-width:780px){.home-tool-mode-grid{grid-template-columns:1fr}.home-tool-modes{padding:18px 18px 72px}.solution-page .home-tool-modes{padding-top:52px}.home-tool-mode{border-radius:21px}}


/* Human-centered imagery for the public tool directory and SEO landing pages. */
.public-tools-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}
.public-tools-grid .public-tool-card{
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:flex-end;
  min-height:340px;
  overflow:hidden;
  padding:0;
  border:0;
  background-color:#26342f;
  background-image:var(--tool-image);
  background-position:center;
  background-size:cover;
  box-shadow:0 18px 42px rgba(23,34,30,.14);
  transition:transform .2s ease,box-shadow .2s ease;
}
.public-tools-grid .public-tool-card::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(180deg,rgba(12,20,17,.04) 18%,rgba(12,20,17,.3) 52%,rgba(12,20,17,.92) 100%);
}
.public-tools-grid .public-tool-card:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 52px rgba(23,34,30,.22);
}
.public-tool-card-hit{
  position:absolute;
  z-index:2;
  inset:0;
}
.public-tool-card-copy{
  position:relative;
  z-index:1;
  width:100%;
  padding:28px;
  color:#fff;
}
.public-tools-grid .public-tool-card h2{
  max-width:480px;
  color:#fff;
  font-size:clamp(24px,3vw,34px);
  line-height:1.05;
  letter-spacing:-.035em;
  text-shadow:0 2px 18px rgba(0,0,0,.3);
}
.public-tools-grid .public-tool-card p{
  max-width:520px;
  margin:10px 0 18px;
  color:rgba(255,255,255,.84);
  font-size:14px;
}
.public-tools-grid .public-tool-card .text-link{
  color:#fff;
}
.public-tool-visual-hero{
  position:relative;
  isolation:isolate;
  min-height:540px;
  grid-template-columns:minmax(0,1.1fr) minmax(260px,.55fr);
  align-items:end;
  overflow:hidden;
  margin-top:26px;
  padding:64px;
  border-radius:28px;
  background-color:#26342f;
  background-image:
    linear-gradient(90deg,rgba(12,20,17,.9) 0%,rgba(12,20,17,.62) 48%,rgba(12,20,17,.16) 78%),
    linear-gradient(0deg,rgba(12,20,17,.42),transparent 55%),
    var(--tool-image);
  background-position:center;
  background-size:cover;
  box-shadow:0 28px 70px rgba(23,34,30,.2);
  color:#fff;
}
.public-tool-visual-hero h1{
  color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,.28);
}
.public-tool-visual-hero .eyebrow{
  color:#b6ead6;
}
.public-tool-visual-hero .lead{
  color:rgba(255,255,255,.86);
}
.public-tool-visual-hero .public-tool-actions>span{
  color:rgba(255,255,255,.84);
}
.public-tool-visual-hero aside{
  border-color:rgba(255,255,255,.25);
  background:rgba(13,27,21,.64);
  color:#fff;
  box-shadow:0 16px 34px rgba(0,0,0,.14);
  backdrop-filter:blur(12px);
}
.public-tool-visual-hero aside p{
  color:rgba(255,255,255,.78);
}
@media(max-width:760px){
  .public-tools-grid{grid-template-columns:1fr;gap:14px}
  .public-tools-grid .public-tool-card{min-height:300px}
  .public-tool-visual-hero{
    min-height:570px;
    margin:12px 14px 0;
    padding:34px 24px;
    border-radius:22px;
    background-image:
      linear-gradient(0deg,rgba(12,20,17,.94) 0%,rgba(12,20,17,.58) 62%,rgba(12,20,17,.12) 100%),
      var(--tool-image);
    background-position:center;
  }
  .public-tool-visual-hero aside{align-self:auto}
}


/* Keep public tools visually aligned with the main product page. */
.public-tool-seo-page{
  --tool-ink:#18212f;
  --tool-muted:#667085;
  --tool-line:#e4e8ef;
  --tool-primary:#ef7e31;
  --tool-primary-dark:#b94b0b;
  --tool-primary-soft:#fff0e5;
  background:#fbfcfe;
  color:var(--tool-ink);
}
.public-tool-seo-page .brand,
.public-tool-seo-page h1,
.public-tool-seo-page h2,
.public-tool-seo-page h3{
  color:var(--tool-ink);
}
.public-tool-seo-page p,
.public-tool-seo-page .lead{
  color:var(--tool-muted);
}
.public-tool-seo-page .eyebrow{
  color:var(--tool-primary-dark);
}
.public-tool-seo-page .btn{
  border-color:var(--tool-primary);
  background:var(--tool-primary);
  color:#fff;
  box-shadow:0 10px 24px rgba(239,126,49,.18);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.public-tool-seo-page .btn:hover{
  transform:translateY(-2px);
  border-color:var(--tool-primary-dark);
  background:var(--tool-primary-dark);
  box-shadow:0 14px 30px rgba(239,126,49,.25);
}
.public-tool-seo-page .btn.secondary{
  border-color:var(--tool-line);
  background:#fff;
  color:var(--tool-ink);
  box-shadow:none;
}
.public-tool-seo-page .text-link,
.public-tool-seo-page .public-tool-nav nav>a:not(.btn),
.public-tool-seo-page .public-tool-footer a{
  color:var(--tool-primary-dark);
}
.public-tools-index-hero aside{
  border-color:#f2cfb4;
  background:var(--tool-primary-soft);
}
.public-tools-index-hero aside strong{
  color:var(--tool-primary-dark);
}
.public-tool-details article{
  border-color:var(--tool-line);
}
.public-tool-cloud .btn{
  color:#fff;
}
.public-tools-grid .public-tool-card h2,
.public-tools-grid .public-tool-card p,
.public-tools-grid .public-tool-card .text-link,
.public-tool-visual-hero h1,
.public-tool-visual-hero .lead{
  color:#fff;
}
.public-tool-visual-hero .eyebrow{
  color:#ffd1b2;
}
.public-tool-visual-hero .btn{
  border-color:var(--tool-primary);
  background:var(--tool-primary);
}


.public-tool-related{box-sizing:border-box;width:calc(100% - 56px);max-width:1068px;margin:22px auto;padding:20px;border:1px solid #e7ebf0;border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(24,33,47,.06);overflow:hidden}
.public-tool-related nav{display:flex;flex-wrap:wrap;gap:10px;min-width:0}
.public-tool-related nav a{box-sizing:border-box;max-width:100%;padding:9px 12px;border:1px solid #f2c7a7;border-radius:999px;color:var(--tool-primary-dark,#b94b0b);background:var(--tool-primary-soft,#fff0e5);font-weight:700;text-decoration:none;white-space:normal;overflow-wrap:anywhere}
.public-tool-related nav a:hover{border-color:var(--tool-primary,#ef7e31);background:#fff}
@media(max-width:760px){.public-tool-related{width:calc(100% - 28px);margin:18px auto;padding:16px}}


/* Homepage pricing overview */
.pricing-overview {
  max-width: 1124px;
  margin: 0 auto 88px;
  padding: 0 28px;
}
.pricing-overview-heading {
  max-width: 760px;
  margin-bottom: 24px;
}
.pricing-overview-heading h2 {
  margin: 6px 0 12px;
  color: #18212f;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: -.04em;
}
.pricing-overview-heading p:last-child {
  margin: 0;
  color: #667085;
  line-height: 1.7;
}
.pricing-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.pricing-overview-card {
  min-width: 0;
  padding: 26px;
  border: 1px solid #e4e8ef;
  border-radius: 22px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 46px rgba(24,33,47,.07);
}
.pricing-overview-card.is-cloud-free {
  border-color: #f2cfb4;
  background: linear-gradient(180deg,#fff8f3 0%,#fff 100%);
}
.pricing-overview-card .pricing-label {
  display: inline-block;
  margin-bottom: 14px;
  color: #b94b0b;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pricing-overview-card h3 {
  margin: 0 0 10px;
  color: #18212f;
  font-size: 23px;
  letter-spacing: -.025em;
}
.pricing-overview-card p {
  margin: 0;
  color: #667085;
  line-height: 1.65;
}
.pricing-overview-card strong {
  color: #18212f;
}
@media (max-width: 820px) {
  .pricing-overview-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pricing-overview { margin-bottom: 64px; padding: 0 18px; }
  .pricing-overview-card { padding: 22px; border-radius: 18px; }
}

/* Public product answers: readable in both languages. */
.product-questions { max-width: 1000px; margin-inline: auto; }
.product-questions h3 { margin: 28px 0 8px; font-size: 20px; }
.product-questions p { max-width: 78ch; line-height: 1.7; }
.guide-shot img { display: block; width: 100%; height: auto; }

.pricing-page h1 { max-width: 900px; font-size: clamp(32px, 4vw, 52px); line-height: 1.12; letter-spacing: -.035em; overflow-wrap: anywhere; }
.pricing-page .pricing-overview-grid { margin-top: 28px; align-items: stretch; }
.pricing-page .guide-main > .solution-section { padding-block: 36px; }
.pricing-page .pricing-overview-card p { line-height: 1.7; }
.pricing-page .nav { position: relative; }
.pricing-page .guide-table-scroll { max-width: 100%; }


/* Keep the app login and Try Now adjacent outside the collapsible menu. */
.nav.home-nav { gap: 18px; }
.nav.home-nav .nav-links { flex: 1; justify-content: flex-end; min-width: 0; }
.nav.home-nav .home-nav-actions { display: flex; align-items: center; flex: 0 0 auto; gap: 12px; }
.nav.home-nav .home-nav-actions > a { min-height: 44px; box-sizing: border-box; }
.nav.home-nav .app-login-link {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; gap: 9px; min-height: 44px; padding: 0 18px;
  border: 1px solid #2f8f72; border-radius: 12px;
  background: #2f8f72; color: #fff; font-size: 14px; font-weight: 750;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 5px 14px rgba(47,143,114,.16);
}
.nav.home-nav .app-login-link:hover { background: #256f5b; border-color: #256f5b; }
.nav.home-nav .app-login-link:focus-visible { outline: 3px solid #256f5b; outline-offset: 3px; }
.app-login-label-mobile { display: none; }
@media (max-width: 900px) {
  .nav.home-nav {
    display: grid !important; grid-template-columns: minmax(0,1fr) auto !important;
    align-items: center !important; gap: 10px 8px; padding: 12px 16px !important;
  }
  .nav.home-nav > .brand { grid-column: 1; grid-row: 1; min-width: 0; }
  .nav.home-nav > .mobile-menu-button {
    display: inline-flex; grid-column: 2; grid-row: 1;
    align-items: center; justify-content: center; gap: 7px;
    min-height: 44px; padding: 0 11px;
    border: 1px solid var(--line); border-radius: 9px;
    background: #fff; color: #18212f; font: inherit; font-size: 12px;
  }
  .nav.home-nav > .mobile-menu-button > span { display: grid; gap: 3px; width: 14px; }
  .nav.home-nav > .mobile-menu-button i { display: block; width: 14px; height: 1.5px; border-radius: 2px; background: currentColor; }
  .nav.home-nav .home-nav-actions { grid-column: 1 / -1; grid-row: 2; justify-content: flex-end; }
  .nav.home-nav .nav-links {
    display: none !important; grid-column: 1 / -1 !important; grid-row: 3;
    flex-wrap: wrap; justify-content: flex-end; gap: 10px;
    width: 100% !important; padding: 0 !important;
  }
  .nav.home-nav.mobile-menu-open .nav-links { display: flex !important; }
  .nav.home-nav.mobile-menu-open .nav-links > a { display: block !important; width: 100%; padding: 10px 4px; border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .nav.home-nav .app-login-link { gap: 7px; font-size: 13px; padding-inline: 13px; }
  .nav.home-nav .app-login-label { display: none; }
  .nav.home-nav .app-login-label-mobile { display: inline; }
}

/* Center the homepage feature request introduction and embedded form. */
#feature-requests .solution-section-head {
  margin-inline: auto;
  text-align: center;
}
#feature-requests .solution-section-head > p,
#feature-requests h2 {
  margin-inline: auto;
}
#feature-request-form {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  text-align: left;
}
#feature-request-form > .airties-ai-crm-contact-form-host {
  display: block;
  width: 100%;
}