@font-face {
  font-family:NeueMontreal;
  src:url('assets/font-trial/PPNeueMontreal-Regular.otf') format('opentype');
  font-weight:400;
  font-display:swap
}

@font-face {
  font-family:NeueMontreal;
  src:url('assets/font-trial/PPNeueMontreal-Semibold.otf') format('opentype');
  font-weight:600;
  font-display:swap
}
@font-face {
  font-family:DMFallback;
  src:url('assets/dm-sans-latin.woff2') format('woff2');
  font-display:swap
}
@font-face {
  font-family:LoraFallback;
  src:url('assets/lora-latin.woff2') format('woff2');
  font-display:swap
}

:root {
  --cream:#f7f3e8;
  --ink-blue:#172b50;
  --chartreuse:#d9eb62;
  --powder-blue:#c8daee;
  --warm-cream:#eee7d8;
  --pale-periwinkle:#e1e6f2;
  --yellow:var(--cream);
  --ink:var(--ink-blue);
  --blue:var(--powder-blue);
  --peach:var(--warm-cream);
  --lavender:var(--pale-periwinkle);
  --paper:var(--cream);
  --line:#ded8c9;
  --serif:'LoraFallback',Georgia,serif;
  --sans:'NeueMontreal','DMFallback',Arial,sans-serif;
  --brand-sans:'DMFallback',Arial,sans-serif;
  --content:1152px
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:88px
}
body {
  margin:0;
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  font-synthesis:none
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit;
  color:inherit
}
.skip-link {
  position:absolute;
  top:-60px;
  left:16px;
  z-index:30;
  background:white;
  padding:12px 18px;
  border-radius:8px
}
.skip-link:focus {
  top:12px
}
.announcement {
  height:40px;
  background:var(--blue);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  font-size:12px;
  font-weight:500
}
.announcement a {
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px
}
.site-header {
  height:72px;
  position:sticky;
  z-index:20;
  top:0;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 max(5vw,28px);
  border-radius:0 0 12px 12px;
  box-shadow:0 1px 0 rgba(20,33,39,.06)
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--brand-sans);
  font-size:20px;
  font-weight:600;
  letter-spacing:-.055em;
  white-space:nowrap
}
.brand-logo { display:block; width:164px; height:auto; }
.footer-brand .brand-logo { width:188px; }
.brand-light {
  font-weight:400
}
.brand-mark {
  display:grid;
  grid-template-columns:repeat(2,7px);
  grid-template-rows:repeat(2,7px);
  gap:2px;
  transform:rotate(-8deg)
}
.brand-mark i {
  display:block;
  background:var(--ink);
  border-radius:3px 3px 1px 3px
}
.brand-mark i:nth-child(2) {
  opacity:.72
}
.brand-mark i:nth-child(3) {
  opacity:.5
}
.brand-mark i:nth-child(4) {
  opacity:.86
}
.desktop-nav {
  display:flex;
  height:100%;
  align-items:center;
  gap:34px
}
.nav-item {
  height:100%;
  display:flex;
  align-items:center;
  position:relative
}
.nav-trigger,.nav-link {
  font-size:13px;
  font-weight:500;
  border:0;
  background:none;
  padding:14px 0;
  cursor:pointer
}
.nav-trigger span {
  margin-left:4px;
  font-size:15px
}
.nav-trigger:hover,.nav-link:hover,.login-link:hover {
  opacity:.63
}
.nav-menu {
  display:none;
  position:absolute;
  top:62px;
  left:-22px;
  width:305px;
  background:#fff;
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 18px 48px #1421271c
}
.nav-menu.open {
  display:grid;
  gap:3px
}
.nav-menu-right {
  left:auto;
  right:-18px
}
.nav-menu a {
  padding:13px 12px;
  border-radius:9px
}
.nav-menu a:hover {
  background:#f8f6f1
}
.nav-menu b {
  display:block;
  font-size:13px;
  font-weight:600
}
.nav-menu small {
  display:block;
  color:#727777;
  font-size:11px;
  margin-top:4px;
  line-height:1.4
}
.header-actions {
  display:flex;
  align-items:center;
  gap:23px
}
.login-link {
  font-size:13px
}
.button {
  height:52px;
  padding:0 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  transition:transform .2s,background .2s;
  white-space:nowrap
}
.button:hover {
  transform:translateY(-2px)
}
.button-dark {
  background:var(--ink);
  color:#fff
}
.button-dark:hover {
  background:#263a40
}
.button-small {
  height:42px;
  padding:0 18px;
  font-size:12px
}
.button-outline {
  border:1px solid #14212755;
  background:transparent
}
.button-outline:hover {
  background:#fff7
}
.button-yellow {
  background:var(--yellow);
  color:var(--ink)
}
.mobile-toggle,.mobile-menu {
  display:none
}

.hero {
  position:relative;
  background:var(--yellow);
  min-height:1190px;
  overflow:visible;
  padding:135px 24px 0;
  text-align:center
}
.hero-content {
  max-width:1040px;
  margin:0 auto;
  position:relative;
  z-index:1
}
.hero-flight { position:absolute; z-index:0; top:0; left:0; width:100%; overflow:hidden; pointer-events:none; }
.hero-flight svg { display:block; width:100%; height:100%; overflow:visible; }
.flight-trail { fill:none; stroke:#7d91b3; stroke-width:1.5; stroke-dasharray:1 8; stroke-linecap:round; opacity:.52; }
.flight-trail-alt { stroke:#9aadd0; opacity:.4; }
.flight-trail-third { stroke:#879ac0; opacity:.34; }
.flight-route { fill:none; stroke:none; visibility:hidden; }
.paper-plane { color:var(--ink-blue); opacity:.88; transform-origin:0 0; }
.paper-plane-alt { color:#607da9; opacity:.72; }
.paper-plane-third { color:#607da9; opacity:.68; }
.plane-wing { stroke:currentColor; stroke-width:.8; stroke-linejoin:round; }
.plane-wing-near { fill:#e1e6f2; }
.plane-wing-far { fill:#c8daee; }
.paper-plane-alt .plane-wing-near { fill:#d9eb62; }
.paper-plane-alt .plane-wing-far { fill:#c8daee; }
.plane-fold { fill:none; stroke:#172b50b8; stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round; }
.plane-fold-shadow { fill:#607da9; stroke:none; opacity:.96; }
.flight-control { position:absolute; z-index:2; top:14px; right:max(18px,calc((100vw - 1200px)/2)); display:inline-flex; align-items:center; gap:7px; min-height:30px; padding:0 10px; border:1px solid #172b5030; border-radius:8px; background:#f7f3e8dd; color:var(--ink-blue); font:500 12px/1 var(--sans); cursor:pointer; }
.flight-control:hover { background:var(--chartreuse); }
.flight-control:focus-visible { outline:3px solid var(--ink-blue); outline-offset:3px; }
.eyebrow {
  margin:0 0 17px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.025em
}
.hero h1 {
  font:400 clamp(50px,5.2vw,70px)/.99 var(--serif);
  letter-spacing:-.05em;
  margin:0 auto;
  max-width:850px
}
.hero h1 span {
  white-space:nowrap
}
.hero-copy {
  max-width:640px;
  margin:22px auto 0;
  font-size:20px;
  line-height:1.42;
  letter-spacing:-.012em
}
.hero-actions {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:11px;
  margin-top:26px
}
.hero-note {
  font-size:11px;
  margin:13px 0 0;
  color:#454a3d
}
.play-icon {
  font-size:9px;
  width:20px;
  height:20px;
  border:1px solid #14212755;
  border-radius:50%;
  display:grid;
  place-items:center;
  padding-left:2px
}
.hero-stage {
  position:relative;
  z-index:2;
  max-width:1120px;
  margin:137px auto 0
}
.stage-tabs {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:7px;
  padding:0 12px 16px
}
.stage-tabs button {
  border:1px solid transparent;
  background:transparent;
  border-radius:999px;
  padding:11px 17px;
  font-size:12px;
  cursor:pointer;
  white-space:nowrap
}
.stage-tabs button[aria-selected="true"] {
  background:#fff;
  border-color:#fff;
  box-shadow:0 2px 7px #14212713
}
.workspace {
  min-height:470px;
  background:#fff;
  text-align:left;
  border-radius:23px 23px 0 0;
  box-shadow:0 16px 50px #1421271b;
  display:grid;
  grid-template-columns:210px 1fr;
  overflow:hidden
}
.workspace-sidebar {
  padding:26px 15px 12px 21px;
  border-right:1px solid #eeece8;
  display:flex;
  flex-direction:column
}
.ws-logo {
  font-weight:600;
  font-size:13px;
  letter-spacing:-.03em;
  margin-bottom:32px
}
.mini-mark {
  color:#d58c75;
  font-size:18px;
  margin-right:6px
}
.ws-space-label {
  font-size:8px;
  letter-spacing:.11em;
  color:#9a9b99;
  margin:0 0 11px 8px
}
.ws-nav {
  height:34px;
  border-radius:7px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 9px;
  font-size:11px;
  color:#797d7c;
  margin-bottom:3px
}
.ws-nav.active {
  background:#f7f2e9;
  color:var(--ink);
  font-weight:600
}
.ws-nav b {
  margin-left:auto;
  font-size:9px;
  background:#fff;
  border-radius:9px;
  padding:3px 6px;
  font-weight:500
}
.ws-nav .count-soft {
  background:#eee9f7
}
.ws-sidebar-bottom {
  margin-top:auto;
  border-top:1px solid #eeece8;
  padding-top:13px;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:9px
}
.avatar {
  width:25px;
  height:25px;
  border-radius:50%;
  display:inline-grid;
  place-items:center;
  font-size:8px;
  font-weight:600;
  flex:none
}
.avatar-indigo {
  background:#ded8f2;
  color:#514e72
}
.avatar-rose {
  background:#f5dacf;
  color:#895f54
}
.avatar-blue {
  background:#d9e8f6;
  color:#426486
}
.dots {
  margin-left:auto;
  letter-spacing:1px
}
.workspace-main {
  padding:28px 32px 15px;
  min-width:0
}
.ws-top {
  display:flex;
  align-items:center;
  justify-content:space-between
}
.ws-greeting {
  font-size:19px;
  font-weight:500;
  letter-spacing:-.045em
}
.ws-date {
  font-size:10px;
  color:#878b88;
  margin-top:5px
}
.ws-create {
  background:var(--ink);
  color:white;
  border:0;
  border-radius:7px;
  height:30px;
  padding:0 12px;
  font-size:10px
}
.ws-metrics {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:24px 0 16px
}
.ws-metrics>div {
  border:1px solid #eeece8;
  border-radius:8px;
  padding:12px
}
.ws-metrics span,.metric-note {
  font-size:9px;
  color:#818580;
  display:block
}
.ws-metrics strong {
  font-size:21px;
  font-weight:500;
  display:block;
  margin:5px 0 2px;
  letter-spacing:-.05em
}
.metric-note {
  font-size:8px
}
.ws-columns {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:12px
}
.ws-card {
  border:1px solid #eeece8;
  border-radius:8px;
  padding:13px 14px;
  min-width:0
}
.ws-card-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:9px
}
.ws-card-title strong {
  font-size:11px;
  font-weight:600
}
.ws-card-title a {
  font-size:9px;
  color:#727777
}
.project-row {
  min-height:54px;
  border-top:1px solid #f2f0ec;
  display:flex;
  align-items:center;
  gap:8px
}
.project-icon {
  width:27px;
  height:27px;
  border-radius:7px;
  display:grid;
  place-items:center;
  font-size:14px
}
.peach {
  background:#f7e9df
}
.lavender {
  background:#eee9fa
}
.blue {
  background:#e5eff8
}
.project-info {
  display:flex;
  flex-direction:column;
  min-width:0;
  gap:3px
}
.project-info strong {
  font-size:9px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.project-info span {
  font-size:8px;
  color:#898d8a
}
.status {
  margin-left:auto;
  padding:5px 7px;
  border-radius:20px;
  font-size:7px;
  white-space:nowrap
}
.status-progress {
  background:#f9eee7;
  color:#a36c55
}
.status-review {
  background:#eeeafa;
  color:#6c648e
}
.status-upcoming {
  background:#edf2f4;
  color:#6b7d83
}
.calendar-date {
  font-size:8px;
  color:#8b8c89;
  letter-spacing:.08em
}
.next-date {
  display:flex;
  align-items:center;
  gap:8px;
  border-bottom:1px solid #f0eeea;
  padding-bottom:10px
}
.next-date b {
  font-size:25px;
  font-weight:400;
  letter-spacing:-.06em
}
.next-date span {
  font-size:7px;
  line-height:1.35;
  color:#898d8a
}
.next-event {
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:11px
}
.event-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#d99578;
  margin-top:4px;
  flex:none
}
.event-dot-blue {
  background:#829fc3
}
.next-event div {
  display:flex;
  flex-direction:column;
  gap:3px
}
.next-event strong {
  font-size:8px;
  font-weight:500
}
.next-event small {
  font-size:7px;
  color:#8c8f8c
}
.workspace-footer {
  display:flex;
  justify-content:space-between;
  font-size:8px;
  color:#9b9e9a;
  margin-top:12px
}
.sync-dot {
  color:#789c79
}
.sync-dot span {
  color:#8b8e8a
}

.section-pad {
  padding:120px 24px
}
.section-inner {
  max-width:var(--content);
  margin:0 auto
}
.intro {
  padding-top:125px;
  padding-bottom:110px;
  background:#fff
}
.intro-inner {
  text-align:center;
  max-width:850px
}
.intro h2,.story-copy h2,.statement-grid h2,.dark-intro h2,.business-heading h2,.connections-copy h2,.proof-copy h2,.pricing-tease h2,.faq-grid h2,.payments-copy h2 {
  font:400 clamp(38px,4vw,53px)/1.04 var(--serif);
  letter-spacing:-.045em;
  margin:0
}
.intro h2 em,.closing-content h2 em {
  font-weight:400
}
.intro-copy {
  font-size:17px;
  line-height:1.6;
  max-width:650px;
  margin:24px auto 0;
  color:#525957
}
.story-kicker {
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  font-weight:600;
  margin-bottom:22px
}
.kicker-dot {
  width:9px;
  height:9px;
  border-radius:50%;
  display:inline-block
}
.peach-dot {
  background:#df9b80
}
.purple-dot {
  background:#9a8bc6
}
.blue-dot {
  background:#779ac7
}
.yellow-dot {
  background:#e1d727
}
.feature-story {
  padding:105px 24px
}
.feature-story-peach {
  background:var(--peach)
}
.feature-story-white {
  background:#fff
}
.split-story {
  max-width:var(--content);
  margin:0 auto;
  display:grid;
  grid-template-columns:.88fr 1.12fr;
  align-items:center;
  gap:80px
}
.split-story.reverse {
  grid-template-columns:1.12fr .88fr
}
.split-story.reverse .story-copy {
  grid-column:2;
  grid-row:1
}
.split-story.reverse .mock-panel {
  grid-column:1;
  grid-row:1
}
.story-copy h2 {
  max-width:460px;
  font-size:46px
}
.story-copy p,.statement-body p,.dark-intro p,.connections-copy p,.proof-copy p,.payments-copy p {
  font-size:15px;
  line-height:1.62;
  color:#555b59;
  max-width:445px;
  margin:19px 0 22px
}
.feature-pills {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:22px 0 25px
}
.feature-pills span,.connection-pills span {
  padding:8px 12px;
  background:#ffffffa8;
  border-radius:30px;
  font-size:10px;
  font-weight:500
}
.text-link {
  font-size:12px;
  font-weight:600;
  border-bottom:1px solid #14212766;
  padding-bottom:4px
}
.text-link span {
  margin-left:6px
}
.mock-panel {
  position:relative;
  background:#fff;
  border-radius:17px;
  box-shadow:0 20px 65px #542e1b17;
  overflow:hidden;
  min-height:440px
}
.onboarding-panel {
  padding:25px 28px 22px
}
.mock-topline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:17px;
  border-bottom:1px solid #eeeae5
}
.mock-brand {
  font-size:10px;
  font-weight:600
}
.mock-mark {
  color:#d38a74;
  font-size:15px;
  margin-right:4px
}
.portal-tag {
  font-size:7px;
  letter-spacing:.12em;
  color:#8e918e
}
.onboard-body {
  max-width:435px;
  margin:25px auto 0
}
.mock-welcome small,.delivery-head small {
  font-size:7px;
  letter-spacing:.1em;
  color:#a17869
}
.mock-welcome h3 {
  font:400 26px/1.1 var(--serif);
  letter-spacing:-.04em;
  margin:7px 0
}
.mock-welcome p {
  font-size:9px;
  color:#777e7a;
  margin:0 0 19px
}
.progress-label {
  display:flex;
  justify-content:space-between;
  font-size:8px;
  margin-bottom:7px
}
.progress-label b {
  font-weight:500;
  color:#777e7a
}
.progress-track {
  height:5px;
  background:#eeeae5;
  border-radius:5px;
  overflow:hidden
}
.progress-track i {
  display:block;
  height:100%;
  width:51%;
  border-radius:5px;
  background:#c88770
}
.check-item {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 3px;
  border-bottom:1px solid #f0eeea
}
.check-item>span:nth-child(2) {
  display:flex;
  flex-direction:column;
  gap:3px
}
.check-item b {
  font-size:9px;
  font-weight:500
}
.check-item small {
  font-size:8px;
  color:#929590
}
.check-mark,.empty-check {
  width:16px;
  height:16px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:9px;
  flex:none
}
.check-mark {
  background:#e1eddf;
  color:#658167
}
.empty-check {
  border:1px solid #d7d7d2
}
.file-kind {
  margin-left:auto;
  font-size:6px;
  letter-spacing:.08em;
  color:#829481
}
.arrow-small {
  margin-left:auto;
  color:#858a85;
  font-size:12px
}
.illustrative-badge {
  position:absolute;
  right:15px;
  bottom:10px;
  font-size:7px;
  color:#989b98;
  background:#ffffffdc;
  padding:4px 7px;
  border-radius:10px
}
.delivery-panel {
  padding:25px 28px 22px;
  min-height:450px
}
.delivery-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start
}
.delivery-head h3 {
  font:400 24px/1.1 var(--serif);
  margin:7px 0 5px;
  letter-spacing:-.04em
}
.delivery-head p {
  font-size:8px;
  color:#858a86;
  margin:0
}
.delivery-head p span {
  padding:0 4px
}
.collaborators {
  display:flex;
  align-items:center
}
.collaborators .avatar+.avatar {
  margin-left:-6px;
  border:2px solid white
}
.collaborators button {
  border:1px solid #e7e5df;
  background:#fff;
  border-radius:20px;
  font-size:8px;
  padding:6px 10px;
  margin-left:8px
}
.delivery-tabs {
  display:flex;
  gap:22px;
  border-bottom:1px solid #eeeae5;
  margin-top:22px;
  padding-bottom:10px;
  font-size:8px;
  color:#888c88
}
.delivery-tabs .selected {
  color:var(--ink);
  font-weight:600;
  border-bottom:2px solid #ba9079;
  margin-bottom:-12px;
  padding-bottom:10px
}
.delivery-tabs b {
  font-size:7px;
  background:#f0ede8;
  border-radius:8px;
  padding:2px 5px
}
.delivery-tabs .unread {
  background:#eee9fa;
  color:#665b8c
}
.delivery-progress {
  padding:18px 2px 14px
}
.delivery-progress-title {
  display:flex;
  justify-content:space-between;
  font-size:9px;
  margin-bottom:8px
}
.delivery-progress-title b {
  font-weight:600
}
.delivery-progress-title span {
  font-size:8px;
  color:#878d88
}
.milestone-line {
  display:flex;
  justify-content:space-between;
  position:relative;
  margin-top:18px
}
.milestone-line:before {
  content:"";
  position:absolute;
  top:8px;
  height:1px;
  background:#e8e5df;
  left:9px;
  right:9px
}
.mile {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:5px;
  font-size:7px;
  color:#90938f;
  background:#fff;
  padding-right:5px
}
.mile i {
  font-style:normal;
  width:17px;
  height:17px;
  border:1px solid #dedbd6;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:7px;
  background:#fff
}
.mile.done i {
  background:#e5eee2;
  border-color:#e5eee2;
  color:#72886f
}
.mile.current {
  color:var(--ink);
  font-weight:600
}
.mile.current i {
  background:#ded7f0;
  border-color:#ded7f0;
  color:#64588b
}
.task-list {
  border-top:1px solid #eeeae5;
  padding-top:12px
}
.task-head {
  display:flex;
  justify-content:space-between;
  margin-bottom:6px
}
.task-head b {
  font-size:9px
}
.task-head a {
  font-size:8px;
  color:#7b817d
}
.task-row {
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 0;
  border-top:1px solid #f3f1ee
}
.task-checkbox {
  width:14px;
  height:14px;
  border:1px solid #ddd9d2;
  border-radius:4px;
  display:grid;
  place-items:center;
  font-size:8px
}
.done-check {
  background:#e4eee1;
  color:#66856c;
  border-color:#e4eee1
}
.task-label {
  font-size:8px
}
.completed-task {
  text-decoration:line-through;
  color:#999d98
}
.task-row small {
  margin-left:auto;
  font-size:6px;
  color:#9b9d99;
  letter-spacing:.04em
}
.task-row .due-soon {
  color:#b67a61
}
.soft-statement {
  background:#edf2f8;
  padding:108px 24px 115px
}
.statement-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:end;
  gap:22px 80px
}
.statement-grid h2 {
  max-width:500px
}
.statement-body p {
  margin:0 0 17px
}
.statement-body .text-link {
  display:inline-block
}
.portal-mock {
  grid-column:1/-1;
  margin-top:25px;
  border-radius:17px;
  background:#fff;
  min-height:390px;
  display:grid;
  grid-template-columns:230px 1fr;
  overflow:hidden;
  box-shadow:0 18px 55px #273c5017;
  position:relative
}
.portal-sidebar {
  padding:25px 18px;
  border-right:1px solid #efeeeb;
  display:flex;
  flex-direction:column
}
.portal-logo {
  font-size:11px;
  font-weight:600;
  margin-bottom:39px
}
.portal-logo span {
  color:#d28974
}
.portal-sidebar>small {
  font-size:7px;
  letter-spacing:.1em;
  color:#969a96;
  margin:0 0 12px 6px
}
.portal-project {
  display:flex;
  align-items:center;
  gap:9px;
  padding:11px 7px;
  border-radius:8px;
  font-size:9px;
  margin-bottom:4px;
  position:relative
}
.portal-project.active {
  background:#f7f2e9
}
.portal-project>span:nth-child(2) {
  display:flex;
  flex-direction:column;
  gap:3px
}
.portal-project small {
  font-size:7px;
  color:#8e928f
}
.portal-project-icon {
  width:24px;
  height:24px;
  background:#f4e5dc;
  border-radius:6px;
  display:grid;
  place-items:center;
  color:#9c725d
}
.lavender-icon {
  background:#eeeaf7;
  color:#766c9c
}
.portal-project>i {
  position:absolute;
  width:5px;
  height:5px;
  background:#d99277;
  right:8px;
  border-radius:50%
}
.portal-sidebar-foot {
  margin-top:auto;
  border-top:1px solid #efeeeb;
  padding-top:13px;
  display:flex;
  align-items:center;
  gap:7px;
  font-size:8px
}
.portal-content {
  padding:23px 30px;
  position:relative
}
.portal-top {
  display:flex;
  justify-content:space-between;
  font-size:7px;
  color:#949893;
  letter-spacing:.04em
}
.portal-help {
  letter-spacing:0
}
.portal-help b {
  color:#696e69;
  font-weight:500;
  text-decoration:underline
}
.portal-greeting {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:32px 0 24px
}
.portal-greeting small,.portal-next-card small {
  font-size:7px;
  letter-spacing:.1em;
  color:#a08676
}
.portal-greeting h3 {
  font:400 26px/1.1 var(--serif);
  margin:7px 0
}
.portal-greeting p {
  font-size:9px;
  color:#7e847f;
  margin:0
}
.portal-progress-ring {
  width:58px;
  height:58px;
  border-radius:50%;
  border:5px solid #eee9f8;
  border-top-color:#9687bc;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center
}
.portal-progress-ring b {
  font-size:11px;
  font-weight:600
}
.portal-progress-ring small {
  font-size:6px;
  color:#828681
}
.portal-next-card {
  display:flex;
  align-items:center;
  gap:13px;
  padding:15px;
  background:#f8f4ec;
  border-radius:10px
}
.next-card-icon {
  width:31px;
  height:31px;
  background:#fff;
  border-radius:8px;
  display:grid;
  place-items:center;
  color:#b78369
}
.portal-next-card>div {
  display:flex;
  flex-direction:column;
  gap:4px
}
.portal-next-card>div>b {
  font-size:10px;
  font-weight:600
}
.portal-next-card p {
  font-size:8px;
  color:#7e837f;
  margin:0
}
.portal-next-card button {
  margin-left:auto;
  border:0;
  background:var(--ink);
  color:#fff;
  border-radius:20px;
  padding:8px 12px;
  font-size:7px
}
.portal-bottom-cards {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:11px;
  margin-top:13px
}
.portal-bottom-cards>div {
  border:1px solid #eeece8;
  border-radius:8px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:7px
}
.portal-bottom-cards small {
  font-size:6px;
  color:#9a9b97;
  letter-spacing:.09em
}
.portal-bottom-cards b {
  font-size:8px;
  font-weight:500
}
.portal-bottom-cards span {
  font-size:7px;
  color:#929691
}
.dark-workflow {
  background:var(--ink);
  color:#fff;
  padding:115px 24px
}
.dark-grid {
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:100px;
  align-items:center
}
.dark-intro h2 {
  max-width:390px
}
.dark-intro p {
  color:#bec4c3;
  max-width:360px
}
.dark-intro .button {
  margin-top:10px
}
.dark-workflow .story-kicker {
  color:#eef0e8
}
.workflow-demo {
  min-width:0
}
.workflow-tabs {
  display:flex;
  gap:8px;
  margin-bottom:12px
}
.workflow-tabs button {
  border:1px solid #ffffff35;
  background:transparent;
  color:#d5dcda;
  border-radius:25px;
  padding:9px 17px;
  font-size:9px;
  cursor:pointer
}
.workflow-tabs button[aria-pressed="true"] {
  background:var(--yellow);
  border-color:var(--yellow);
  color:var(--ink);
  font-weight:600
}
.workflow-window {
  background:#f9f8f5;
  color:var(--ink);
  border-radius:13px;
  overflow:hidden;
  min-height:320px
}
.workflow-window-head {
  height:36px;
  padding:0 13px;
  display:flex;
  align-items:center;
  gap:12px;
  border-bottom:1px solid #eeece8
}
.window-dots {
  display:flex;
  gap:4px
}
.window-dots i {
  width:6px;
  height:6px;
  background:#d9d7d2;
  border-radius:50%
}
.workflow-file {
  font-size:8px;
  color:#828782
}
.workflow-save {
  margin-left:auto;
  font-size:7px;
  color:#7c967d
}
.workflow-content {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  min-height:284px
}
.flow-steps {
  padding:20px 13px;
  border-right:1px solid #eeece8
}
.flow-step {
  display:flex;
  align-items:center;
  gap:8px;
  padding:11px 8px;
  border-radius:7px;
  color:#777c78
}
.flow-step.active-step {
  background:#f2edf9;
  color:var(--ink)
}
.flow-step>i {
  width:19px;
  height:19px;
  border:1px solid #dedbd6;
  border-radius:50%;
  font-style:normal;
  display:grid;
  place-items:center;
  font-size:7px;
  flex:none
}
.flow-step.active-step>i {
  background:#ded6f0;
  border:0;
  color:#64598a
}
.flow-step>span {
  display:flex;
  flex-direction:column;
  gap:4px
}
.flow-step b {
  font-size:8px;
  font-weight:600
}
.flow-step small {
  font-size:7px;
  color:#929692
}
.flow-step em {
  margin-left:auto;
  font-style:normal;
  font-size:8px;
  color:#788f72
}
.flow-preview {
  padding:22px 25px;
  position:relative
}
.flow-preview-icon {
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  background:#f4e5db;
  border-radius:7px;
  color:#a17460
}
.flow-preview>small {
  display:block;
  font-size:6px;
  letter-spacing:.1em;
  color:#9b8274;
  margin-top:16px
}
.flow-preview h3 {
  font:400 21px/1.12 var(--serif);
  letter-spacing:-.035em;
  margin:7px 0
}
.flow-preview p {
  font-size:8px;
  color:#7c827e;
  line-height:1.5;
  margin:0;
  max-width:260px
}
.preview-input {
  margin-top:13px;
  border:1px solid #e6e3dd;
  border-radius:6px;
  padding:9px;
  font-size:7px;
  color:#a4a6a1
}
.preview-button {
  position:absolute;
  bottom:19px;
  right:22px;
  background:var(--ink);
  color:#fff;
  padding:8px 12px;
  border-radius:20px;
  font-size:7px
}
.preview-button i {
  font-style:normal;
  margin-left:6px
}
.workflow-caption {
  text-align:right;
  font-size:7px;
  color:#aeb6b4;
  margin:8px 2px 0
}
.business-types {
  background:#fff;
  padding-top:123px;
  padding-bottom:120px
}
.business-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:35px
}
.business-heading h2 {
  font-size:46px
}
.business-heading>p {
  max-width:270px;
  font-size:13px;
  line-height:1.55;
  color:#6a706d;
  margin:0 0 4px
}
.business-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px
}
.business-card {
  display:block
}
.business-image {
  height:290px;
  position:relative;
  overflow:hidden;
  background:var(--peach);
  border-radius:7px
}
.business-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s
}
.business-card:hover .business-image img {
  transform:scale(1.03)
}
.business-index {
  position:absolute;
  right:12px;
  top:12px;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#fff;
  display:grid;
  place-items:center;
  font-size:9px
}
.business-card-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:17px
}
.business-card h3 {
  font:400 24px/1 var(--serif);
  margin:0
}
.business-card-bottom>span {
  font-size:13px
}
.business-card>p {
  font-size:10px;
  color:#727875;
  margin:8px 0 0
}
.image-note {
  font-size:9px;
  color:#929692;
  margin-top:21px
}
.review-story {
  background:#fff5ed;
  padding:108px 24px
}
.review-mock {
  position:relative;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 20px 65px #49332216
}
.review-bar {
  height:58px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 17px;
  border-bottom:1px solid #efede9
}
.review-file-icon {
  width:28px;
  height:32px;
  background:#f4eae0;
  border-radius:6px;
  display:grid;
  place-items:center;
  color:#a97863
}
.review-bar>div {
  display:flex;
  flex-direction:column;
  gap:4px
}
.review-bar b {
  font-size:9px;
  font-weight:600
}
.review-bar small {
  font-size:7px;
  color:#8b908c
}
.review-state {
  margin-left:auto;
  color:#786b9d;
  background:#eeeafa;
  border-radius:20px;
  padding:6px 9px;
  font-size:7px
}
.review-canvas {
  height:310px;
  background:#f2f0ed;
  position:relative;
  display:grid;
  place-items:center;
  padding:25px
}
.site-art {
  height:100%;
  width:82%;
  background:#d9e2d3;
  position:relative;
  overflow:hidden;
  padding:16px 19px
}
.art-nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:6px;
  letter-spacing:.08em;
  color:#596354
}
.art-nav i {
  width:12px;
  height:12px;
  background:#596354;
  border-radius:50%
}
.art-content {
  position:absolute;
  left:11%;
  top:31%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  z-index:1
}
.art-content small {
  font-size:6px;
  letter-spacing:.12em;
  margin-bottom:8px
}
.art-content b {
  font:400 34px/.92 var(--serif);
  letter-spacing:-.045em;
  color:#445142
}
.art-content>span {
  font-size:7px;
  margin:9px 0 14px;
  color:#687364
}
.art-content>i {
  font-size:5px;
  font-style:normal;
  border-bottom:1px solid #576452;
  padding-bottom:3px
}
.art-orb {
  position:absolute;
  width:190px;
  height:190px;
  border-radius:50%;
  background:#e3a68e;
  right:7%;
  bottom:-26%;
  box-shadow:inset -16px -10px 0 #d68e78
}
.pin {
  position:absolute;
  width:23px;
  height:23px;
  border:2px solid white;
  border-radius:50%;
  background:#9d8ecb;
  color:white;
  font-size:8px;
  box-shadow:0 2px 6px #14212744
}
.pin-one {
  left:59%;
  top:37%
}
.pin-two {
  right:22%;
  bottom:23%;
  background:#d58b73
}
.comment-bubble {
  position:absolute;
  right:6%;
  top:27%;
  display:flex;
  gap:7px;
  align-items:flex-start;
  background:#fff;
  border-radius:9px;
  padding:9px;
  max-width:172px;
  box-shadow:0 4px 17px #14212725
}
.comment-bubble .avatar {
  width:20px;
  height:20px;
  font-size:6px
}
.comment-bubble>div>b {
  font-size:7px
}
.comment-bubble>div>b small {
  font-size:6px;
  font-weight:400;
  color:#969a95;
  margin-left:4px
}
.comment-bubble p {
  font-size:7px;
  line-height:1.4;
  margin:4px 0 0;
  color:#666c68
}
.comment-reply {
  font-size:9px;
  color:#828782
}
.review-footer {
  height:40px;
  padding:0 17px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#808581;
  font-size:7px
}
.review-footer b {
  font-weight:400;
  margin-left:8px
}
.review-footer i {
  font-style:normal;
  color:#8374aa;
  background:#f0ebfa;
  border-radius:5px;
  padding:4px
}
.payments-story {
  background:var(--yellow);
  padding:110px 24px
}
.payments-grid {
  max-width:var(--content);
  margin:auto;
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:95px;
  align-items:center
}
.payments-art {
  min-height:390px;
  background:#f3e9de;
  border-radius:14px;
  display:grid;
  place-items:center;
  position:relative
}
.invoice-card {
  width:min(78%,340px);
  background:white;
  border-radius:11px;
  padding:20px 23px;
  box-shadow:0 15px 40px #58463422;
  position:relative;
  transform:rotate(-2deg)
}
.invoice-top {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:6px;
  letter-spacing:.1em;
  color:#8d928d
}
.invoice-mark {
  font-size:17px;
  color:#d38c73
}
.invoice-status {
  margin-left:auto;
  color:#64866c;
  background:#e8f0e5;
  border-radius:15px;
  padding:5px 7px;
  font-size:6px
}
.invoice-card h3 {
  font:400 23px/.98 var(--serif);
  letter-spacing:-.04em;
  margin:20px 0 7px
}
.invoice-card>p {
  font-size:7px;
  color:#858a85;
  margin:0 0 17px
}
.invoice-line,.invoice-total {
  display:flex;
  justify-content:space-between;
  padding:7px 0;
  border-top:1px solid #f0eeea;
  font-size:8px
}
.invoice-line span {
  color:#7d827d
}
.invoice-line b,.invoice-total b {
  font-weight:500
}
.invoice-tax {
  font-size:7px
}
.invoice-total {
  font-weight:600;
  font-size:9px
}
.invoice-paid {
  margin-top:8px;
  background:#edf3e9;
  padding:8px;
  border-radius:5px;
  font-size:7px;
  color:#5b795d
}
.invoice-paid span {
  font-weight:700;
  margin-right:4px
}
.illustrative-note {
  display:block;
  text-align:right;
  font-size:6px;
  color:#999d98;
  margin-top:7px
}
.billing-note {
  position:absolute;
  right:6%;
  bottom:13%;
  display:flex;
  gap:9px;
  align-items:center;
  background:white;
  padding:11px 14px;
  border-radius:9px;
  box-shadow:0 8px 22px #5846341c
}
.billing-note>span {
  width:24px;
  height:24px;
  background:#ede8f7;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#786b9d
}
.billing-note>div {
  display:flex;
  flex-direction:column;
  gap:3px
}
.billing-note b {
  font-size:8px
}
.billing-note small {
  font-size:7px;
  color:#858a85
}
.payments-copy h2 {
  font-size:44px
}
.payments-copy p {
  max-width:425px
}
.payments-copy .feature-pills span {
  background:#fff9
}
.connections {
  background:#f8f6f2
}
.connections-grid {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:90px;
  align-items:center
}
.connections-copy h2 {
  max-width:430px
}
.connections-copy p {
  max-width:440px
}
.connection-pills {
  display:flex;
  gap:8px;
  margin-top:21px
}
.connection-pills span {
  background:white
}
.connection-visual {
  height:400px;
  position:relative;
  display:grid;
  place-items:center
}
.connection-center {
  width:134px;
  height:134px;
  border-radius:50%;
  background:var(--yellow);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  z-index:1;
  box-shadow:0 0 0 13px #fffa7766
}
.connection-center .brand-mark {
  margin-bottom:8px;
  transform:scale(1.3)
}
.connection-center b {
  font-size:12px;
  letter-spacing:-.05em
}
.connection-center small {
  font-size:6px;
  letter-spacing:.12em;
  color:#797c70;
  margin-top:5px
}
.orbit {
  position:absolute;
  border:1px dashed #c8c4bb;
  border-radius:50%;
  width:310px;
  height:210px
}
.orbit-two {
  width:430px;
  height:320px;
  transform:rotate(-28deg);
  border-color:#dedbd3
}
.connection-node {
  position:absolute;
  z-index:2;
  background:white;
  border:1px solid #e9e5dc;
  border-radius:11px;
  box-shadow:0 7px 20px #1421270e;
  padding:10px 13px;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:8px
}
.connection-node>span {
  width:23px;
  height:23px;
  border-radius:7px;
  background:#f3e8df;
  color:#a16e58;
  display:grid;
  place-items:center;
  font-size:11px
}
.node-ai {
  top:36px;
  left:22%
}
.node-mcp {
  right:8%;
  top:47%
}
.node-api {
  bottom:33px;
  left:22%
}
.node-mcp>span {
  background:#ece8f5;
  color:#736890
}
.node-api>span {
  background:#e5eef8;
  color:#6382a8
}
.connection-dot {
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#d88d73
}
.dot-one {
  left:30%;
  top:30%
}
.dot-two {
  right:17%;
  top:34%;
  background:#9c8cc7
}
.dot-three {
  left:40%;
  bottom:17%;
  background:#82a3cf
}
.connection-note {
  position:absolute;
  bottom:-4px;
  font-size:8px;
  color:#8b8e88
}
.proof-section {
  background:#fff
}
.proof-grid {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:100px;
  align-items:center
}
.proof-copy h2 {
  font-size:45px
}
.proof-list {
  border-top:1px solid #e9e6e0
}
.proof-row {
  display:grid;
  grid-template-columns:39px 1fr 15px;
  gap:13px;
  align-items:center;
  padding:17px 2px;
  border-bottom:1px solid #e9e6e0
}
.proof-icon {
  width:34px;
  height:34px;
  border-radius:9px;
  display:grid;
  place-items:center;
  font-size:14px
}
.icon-peach {
  background:#f6e8df;
  color:#ad7963
}
.icon-lavender {
  background:#eeeafa;
  color:#776d9f
}
.icon-blue {
  background:#e7eff7;
  color:#6a88ac
}
.icon-yellow {
  background:#fffbd0;
  color:#857f2a
}
.proof-row b {
  font-size:11px;
  font-weight:600
}
.proof-row p {
  font-size:9px;
  color:#7c827e;
  margin:5px 0 0;
  line-height:1.45
}
.proof-arrow {
  font-size:12px
}
.pricing-tease {
  background:#f4eee8;
  padding-top:98px;
  padding-bottom:98px
}
.pricing-tease-inner {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:70px;
  align-items:center
}
.pricing-tease h2 {
  font-size:43px
}
.pricing-tease p {
  max-width:380px;
  font-size:13px;
  line-height:1.55;
  color:#606663
}
.plan-preview {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px
}
.plan-preview>div {
  background:#fff;
  padding:17px 14px;
  min-height:150px;
  display:flex;
  flex-direction:column;
  gap:10px
}
.plan-preview .plan-featured {
  background:#eeeafa
}
.plan-preview>div>span {
  font-size:7px;
  letter-spacing:.1em;
  color:#8b807b
}
.plan-preview>div>b {
  font-size:11px;
  line-height:1.3
}
.plan-preview>div>small {
  font-size:8px;
  line-height:1.4;
  color:#777d78
}
.plan-preview>a {
  grid-column:1/-1;
  background:var(--ink);
  color:white;
  text-align:center;
  padding:13px;
  border-radius:30px;
  font-size:10px;
  font-weight:600;
  margin-top:3px
}
.faq-section {
  background:#fff;
  padding-top:110px;
  padding-bottom:115px
}
.faq-grid {
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:90px
}
.faq-grid h2 {
  font-size:44px
}
.faq-grid>div:first-child>p {
  font-size:12px;
  line-height:1.5;
  color:#727875;
  max-width:270px
}
.faq-grid>div:first-child>p a {
  text-decoration:underline;
  text-underline-offset:3px
}
.faq-list details {
  border-bottom:1px solid #e8e5df
}
.faq-list details:first-child {
  border-top:1px solid #e8e5df
}
.faq-list summary {
  list-style:none;
  cursor:pointer;
  padding:19px 3px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  font-weight:500
}
.faq-list summary::-webkit-details-marker {
  display:none
}
.faq-list summary:after {
  content:'+';
  font-size:19px;
  font-weight:300;
  color:#898e89
}
.faq-list details[open] summary:after {
  content:'−'
}
.faq-list details p {
  font-size:11px;
  line-height:1.6;
  color:#666d69;
  margin:0;
  padding:0 30px 19px 3px;
  max-width:620px
}
.faq-list details a {
  text-decoration:underline;
  text-underline-offset:2px
}
.closing-cta {
  background:var(--blue);
  min-height:390px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:80px 24px;
  position:relative;
  overflow:hidden
}
.closing-content {
  position:relative;
  z-index:1
}
.closing-content .eyebrow {
  font-size:10px
}
.closing-content h2 {
  font:400 clamp(43px,5vw,62px)/.96 var(--serif);
  letter-spacing:-.05em;
  margin:0
}
.closing-content>p:not(.eyebrow) {
  font-size:13px;
  margin:17px 0 22px
}
.closing-spark {
  position:absolute;
  font-size:76px;
  color:#fffa77;
  opacity:.85
}
.spark-a {
  left:15%;
  top:20%
}
.spark-b {
  right:16%;
  bottom:18%;
  font-size:59px;
  color:#f4eae0
}
.site-footer {
  background:#fff;
  padding:48px max(5vw,28px) 18px
}
.footer-top {
  max-width:var(--content);
  margin:auto;
  display:flex;
  align-items:center;
  gap:28px;
  padding-bottom:29px;
  border-bottom:1px solid #eae8e3
}
.footer-brand {
  font-size:18px
}
.footer-top>p {
  font-size:10px;
  line-height:1.5;
  color:#777d78;
  margin:0
}
.footer-back {
  margin-left:auto;
  font-size:10px
}
.footer-links {
  max-width:var(--content);
  margin:0 auto;
  padding:30px 0;
  display:grid;
  grid-template-columns:repeat(3,1fr) 1.2fr;
  gap:25px
}
.footer-links>div:not(.footer-callout) {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:11px
}
.footer-links b {
  font-size:10px;
  margin-bottom:2px
}
.footer-links a {
  font-size:9px;
  color:#6d736f
}
.footer-links a:hover {
  text-decoration:underline
}
.footer-callout {
  background:#f7f3ed;
  padding:17px 19px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:112px
}
.footer-callout span {
  font:400 19px var(--serif)
}
.footer-callout a {
  background:var(--ink);
  color:white;
  padding:9px 12px;
  border-radius:20px;
  align-self:flex-start
}
.footer-bottom {
  max-width:var(--content);
  margin:auto;
  border-top:1px solid #eae8e3;
  padding-top:15px;
  display:flex;
  justify-content:space-between;
  font-size:8px;
  color:#898e89
}
.demo-dialog {
  border:0;
  border-radius:16px;
  padding:24px;
  width:min(760px,calc(100% - 28px));
  box-shadow:0 25px 90px #14212755
}
.demo-dialog::backdrop {
  background:#111d22aa;
  backdrop-filter:blur(3px)
}
.dialog-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:15px
}
.dialog-head .eyebrow {
  font-size:9px;
  color:#8b766b;
  margin-bottom:6px
}
.dialog-head h2 {
  font:400 28px var(--serif);
  margin:0
}
.dialog-close {
  width:32px;
  height:32px;
  border:0;
  border-radius:50%;
  background:#f0eee9;
  font-size:22px;
  cursor:pointer
}
.demo-dialog video {
  display:block;
  width:100%;
  max-height:65vh;
  background:#12191d;
  border-radius:9px
}
.dialog-note {
  font-size:9px;
  color:#7d827e;
  margin:9px 0 0
}

:focus-visible {
  outline:3px solid #386aa3;
  outline-offset:3px
}
.nav-trigger:focus-visible,.stage-tabs button:focus-visible,.workflow-tabs button:focus-visible {
  outline-offset:4px
}

@media(max-width:950px) {
  .desktop-nav {
    gap:18px
  }
  .site-header {
    padding:0 24px
  }
  .split-story,.split-story.reverse {
    gap:38px
  }
  .dark-grid,.connections-grid,.proof-grid {
    gap:50px
  }
  .workspace {
    grid-template-columns:175px 1fr
  }
  .workspace-main {
    padding:24px 20px
  }
  .ws-columns {
    grid-template-columns:1fr
  }
  .ws-next {
    display:none
  }
  .portal-mock {
    grid-template-columns:180px 1fr
  }
  .portal-content {
    padding:20px
  }
  .payments-grid {
    gap:55px
  }

}

@media(max-width:700px) {
  html {
    scroll-padding-top:72px
  }
  .announcement {
    height:auto;
    min-height:37px;
    padding:6px 12px;
    gap:7px;
    font-size:9px
  }
  .site-header {
    height:64px;
    padding:0 18px;
    border-radius:0 0 10px 10px
  }
  .brand {
    font-size:18px
  }
  .desktop-nav,.header-actions {
    display:none
  }
  .mobile-toggle {
    display:flex;
    width:40px;
    height:40px;
    border:0;
    background:transparent;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:6px
  }
  .mobile-toggle span {
    width:20px;
    height:1.5px;
    background:var(--ink)
  }
  .mobile-menu {
    position:fixed;
    z-index:19;
    top:101px;
    left:0;
    right:0;
    background:#fff;
    padding:12px 20px 22px;
    box-shadow:0 15px 25px #14212718
  }
  .mobile-menu:not([hidden]) {
    display:flex;
    flex-direction:column
  }
  .mobile-menu>a:not(.button) {
    padding:13px 3px;
    border-bottom:1px solid #eeeae5;
    font-size:14px
  }
  .mobile-menu .button {
    margin-top:15px
  }
  .hero {
    padding:77px 18px 0;
    min-height:930px
  }
  .hero .eyebrow {
    font-size:9px;
    margin-bottom:13px
  }
  .hero h1 {
    font-size:clamp(43px,11vw,58px);
    line-height:.99
  }
  .hero-copy {
    font-size:15px;
    max-width:360px;
    line-height:1.45;
    margin-top:16px
  }
  .hero-actions {
    margin-top:20px;
    gap:8px
  }
  .hero-actions .button {
    height:45px;
    padding:0 14px;
    font-size:10px;
    gap:7px
  }
  .hero-note {
    font-size:9px;
    margin-top:10px
  }
  .hero-stage {
    margin:177px -8px 0
  }
  .stage-tabs {
    overflow-x:auto;
    justify-content:flex-start;
    gap:2px;
    padding:0 5px 10px;
    scrollbar-width:none
  }
  .stage-tabs::-webkit-scrollbar {
    display:none
  }
  .stage-tabs button {
    font-size:9px;
    padding:9px 12px
  }
  .workspace {
    grid-template-columns:1fr;
    min-height:410px;
    border-radius:15px 15px 0 0
  }
  .workspace-sidebar {
    display:none
  }
  .workspace-main {
    padding:19px 13px 12px
  }
  .ws-greeting {
    font-size:15px
  }
  .ws-date {
    font-size:8px
  }
  .ws-create {
    height:27px;
    font-size:8px
  }
  .ws-metrics {
    gap:5px;
    margin:17px 0 10px
  }
  .ws-metrics>div {
    padding:8px 7px
  }
  .ws-metrics span {
    font-size:7px;
    line-height:1.3;
    min-height:18px
  }
  .ws-metrics strong {
    font-size:17px;
    margin:4px 0 1px
  }
  .metric-note {
    font-size:6px
  }
  .ws-columns {
    grid-template-columns:1fr
  }
  .ws-card {
    padding:10px
  }
  .ws-projects .project-row {
    min-height:46px
  }
  .project-info strong {
    font-size:8px
  }
  .project-info span {
    font-size:7px
  }
  .status {
    font-size:6px;
    padding:4px 5px
  }
  .workspace-footer {
    font-size:6px
  }
  .section-pad {
    padding:76px 19px
  }
  .intro {
    padding-top:78px;
    padding-bottom:70px
  }
  .intro h2,.story-copy h2,.statement-grid h2,.dark-intro h2,.business-heading h2,.connections-copy h2,.proof-copy h2,.pricing-tease h2,.faq-grid h2,.payments-copy h2 {
    font-size:36px
  }
  .intro h2 br {
    display:none
  }
  .intro-copy {
    font-size:14px;
    line-height:1.55;
    margin-top:17px
  }
  .feature-story,.review-story {
    padding:70px 19px
  }
  .split-story,.split-story.reverse {
    grid-template-columns:1fr;
    gap:31px
  }
  .split-story.reverse .story-copy,.split-story.reverse .mock-panel {
    grid-column:auto;
    grid-row:auto
  }
  .split-story.reverse .story-copy {
    order:1
  }
  .split-story.reverse .mock-panel {
    order:2
  }
  .story-copy h2 {
    font-size:37px;
    max-width:450px
  }
  .story-copy p,.statement-body p,.dark-intro p,.connections-copy p,.proof-copy p,.payments-copy p {
    font-size:13px;
    margin:14px 0 18px
  }
  .story-kicker {
    font-size:10px;
    margin-bottom:15px
  }
  .feature-pills {
    gap:6px;
    margin:17px 0 20px
  }
  .feature-pills span,.connection-pills span {
    font-size:8px;
    padding:7px 10px
  }
  .mock-panel {
    min-height:420px
  }
  .onboarding-panel {
    padding:18px 15px
  }
  .onboard-body {
    margin-top:21px
  }
  .delivery-panel {
    padding:18px 15px;
    min-height:430px
  }
  .delivery-head h3 {
    font-size:21px
  }
  .delivery-tabs {
    gap:12px;
    font-size:7px
  }
  .mile {
    gap:3px;
    font-size:6px
  }
  .mile i {
    width:15px;
    height:15px
  }
  .soft-statement {
    padding:75px 19px
  }
  .statement-grid {
    grid-template-columns:1fr;
    gap:10px
  }
  .statement-grid h2 {
    font-size:37px
  }
  .statement-body p {
    margin-top:6px
  }
  .portal-mock {
    grid-column:auto;
    grid-template-columns:1fr;
    margin-top:18px;
    min-height:360px
  }
  .portal-sidebar {
    display:none
  }
  .portal-content {
    padding:15px 13px
  }
  .portal-top {
    font-size:6px
  }
  .portal-greeting {
    margin:25px 0 17px
  }
  .portal-greeting h3 {
    font-size:22px
  }
  .portal-greeting p {
    max-width:220px;
    line-height:1.4
  }
  .portal-progress-ring {
    width:49px;
    height:49px
  }
  .portal-next-card {
    gap:8px;
    padding:11px 8px
  }
  .portal-next-card>div>b {
    font-size:8px
  }
  .portal-next-card p {
    font-size:7px
  }
  .portal-next-card button {
    padding:7px 8px;
    font-size:6px
  }
  .portal-bottom-cards {
    gap:7px
  }
  .portal-bottom-cards>div {
    padding:9px 7px
  }
  .portal-bottom-cards b {
    font-size:7px
  }
  .dark-workflow {
    padding:76px 19px
  }
  .dark-grid {
    grid-template-columns:1fr;
    gap:36px
  }
  .dark-intro h2 {
    max-width:420px
  }
  .dark-intro p {
    margin-bottom:15px
  }
  .workflow-tabs {
    gap:5px
  }
  .workflow-tabs button {
    padding:8px 13px;
    font-size:8px
  }
  .workflow-window {
    min-height:310px
  }
  .workflow-content {
    grid-template-columns:.85fr 1.15fr;
    min-height:274px
  }
  .flow-steps {
    padding:15px 7px
  }
  .flow-step {
    gap:5px;
    padding:9px 4px
  }
  .flow-step>span {
    min-width:0
  }
  .flow-step b {
    font-size:7px
  }
  .flow-step small {
    font-size:6px
  }
  .flow-preview {
    padding:17px 11px
  }
  .flow-preview h3 {
    font-size:18px
  }
  .flow-preview p {
    font-size:7px
  }
  .business-types {
    padding-top:78px;
    padding-bottom:76px
  }
  .business-heading {
    display:block;
    margin-bottom:25px
  }
  .business-heading h2 {
    font-size:37px
  }
  .business-heading>p {
    margin-top:13px;
    font-size:12px
  }
  .business-grid {
    grid-template-columns:1fr;
    gap:28px
  }
  .business-image {
    height:265px
  }
  .business-card h3 {
    font-size:22px
  }
  .image-note {
    font-size:8px;
    line-height:1.4
  }
  .review-canvas {
    height:260px;
    padding:12px
  }
  .site-art {
    width:95%
  }
  .art-content b {
    font-size:27px
  }
  .comment-bubble {
    right:3%;
    top:19%;
    max-width:135px;
    padding:7px
  }
  .comment-bubble p {
    font-size:6px
  }
  .review-footer {
    padding:0 10px;
    font-size:6px
  }
  .payments-story {
    padding:72px 19px
  }
  .payments-grid {
    grid-template-columns:1fr;
    gap:35px
  }
  .payments-art {
    min-height:340px
  }
  .invoice-card {
    width:76%;
    padding:17px
  }
  .billing-note {
    right:2%;
    bottom:11%;
    padding:9px
  }
  .payments-copy h2 {
    font-size:37px
  }
  .connections-grid {
    grid-template-columns:1fr;
    gap:30px
  }
  .connection-visual {
    height:310px;
    overflow:hidden
  }
  .orbit {
    width:270px;
    height:180px
  }
  .orbit-two {
    width:350px;
    height:280px
  }
  .connection-center {
    width:112px;
    height:112px
  }
  .node-ai {
    left:4%;
    top:20px
  }
  .node-mcp {
    right:1%;
    top:44%
  }
  .node-api {
    left:5%;
    bottom:20px
  }
  .connection-note {
    bottom:-2px;
    font-size:7px
  }
  .proof-grid {
    grid-template-columns:1fr;
    gap:32px
  }
  .proof-copy h2 {
    font-size:37px
  }
  .proof-row {
    grid-template-columns:34px 1fr 12px;
    gap:9px;
    padding:14px 0
  }
  .proof-row b {
    font-size:10px
  }
  .proof-row p {
    font-size:8px
  }
  .pricing-tease {
    padding:75px 19px
  }
  .pricing-tease-inner {
    grid-template-columns:1fr;
    gap:25px
  }
  .pricing-tease h2 {
    font-size:37px
  }
  .pricing-tease p {
    font-size:12px
  }
  .plan-preview {
    gap:5px
  }
  .plan-preview>div {
    padding:12px 8px;
    min-height:137px
  }
  .plan-preview>div>span {
    font-size:6px
  }
  .plan-preview>div>b {
    font-size:9px
  }
  .plan-preview>div>small {
    font-size:7px
  }
  .plan-preview>a {
    font-size:8px
  }
  .faq-section {
    padding:75px 19px
  }
  .faq-grid {
    grid-template-columns:1fr;
    gap:27px
  }
  .faq-grid h2 {
    font-size:37px
  }
  .faq-grid>div:first-child>p {
    font-size:11px;
    margin-top:10px
  }
  .faq-list summary {
    font-size:10px;
    padding:16px 3px
  }
  .faq-list details p {
    font-size:10px;
    padding-bottom:16px
  }
  .closing-cta {
    min-height:330px;
    padding:68px 18px
  }
  .closing-content h2 {
    font-size:47px
  }
  .closing-content>p:not(.eyebrow) {
    font-size:11px;
    max-width:300px;
    margin:15px auto 19px
  }
  .closing-content .button {
    height:47px;
    font-size:10px;
    padding:0 16px
  }
  .closing-spark {
    font-size:45px;
    left:5%;
    top:16%
  }
  .spark-b {
    right:5%;
    bottom:15%;
    font-size:39px
  }
  .site-footer {
    padding:34px 19px 16px
  }
  .footer-top {
    gap:13px;
    flex-wrap:wrap
  }
  .footer-top>p {
    font-size:8px
  }
  .footer-back {
    font-size:8px
  }
  .footer-links {
    grid-template-columns:1fr 1fr;
    gap:25px 16px;
    padding:25px 0
  }
  .footer-callout {
    grid-column:1/-1;
    min-height:95px
  }
  .footer-bottom {
    font-size:7px;
    gap:8px;
    flex-wrap:wrap
  }
  .demo-dialog {
    padding:17px
  }
  .dialog-head h2 {
    font-size:23px
  }

}

/* Remaining sections use warm cream, ink blue, powder blue, periwinkle, and restrained chartreuse accents. */
body { overflow-x:clip }
.peach-feature { min-height:650px;padding:92px 24px;background:var(--peach);display:flex;align-items:center }
.peach-feature-inner { display:grid;grid-template-columns:1fr .92fr;gap:82px;align-items:center;width:100% }
.peach-photo { width:100%;height:448px;position:relative;border-radius:20px;overflow:hidden }
.peach-photo img { width:100%;height:100%;object-fit:cover }
.photo-caption { position:absolute;left:18px;bottom:18px;padding:9px 12px;background:#fff;border-radius:30px;font-size:9px;letter-spacing:.06em }
.peach-feature-copy { max-width:490px }
.peach-feature-copy .story-kicker,.ai-workflow-copy .story-kicker,.adoption-copy .story-kicker,.portal-highlight-copy .story-kicker,.portal-mobile-inner .story-kicker { font-size:11px;letter-spacing:.08em }
.peach-feature-copy h2,.portal-highlight-copy h2 { font:400 48px/1.02 var(--serif);letter-spacing:-.045em;margin:0 0 20px }
.peach-feature-copy p,.portal-highlight-copy p,.portal-mobile-inner p { font-size:18px;line-height:1.55;color:#555b59;margin:0 0 25px }
.ai-workflow { background:var(--ink);color:#fff;padding:112px 24px }
.ai-workflow-inner { display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center }
.ai-workflow-copy h2 { font:400 44px/1.06 var(--sans);letter-spacing:-.04em;max-width:500px;margin:0 }
.ai-workflow-copy>p { color:#d0d5d3;font-size:18px;line-height:1.55;max-width:500px;margin:20px 0 27px }
.ai-capabilities { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px }
.ai-capability { min-height:154px;padding:17px 15px;border:1px solid #ffffff3b;border-radius:12px;background:transparent;color:#fff;text-align:left;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:12px;cursor:pointer }
.ai-capability[aria-pressed="true"] { background:#24373d;border-color:#9ab9e8 }
.ai-capability-icon { width:31px;height:31px;display:grid;place-items:center;background:#ffffff1c;border-radius:9px;font-size:16px }
.ai-capability>span:nth-child(2) { display:flex;flex-direction:column;gap:5px }
.ai-capability b { font:400 21px/1.05 var(--serif) }
.ai-capability small { color:#c7cfcd;font-size:12px;line-height:1.35 }
.ai-panel { border-radius:22px;padding:20px;background:var(--lavender);color:var(--ink);min-width:0 }
.ai-product { background:#fff;border-radius:15px;padding:25px 27px;min-height:430px }
.ai-panel-top { display:flex;align-items:center;gap:12px;font-size:8px;letter-spacing:.06em;color:#515761;margin:0 1px 14px }
.ai-window-dots { display:flex;gap:4px }.ai-window-dots i { width:6px;height:6px;background:#8b829f;border-radius:50% }
.ai-secure { margin-left:auto;padding:6px 9px;background:#eeeafa;border-radius:20px;letter-spacing:0;font-size:7px }
.ai-product-head { display:flex;align-items:center;gap:10px }
.ai-spark { width:30px;height:30px;background:#eeeafa;border-radius:9px;display:grid;place-items:center;color:#6a5f91 }
.ai-product-head>div { display:flex;flex-direction:column;gap:3px }.ai-product-head b { font-size:14px;font-weight:600 }.ai-product-head small { font-size:9px;color:#878c88 }
.ai-product>p { font-size:13px;line-height:1.45;color:#717773;max-width:470px;margin:16px 0 }
.ai-prompt { padding:11px 13px;border:1px solid #e9e6e0;border-radius:8px;color:#858a86;font-size:10px;display:flex;justify-content:space-between }
.ai-prompt span { width:20px;height:20px;border-radius:6px;background:var(--ink);color:white;display:grid;place-items:center }
.ai-response { margin-top:16px;padding:14px 15px;background:#f8f7f4;border-radius:9px }
.ai-response>small { display:block;font-size:7px;letter-spacing:.1em;color:#908f88;margin-bottom:9px }
.ai-response>div:not(.ai-review-note) { display:flex;align-items:center;gap:9px;padding:8px 0;border-top:1px solid #eae8e2 }
.ai-response>div>i { width:19px;height:19px;border-radius:50%;background:#e7e2f3;color:#71658f;font-style:normal;display:grid;place-items:center;font-size:8px }
.ai-response>div>span { display:flex;flex-direction:column;gap:3px }.ai-response b { font-size:9px;font-weight:600 }.ai-response span small { font-size:7px;color:#878c88 }
.ai-review-note { margin-top:9px;padding:8px 9px;background:#fff;border-radius:6px;font-size:8px;color:#626a65 }
.ai-panel-foot { display:flex;justify-content:space-between;color:#655f75;font-size:7px;margin:10px 2px 0 }
.yellow-benefit { background:var(--yellow);padding:38px 24px }
.yellow-benefit-inner { display:flex;align-items:center;justify-content:space-between;gap:24px }
.yellow-benefit p { font:400 29px/1.13 var(--serif);margin:0;letter-spacing:-.025em }
.yellow-benefit p b { font-weight:400 }
.benefit-symbol { font-size:34px;color:#706a36 }.yellow-benefit a { background:var(--ink);color:#fff;border-radius:30px;padding:14px 19px;font-size:12px;white-space:nowrap }
.business-types { padding:100px 24px 106px;background:#fff }
.business-heading { display:block;text-align:center;position:relative;margin:0 auto 36px;max-width:850px }
.business-heading h2 { font:400 56px/1.02 var(--serif);letter-spacing:-.045em }
.business-heading>div>p { max-width:730px;font-size:24px;line-height:1.35;margin:14px auto 0;color:#555b59 }
.carousel-controls { position:absolute;right:0;bottom:0;display:flex;gap:8px }
.carousel-controls button { width:42px;height:42px;border:1px solid #dcdad4;border-radius:50%;background:white;font-size:16px;cursor:pointer }
.business-grid.audience-carousel { display:flex;gap:40px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 2px 14px;max-width:100% }
.business-grid.audience-carousel::-webkit-scrollbar { display:none }
.audience-carousel .business-card { flex:0 0 400px;scroll-snap-align:start;border:1px solid #e7e4de;border-radius:20px;overflow:hidden;background:#fff }
.audience-carousel .business-image { height:250px;margin:0;border-radius:0;position:relative }
.business-category { position:absolute;left:15px;top:15px;background:var(--yellow);border-radius:30px;padding:8px 12px;font-size:9px;letter-spacing:.06em }
.business-card-panel { padding:17px 19px 19px }
.business-card-panel .business-card-bottom { margin:0 }
.business-card-panel h3 { font:400 38px/1.05 var(--serif);letter-spacing:-.035em }
.business-card-panel p { font-size:16px;line-height:1.45;color:#5e6460;margin:9px 0 14px }
.business-learn { display:inline-block;font-size:12px;font-weight:600;border-bottom:1px solid #14212777;padding-bottom:3px }
.business-learn i { font-style:normal;margin-left:6px }
.proof-masonry { background:var(--peach);padding:100px 24px 110px }
.proof-heading { text-align:center;margin:0 auto 42px }
.proof-heading h2,.resources-heading h2 { font:400 48px/1.04 var(--serif);letter-spacing:-.04em;margin:0 }
.proof-cards { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch }
.proof-card { min-height:205px;background:#fff;border-radius:20px;padding:20px;display:flex;flex-direction:column }
.proof-card-tall { min-height:245px }
.proof-card-icon { width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:15px;margin-bottom:15px }
.proof-card h3 { font:400 24px/1.1 var(--serif);letter-spacing:-.025em;margin:0 0 10px }
.proof-card p { font-size:14px;line-height:1.45;color:#606663;margin:0 0 18px }
.proof-card-footer { display:flex;align-items:center;gap:8px;margin-top:auto;font-size:7px;letter-spacing:.06em;color:#898e88 }
.proof-card-footer .avatar { width:23px;height:23px;font-size:7px }
.integrations-band { background:#91afe0;padding:85px 24px 82px;overflow:hidden }
.integration-heading { display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:32px }
.integration-heading>div { max-width:680px }
.integration-heading h2 { font:400 56px/1.02 var(--serif);letter-spacing:-.045em;margin:0 }
.integration-heading p { font-size:20px;line-height:1.45;max-width:620px;margin:15px 0 0;color:#293845 }
.integration-link { border:1px solid #14212777;border-radius:30px;padding:13px 17px;font-size:12px;font-weight:600;white-space:nowrap }
.integration-rail { display:flex;gap:12px;overflow-x:auto;padding:4px 1px 12px;scrollbar-width:thin;overscroll-behavior-x:contain }
.integration-card { flex:0 0 200px;height:200px;border:1px solid #ffffffa6;border-radius:12px;background:#ffffffeb;padding:17px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:7px }
.integration-logo { width:40px;height:40px;border:1px solid #e5e3de;border-radius:10px;background:#fff;display:grid;place-items:center;font-size:21px;font-weight:600;margin-bottom:auto }
.stripe-logo { color:#6655b4 }.drive-logo { color:#458765 }.calendar-logo { color:#527fca }.meta-logo { color:#547ed2 }.google-logo { color:#4285f4 }.zapier-logo { color:#e07b33 }.mcp-logo { color:#5e6682 }
.integration-card b { font-size:14px;font-weight:600 }.integration-card small { font-size:10px;color:#747a75 }
.adoption-photo { min-height:600px;position:relative;overflow:hidden;background:#25332e;color:white;padding:100px 24px }
.adoption-photo-bg { position:absolute;inset:0;background:linear-gradient(90deg,#142127db 0%,#142127a6 52%,#14212761 100%),url('assets/team-patio-reference.webp') center 46%/cover }
.adoption-inner { position:relative;display:grid;grid-template-columns:1fr .92fr;gap:70px;align-items:center;min-height:400px }
.adoption-copy h2 { font:400 56px/1.01 var(--serif);letter-spacing:-.045em;max-width:530px;margin:0 0 25px;color:var(--yellow) }
.adoption-copy .story-kicker { color:#fff;font-size:10px;letter-spacing:.08em }
.adoption-cards { display:flex;flex-direction:column;gap:13px }
.adoption-cards article { background:#fffa55;color:var(--ink);border-radius:12px;padding:17px 18px;display:grid;grid-template-columns:36px 1fr;gap:14px;min-height:155px }
.adoption-icon { width:33px;height:33px;background:#fff;border-radius:9px;display:grid;place-items:center;font-size:12px }
.adoption-cards h3 { font:400 25px/1.05 var(--sans);letter-spacing:-.025em;margin:0 0 6px }
.adoption-cards p { font-size:14px;line-height:1.4;margin:0 0 9px;max-width:390px }
.adoption-cards button,.adoption-cards a { font:600 11px var(--sans);padding:0;border:0;border-bottom:1px solid #14212788;background:none;cursor:pointer }
.resources-section { background:#fff;padding:100px 24px 105px }
.resources-heading { text-align:center;margin:0 auto 32px }
.resource-category { display:inline-block;padding:8px 13px;border:1px solid #e3e0d9;border-radius:30px;font-size:9px;letter-spacing:.08em;margin-bottom:18px }
.resource-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px }
.resource-card { display:block;min-width:0 }
.resource-image { height:352px;position:relative;overflow:hidden;border-radius:20px;background:#e7e4de;padding:14px }
.resource-image>img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover }
.resource-toplink { position:relative;z-index:1;display:inline-block;padding:8px 11px;background:#fff;border-radius:30px;font-size:9px;font-weight:600 }
.resource-yellow { position:absolute;z-index:1;left:14px;right:14px;bottom:14px;min-height:190px;padding:17px;background:var(--yellow);border-radius:13px;display:flex;flex-direction:column;justify-content:flex-end }
.resource-yellow>span { font-size:8px;letter-spacing:.08em;margin-bottom:auto }
.resource-yellow h3 { font:400 24px/1.08 var(--serif);text-decoration:underline;text-underline-offset:3px;margin:14px 0 0 }
.resources-all { display:block;width:max-content;margin:25px auto 0;border-bottom:1px solid #14212770;padding-bottom:4px;font-size:12px;font-weight:600 }
.plans-section { background:#fff;padding:96px 24px 110px }
.plans-heading { text-align:center;margin:0 auto 32px }
.plans-heading h2 { font:400 50px/1.03 var(--serif);letter-spacing:-.04em;margin:0 auto 20px }
.plan-switch { display:inline-flex;gap:3px;padding:4px;background:#f1efe9;border-radius:30px }
.plan-switch button { border:0;background:transparent;padding:10px 16px;border-radius:25px;font-size:11px;cursor:pointer }
.plan-switch button[aria-pressed="true"] { background:var(--yellow);font-weight:600 }
.plans-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px }
.plan-card { border:1px solid #e2dfd9;border-radius:20px;padding:25px;min-height:330px;display:flex;flex-direction:column;position:relative;overflow:hidden }
.plan-card-featured { border-color:var(--ink);padding-top:57px }
.plan-card-darktop { position:absolute;left:0;right:0;top:0;padding:11px;background:var(--ink);color:#fff;text-align:center;font-size:8px;letter-spacing:.08em }
.plan-label { font-size:9px;letter-spacing:.08em;color:#7d827e;margin-bottom:12px }
.plan-card h3 { font:400 28px/1.06 var(--serif);letter-spacing:-.025em;margin:0 0 17px }
.plan-card ul { list-style:none;padding:0;margin:0 0 20px;display:grid;gap:10px }
.plan-card li { font-size:13px;line-height:1.35;color:#5f6661;padding-left:16px;position:relative }
.plan-card li:before { content:'✓';position:absolute;left:0;color:#6f8c70 }
.plan-card>a { margin-top:auto;font-size:11px;font-weight:600;border-bottom:1px solid #14212766;padding-bottom:4px;width:max-content }
.plan-pricing-link { display:block;width:max-content;margin:24px auto 0;border-radius:30px;background:var(--yellow);padding:13px 17px;font-size:11px;font-weight:600 }
.portal-highlight { background:var(--lavender);padding:90px 24px;overflow:hidden }
.portal-highlight-inner { display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center;min-height:480px }
.portal-highlight-copy h2 { font-size:43px }
.portal-frames { height:445px;position:relative;overflow:hidden }
.portal-frame { position:absolute;width:76%;height:370px;background:#fff;border-radius:13px;padding:18px;box-shadow:0 15px 35px #342d4a20 }
.frame-back { right:0;top:15px;transform:rotate(5deg);opacity:.9 }
.frame-front { left:4%;top:48px;transform:rotate(-4deg);z-index:1 }
.frame-brand { font-size:9px;font-weight:600;border-bottom:1px solid #eeece8;padding:0 0 11px }
.frame-client { display:flex;flex-direction:column;gap:8px;margin:27px 0 18px }
.frame-client small,.frame-task small { font-size:7px;letter-spacing:.08em;color:#938778 }
.frame-client b { font:400 24px var(--serif) }.frame-client span { font-size:9px;color:#777e79 }
.frame-task { background:#f7f2e9;border-radius:8px;padding:12px;display:flex;align-items:center;gap:10px }
.frame-task>i { width:26px;height:26px;display:grid;place-items:center;background:white;border-radius:7px;font-style:normal }
.frame-task>span { display:flex;flex-direction:column;gap:5px }.frame-task b { font-size:9px;font-weight:500 }
.frame-footer { display:flex;gap:18px;margin-top:21px;font-size:7px;color:#797f7a }
.frame-lines { margin-top:28px;display:grid;gap:9px }.frame-lines i { height:9px;background:#f0edf5;border-radius:6px }.frame-lines i:nth-child(2){width:70%}.frame-lines i:nth-child(3){width:84%}
.frame-project { height:185px;background:#f3e9df;margin-top:21px;border-radius:8px }
.portal-mobile-band { background:#bfd3b5;padding:48px 24px;overflow:hidden }
.portal-mobile-inner { min-height:290px;display:grid;grid-template-columns:.7fr 1.3fr;gap:55px;align-items:center;max-width:900px }
.portal-mobile-inner h2 { font:400 36px/1.05 var(--serif);margin:0 0 10px }
.portal-mobile-inner p { margin:0;max-width:520px }
.phone-mock { justify-self:center;width:176px;height:270px;background:#142127;border:6px solid #142127;border-radius:26px;padding:10px;transform:rotate(-8deg);box-shadow:0 14px 28px #1b2d2433 }
.phone-speaker { width:42px;height:5px;border-radius:6px;background:#39494d;margin:0 auto 10px }
.phone-screen { height:226px;background:#fff;border-radius:13px;padding:13px 10px;display:flex;flex-direction:column;gap:10px }
.phone-screen>small { font-size:7px;letter-spacing:.06em;color:#907868 }.phone-screen>b { font:400 20px/1 var(--serif) }.phone-screen>span { font-size:9px;color:#757b76;margin-top:3px }
.phone-screen>i { padding:9px 7px;border:1px solid #ece9e3;border-radius:6px;font-size:7px;font-style:normal }
.dark-cta { background:var(--ink);padding:92px 24px 44px;color:white }
.dark-cta-inner { display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center;min-height:395px }
.cta-eyebrow { font-size:9px;letter-spacing:.1em;color:#c9d2cf }
.dark-cta-copy h2 { font:400 48px/1.02 var(--serif);letter-spacing:-.04em;margin:18px 0 15px }
.dark-cta-copy p { font-size:15px;line-height:1.45;color:#d1d8d5;max-width:390px;margin:0 0 23px }
.button-white { background:white;color:var(--ink) }
.cta-photos { position:relative;height:345px;overflow:visible }
.cta-photos img { position:absolute;width:48%;height:285px;object-fit:cover;border:7px solid white;border-radius:3px;box-shadow:0 13px 30px #0003 }
.cta-photo-one { left:3%;top:28px;transform:rotate(-8deg) }.cta-photo-two { right:4%;top:9px;transform:rotate(7deg) }
.site-footer { background:var(--ink);padding:0 24px 35px }
.footer-container { max-width:var(--content);margin:0 auto;background:#fff;color:var(--ink);border-radius:20px;padding:45px 50px 20px }
.footer-main { display:grid;grid-template-columns:1.25fr repeat(4,1fr);gap:28px;padding-bottom:32px }
.footer-brand-column>p { font-size:12px;line-height:1.5;color:#6b716d;margin:17px 0 }
.footer-start { display:inline-block;background:var(--ink);color:#fff;border-radius:24px;padding:10px 14px;font-size:10px }
.footer-column { display:flex;flex-direction:column;align-items:flex-start;gap:12px }
.footer-column h3 { font:400 18px var(--serif);margin:0 0 2px }
.footer-column a { font-size:12px;color:#646b66 }
.footer-bottom { display:flex;justify-content:space-between;border-top:1px solid #e8e5df;padding-top:15px;font-size:9px;color:#858b86 }
@media(min-width:701px) {
  .announcement { position:sticky;top:0;z-index:30;height:52px;font-size:17px }
  .announcement a { background:#fff;border-radius:25px;padding:8px 13px;text-decoration:none }
  .site-header { top:52px }
  html { scroll-padding-top:128px }
}
.onboarding-eyebrow { display:block;font:500 14px var(--sans);letter-spacing:.09em;margin:0 0 19px }
.onboarding-panel .onboard-body { margin-top:155px }
.onboarding-panel .stage-stat { width:340px;min-height:110px;top:22px;right:23px;padding:15px 20px;gap:0;justify-content:space-around }
.stage-stat-item { display:flex;flex-direction:column-reverse;align-items:flex-start;gap:4px;padding-left:12px;border-left:1px solid #e7e4df }
.stage-stat-item:first-child { border:0;padding-left:0 }
.stage-stat-item b { font:400 28px var(--serif) }
.stage-stat-item small { font-size:8px;letter-spacing:.07em;color:#737a76 }
.feature-pills span { background:#edf1f3;border:0 }
.feature-story#onboarding .feature-pills span:first-child { background:#dcecf5 }
.workflow-tabs,.workflow-window { display:none }
.ai-capability { font-family:var(--sans) }
.business-heading>div>p { display:block }
.business-card { min-width:0 }
.resource-grid,.plans-grid,.proof-cards,.ai-capabilities { min-width:0 }
.integrations-band,.proof-masonry,.resources-section,.plans-section,.portal-highlight,.portal-mobile-band,.adoption-photo,.yellow-benefit { max-width:100%;overflow:hidden }
.footer-legal { max-width:var(--content);margin:18px auto 0;padding:10px 2px 0;border-top:1px solid #ffffff4d;display:flex;justify-content:space-between;gap:16px;color:#fff;font-size:11px }
.footer-legal a { color:#fff;text-decoration:underline;text-underline-offset:3px }
@media(max-width:700px) {
  .announcement { position:sticky;top:0;z-index:30;min-height:52px;height:auto;padding:6px 12px;font-size:12px;flex-wrap:wrap;text-align:center }
  .announcement a { background:#fff;border-radius:25px;padding:6px 10px;text-decoration:none }
  .site-header { top:52px }
  html { scroll-padding-top:120px }
  .onboarding-eyebrow { font-size:11px;margin-bottom:12px }
  .onboarding-panel { min-height:490px }
  .onboarding-panel .onboard-body { width:84%;margin:105px 12px 18px auto;padding:19px 15px }
  .onboarding-panel .stage-stat { width:min(340px,calc(100% - 24px));min-height:76px;top:12px;right:12px;padding:9px 11px }
  .stage-stat-item b { font-size:23px }
  .stage-stat-item small { font-size:8px }
  .business-grid.audience-carousel { width:100%;max-width:100%;min-width:0 }
  .proof-cards,.resource-grid,.plans-grid { min-width:0 }
}
@media(max-width:1100px) {
  .ai-workflow-inner { gap:35px }
  .ai-capability { padding:14px 12px }
  .business-grid.audience-carousel { gap:24px }
  .integration-card { flex-basis:180px;height:180px }
  .footer-container { padding:38px 32px 18px }
  .footer-main { gap:18px }
}
@media(max-width:800px) {
  .peach-feature { min-height:0;padding:72px 22px }
  .peach-feature-inner { grid-template-columns:1fr;gap:32px }
  .peach-photo { height:auto;aspect-ratio:1.25 }
  .peach-feature-copy h2 { font-size:42px }
  .ai-workflow { padding:76px 22px }
  .ai-workflow-inner { grid-template-columns:1fr;gap:35px }
  .ai-panel { max-width:650px;width:100%;margin:0 auto }
  .business-types { padding:78px 22px }
  .business-heading { text-align:left;margin-bottom:26px }
  .business-heading h2 { font-size:45px }
  .business-heading>div>p { font-size:18px;margin-left:0 }
  .carousel-controls { right:0;bottom:0 }
  .proof-cards { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .integration-heading h2 { font-size:45px }
  .integration-heading p { font-size:17px }
  .adoption-inner { grid-template-columns:1fr 1fr;gap:28px }
  .adoption-copy h2 { font-size:45px }
  .portal-highlight-inner { grid-template-columns:1fr 1fr;gap:28px }
  .portal-highlight-copy h2 { font-size:37px }
  .footer-main { grid-template-columns:repeat(3,minmax(0,1fr)) }
  .footer-brand-column { grid-column:span 3 }
}
@media(max-width:700px) {
  .peach-feature { padding:58px 19px }
  .peach-feature-inner { gap:24px }
  .peach-photo { aspect-ratio:1.15;border-radius:15px }
  .peach-feature-copy h2 { font-size:36px }
  .peach-feature-copy p { font-size:15px }
  .ai-workflow { padding:66px 19px }
  .ai-workflow-copy h2 { font-size:35px }
  .ai-workflow-copy>p { font-size:15px }
  .ai-capabilities { gap:8px }
  .ai-capability { min-height:140px;padding:12px 10px }
  .ai-capability b { font-size:18px }
  .ai-capability small { font-size:10px }
  .ai-panel { padding:12px;border-radius:16px }
  .ai-product { min-height:0;padding:17px 14px }
  .ai-product>p { font-size:11px }
  .ai-response { padding:11px 9px }
  .yellow-benefit { padding:25px 19px }
  .yellow-benefit-inner { display:grid;grid-template-columns:30px 1fr;gap:12px }
  .yellow-benefit p { font-size:23px }
  .yellow-benefit a { grid-column:2;justify-self:start;padding:11px 15px }
  .business-types { padding:68px 19px }
  .business-heading { padding-bottom:46px }
  .business-heading h2 { font-size:39px }
  .business-heading>div>p { font-size:16px }
  .carousel-controls { left:0;right:auto;bottom:0 }
  .business-grid.audience-carousel { width:100%;max-width:100%;min-width:0;gap:16px }
  .audience-carousel .business-card { flex-basis:min(340px,calc(100vw - 44px));border-radius:16px }
  .audience-carousel .business-image { height:215px }
  .business-card-panel { padding:14px }
  .business-card-panel h3 { font-size:31px }
  .business-card-panel p { font-size:14px }
  .proof-masonry { padding:70px 19px }
  .proof-heading h2,.resources-heading h2 { font-size:37px }
  .proof-heading h2 br { display:none }
  .proof-cards { grid-template-columns:1fr;gap:11px }
  .proof-card,.proof-card-tall { min-height:0;padding:17px }
  .proof-card h3 { font-size:23px }
  .proof-card p { font-size:13px }
  .proof-card-footer { padding-top:5px }
  .integrations-band { padding:65px 19px }
  .integration-heading { display:block;margin-bottom:21px }
  .integration-heading h2 { font-size:39px }
  .integration-heading p { font-size:15px }
  .integration-link { display:inline-block;margin-top:16px }
  .integration-card { flex-basis:155px;height:155px;padding:13px }
  .integration-card b { font-size:12px }
  .integration-card small { font-size:9px }
  .adoption-photo { min-height:0;padding:65px 19px }
  .adoption-photo-bg { background-image:linear-gradient(180deg,#142127c7,#14212799),url('assets/team-patio-reference.webp') }
  .adoption-inner { grid-template-columns:1fr;gap:30px;min-height:0 }
  .adoption-copy h2 { font-size:44px }
  .adoption-cards article { min-height:0;padding:15px 13px;grid-template-columns:30px 1fr;gap:11px }
  .adoption-cards h3 { font-size:22px }
  .adoption-cards p { font-size:12px }
  .resources-section,.plans-section { padding:68px 19px }
  .resources-heading { margin-bottom:23px }
  .resource-grid { grid-template-columns:1fr;gap:14px }
  .resource-image { height:340px;border-radius:16px }
  .resource-yellow { min-height:175px }
  .resource-yellow h3 { font-size:23px }
  .plans-heading h2 { font-size:38px }
  .plans-grid { grid-template-columns:1fr;gap:12px }
  .plan-card { min-height:0;padding:21px }
  .plan-card-featured { padding-top:53px }
  .plan-card h3 { font-size:26px }
  .portal-highlight { padding:68px 19px 48px }
  .portal-highlight-inner { grid-template-columns:1fr;gap:12px;min-height:0 }
  .portal-highlight-copy h2 { font-size:37px }
  .portal-highlight-copy p { font-size:15px }
  .portal-frames { height:340px;margin:4px -19px 0;overflow:hidden }
  .portal-frame { width:77%;height:285px;padding:13px }
  .frame-front { left:5%;top:34px }
  .frame-back { right:-2%;top:9px }
  .frame-client { margin:18px 0 13px }
  .frame-client b { font-size:20px }
  .frame-project { height:128px }
  .portal-mobile-band { padding:38px 19px }
  .portal-mobile-inner { min-height:0;grid-template-columns:115px 1fr;gap:20px }
  .phone-mock { transform:rotate(-7deg) scale(.82);transform-origin:center;width:162px }
  .portal-mobile-inner h2 { font-size:26px }
  .portal-mobile-inner p { font-size:12px }
  .portal-mobile-inner .story-kicker { font-size:8px }
  .dark-cta { padding:70px 19px 30px }
  .dark-cta-inner { grid-template-columns:1fr;gap:22px;min-height:0 }
  .dark-cta-copy h2 { font-size:41px }
  .cta-photos { height:245px;margin:0 10px }
  .cta-photos img { height:215px;width:45%;border-width:5px }
  .site-footer { padding:0 12px 18px }
  .footer-container { border-radius:16px;padding:27px 19px 16px }
  .footer-main { grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 14px }
  .footer-brand-column { grid-column:span 2 }
  .footer-column h3 { font-size:16px }
  .footer-column a { font-size:11px }
  .footer-bottom { gap:8px;flex-wrap:wrap;font-size:8px }
}

/* The product chapter keeps the text-left/panel-right rhythm with a left-aligned section heading. */
.intro {
  padding:80px 24px 36px;
  background:#fff
}
.intro-inner {
  max-width:900px;
  text-align:center
}
.intro h2 {
  max-width:600px;
  font:400 48px/1.05 var(--serif);
  letter-spacing:-.045em;
  margin:0 auto
}
.feature-story,
.review-story {
  padding:42px 24px 78px;
  background:#fff
}
.feature-story .section-inner,
.review-story .section-inner {
  width:90%;
  max-width:1280px
}
.split-story,
.split-story.reverse {
  grid-template-columns:minmax(380px,.82fr) minmax(0,1.18fr);
  gap:70px
}
.split-story.reverse .story-copy,
.split-story.reverse .mock-panel {
  grid-column:auto;
  grid-row:auto
}
.story-copy h2 {
  font:400 44px/1.06 var(--sans);
  letter-spacing:-.04em;
  max-width:480px
}
.story-copy p {
  font-size:20px;
  line-height:1.5;
  max-width:455px
}
.feature-story#onboarding .story-copy p { color:var(--ink);font-size:20px }
.feature-pills span {
  font-size:12px;
  padding:9px 13px;
  border:0;
  background:#edf1f3
}
.feature-story#onboarding .feature-pills span:first-child { background:#dcecf5 }
.onboarding-panel {
  min-height:555px;
  padding:0;
  background:#a8d0eb;
  border-radius:22px;
  box-shadow:none;
  overflow:hidden
}
.onboarding-panel .mock-topline {
  display:none
}
.onboarding-panel .onboard-body {
  width:76%;
  max-width:480px;
  margin:155px 26px 24px auto;
  padding:30px 32px 25px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 18px 40px #284a5d20
}
.onboarding-panel .stage-stat {
  position:absolute;
  top:23px;
  right:24px;
  z-index:2;
  display:flex;
  align-items:center;
  width:340px;
  min-height:110px;
  justify-content:space-around;
  gap:0;
  padding:15px 20px;
  border-radius:9px;
  background:#fff;
  box-shadow:0 7px 19px #284a5d18
}
.stage-stat-item { display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding-left:14px;border-left:1px solid #e7e4df }
.stage-stat-item:first-child { border:0;padding-left:0 }
.stage-stat-item b { font:400 40px/1 var(--sans) }
.stage-stat-item small { font:400 16px/1.3 var(--sans);letter-spacing:0;color:#555d59 }
.onboarding-panel .illustrative-badge {
  bottom:12px;
  left:14px;
  right:auto;
  color:#416276;
  background:#ffffffc9
}
.delivery-panel {
  min-height:555px;
  padding:25px;
  border-radius:22px;
  background:#dcd7f0;
  box-shadow:none
}
.delivery-panel .delivery-head,
.delivery-panel .delivery-tabs,
.delivery-panel .delivery-progress,
.delivery-panel .task-list {
  background:#fff
}
.delivery-panel .delivery-head {
  padding:16px 17px 5px;
  border-radius:11px 11px 0 0
}
.delivery-panel .delivery-tabs {
  margin-top:0;
  padding:13px 17px 12px
}
.delivery-panel .delivery-progress {
  padding:18px 17px 14px
}
.delivery-panel .task-list {
  padding:12px 17px 8px;
  border-radius:0 0 11px 11px
}
.review-mock {
  min-height:555px;
  border-radius:22px;
  padding:24px;
  background:#a8d0eb;
  box-shadow:none
}
.review-mock .review-bar,
.review-mock .review-footer {
  background:#fff
}
.review-mock .review-bar {
  border-radius:12px 12px 0 0
}
.review-mock .review-canvas {
  height:370px;
  background:#fff
}
.review-mock .review-footer {
  border-radius:0 0 12px 12px
}
@media(max-width:950px) {
  .split-story,
  .split-story.reverse {
    grid-template-columns:minmax(300px,.85fr) minmax(0,1.15fr);
    gap:36px
  }
  .story-copy h2 {font-size:38px}
  .story-copy p {font-size:17px}
}
@media(max-width:700px) {
  .intro {padding:66px 19px 18px}
  .intro h2 {font-size:38px}
  .feature-story,
  .review-story {padding:35px 19px 58px}
  .split-story,
  .split-story.reverse {grid-template-columns:1fr;gap:24px}
  .split-story.reverse .story-copy,
  .split-story.reverse .mock-panel {grid-column:auto;grid-row:auto}
  .split-story.reverse .story-copy {order:0}
  .split-story.reverse .mock-panel {order:0}
  .story-copy h2 {font-size:34px}
  .story-copy p {font-size:16px;line-height:1.5}
  .onboarding-panel,.delivery-panel,.review-mock {min-height:430px}
  .onboarding-panel .onboard-body {width:84%;margin:105px 12px 20px auto;padding:22px 18px}
  .onboarding-panel .stage-stat {width:min(340px,calc(100% - 24px));min-height:76px;top:12px!important;right:12px!important;padding:9px 11px}
  .stage-stat-item b {font-size:28px}
  .stage-stat-item small {font-size:11px}
  .delivery-panel {padding:14px}
  .review-mock {padding:13px}
  .review-mock .review-canvas {height:275px;padding:12px}
}

@media(min-width:701px) {
  .story-copy h2 { font-family:var(--sans);font-size:44px;line-height:1.06;letter-spacing:-.045em }
  .project-info strong,.ws-card-title strong,.next-event strong,.check-item b,.task-label,.delivery-progress-title,.task-head b { font-size:11px }
  .project-info span,.next-event small,.check-item small,.task-row small,.delivery-tabs,.progress-label,.file-kind,.portal-project,.portal-bottom-cards b { font-size:9px }
  .workspace-footer,.metric-note,.ws-metrics span,.portal-bottom-cards small { font-size:8px }
}

@media(max-width:700px) {
  .hero-stage { margin-top:65px }
  .hero-actions .button { font-size:14px;padding:0 13px }
  .hero-note { font-size:12px }
  .announcement { font-size:13px;min-height:52px;height:auto;flex-wrap:wrap;text-align:center }
  .stage-tabs { border-bottom:1px solid #14212755 }
  .stage-tabs button { flex:0 0 auto;border-radius:0;border:0;border-bottom:2px solid transparent;padding:10px 13px;font-size:11px }
  .stage-tabs button[aria-selected="true"] { background:transparent;border:0;border-bottom:2px solid var(--ink);box-shadow:none }
  .mobile-menu { top:64px;max-height:calc(100dvh - 64px);overflow-y:auto }
  .project-info strong,.ws-card-title strong,.next-event strong,.check-item b,.task-label { font-size:10px }
  .project-info span,.next-event small,.check-item small,.task-row small { font-size:8px }
  .workspace-footer,.metric-note,.ws-metrics span { font-size:7px }
  .story-copy h2 { font-family:var(--sans);font-size:36px;line-height:1.08 }
}

@media(max-width:380px) {
  .hero h1 {
    font-size:43px
  }
  .hero-actions .button {
    font-size:9px;
    padding:0 11px
  }
  .stage-tabs button {
    padding:9px 10px
  }
  .portal-help {
    display:none
  }
  .plan-preview>div {
    min-height:150px
  }

}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important
  }

}

@media(min-width:701px) {
  .hero {
    padding-top:100px
  }
  .hero h1 {
    font-size:clamp(50px,5vw,64px);
    max-width:900px
  }

}

@media(min-width:701px) {
  .hero {
    padding-top:70px
  }
  .hero-stage {
    margin-top:92px
  }
  .stage-tabs {
    gap:0;
    padding:0 0 0;
    background:transparent
  }
  .stage-tabs button {
    flex:1;
    border-radius:0;
    border-bottom:1px solid #14212755;
    padding:14px 8px;
    font-size:13px
  }
  .stage-tabs button[aria-selected="true"] {
    background:transparent;
    border:0;
    border-bottom:2px solid var(--ink);
    box-shadow:none
  }
  .nav-trigger,.nav-link,.login-link {
    font-size:16px
  }
  .button {
    font-size:15px
  }
  .button-small {
    font-size:14px
  }
  .hero-copy {
    font-size:24px
  }
  .hero-note {
    font-size:13px
  }
  .eyebrow {
    font-size:12px
  }
  .story-copy p,.statement-body p,.dark-intro p,.connections-copy p,.proof-copy p,.payments-copy p {
    font-size:18px
  }
  .text-link {
    font-size:15px
  }
  .feature-pills span,.connection-pills span {
    font-size:12px
  }
  .business-heading>p {
    font-size:16px
  }
  .business-card h3 {
    font-size:28px
  }
  .business-card>p {
    font-size:13px
  }
  .proof-row b {
    font-size:14px
  }
  .proof-row p {
    font-size:12px
  }
  .pricing-tease p {
    font-size:16px
  }
  .plan-preview>div>span {
    font-size:9px
  }
  .plan-preview>div>b {
    font-size:13px
  }
  .plan-preview>div>small {
    font-size:11px
  }
  .plan-preview>a {
    font-size:13px
  }
  .faq-grid>div:first-child>p {
    font-size:14px
  }
  .faq-list summary {
    font-size:16px
  }
  .faq-list details p {
    font-size:14px
  }
  .footer-top>p,.footer-back {
    font-size:13px
  }
  .footer-links b {
    font-size:13px
  }
  .footer-links a {
    font-size:12px
  }
  .footer-bottom {
    font-size:11px
  }
  .footer-callout a {
    font-size:12px
  }
  .closing-content>p:not(.eyebrow) {
    font-size:16px
  }

}

@media(max-width:700px) {
  .hero-copy {
    font-size:16px
  }
  .nav-trigger,.nav-link {
    font-size:14px
  }
  .button {
    font-size:13px
  }
  .story-copy p,.statement-body p,.dark-intro p,.connections-copy p,.proof-copy p,.payments-copy p {
    font-size:15px
  }
  .text-link {
    font-size:14px
  }
  .faq-list summary {
    font-size:14px
  }
  .faq-list details p {
    font-size:13px
  }
  .footer-top>p,.footer-back {
    font-size:10px
  }
  .footer-links b {
    font-size:12px
  }
  .footer-links a {
    font-size:11px
  }
  .footer-bottom {
    font-size:9px
  }

}

/* Palette experiment: cream and ink blue carry the page; chartreuse marks active choices and calls to action. */
.announcement { background:var(--ink-blue);color:var(--cream) }
.announcement a { background:var(--chartreuse);color:var(--ink-blue);border-radius:24px;padding:7px 13px;text-decoration:none }
.site-header { background:var(--cream);box-shadow:0 1px 0 #172b5018 }
.button-dark:hover { background:#243a65 }
.button-outline { border-color:#172b5055 }
.button-yellow { background:var(--chartreuse);color:var(--ink-blue) }
.hero { background:var(--cream) }
.hero-note { color:#40506a }
.play-icon { border-color:#172b5055 }
.stage-tabs button[aria-selected="true"] { background:var(--chartreuse);border-color:var(--chartreuse);box-shadow:none }
.intro,.feature-story,.review-story,.business-types,.resources-section,.plans-section { background:var(--cream) }
.onboarding-panel,.review-mock { background:var(--powder-blue) }
.delivery-panel { background:var(--pale-periwinkle) }
.feature-pills span { background:var(--powder-blue) }
.feature-story#onboarding .feature-pills span:first-child { background:var(--chartreuse) }
.ai-workflow,.dark-cta,.site-footer { background:var(--ink-blue) }
.ai-capability[aria-pressed="true"] { background:#203961;border-color:var(--chartreuse) }
.ai-capability-icon { color:var(--chartreuse) }
.yellow-benefit { background:var(--cream) }
.yellow-benefit a,.plan-pricing-link,.plan-switch button[aria-pressed="true"] { background:var(--chartreuse);color:var(--ink-blue) }
.business-category { background:var(--chartreuse);color:var(--ink-blue) }
.integrations-band { background:var(--powder-blue) }
.adoption-photo { background:var(--ink-blue) }
.adoption-photo-bg { background-image:linear-gradient(90deg,#172b50e8 0%,#172b50b8 52%,#172b506b 100%),url('assets/team-patio-reference.webp') }
.adoption-copy h2 { color:var(--chartreuse) }
.adoption-cards article { background:var(--cream);color:var(--ink-blue) }
.adoption-cards .adoption-icon { background:var(--powder-blue);color:var(--ink-blue) }
.adoption-cards button,.adoption-cards a { display:inline-flex;align-items:center;background:var(--chartreuse);color:var(--ink-blue);border:0;border-radius:22px;padding:7px 11px }
.portal-highlight { background:var(--pale-periwinkle) }
.portal-mobile-band { background:var(--powder-blue) }
.phone-mock { background:var(--ink-blue);border-color:var(--ink-blue) }
.button-white { background:var(--cream);color:var(--ink-blue) }
.footer-container { background:var(--cream);color:var(--ink-blue) }
.footer-start { background:var(--ink-blue) }
.footer-legal { border-color:#f7f3e866 }
.footer-legal a { color:var(--cream) }

/* Neue Montreal trial typography and restrained component geometry. */
.hero h1,.intro h2,.story-copy h2,.peach-feature-copy h2,.ai-workflow-copy h2,
.yellow-benefit p,.business-heading h2,.proof-heading h2,.integration-heading h2,
.adoption-copy h2,.resources-heading h2,.plans-heading h2,.portal-highlight-copy h2,
.portal-mobile-inner h2,.dark-cta-copy h2,.business-card-panel h3,.proof-card h3,
.resource-yellow h3,.plan-card h3,.footer-column h3 {
  font-family:var(--sans);
  font-weight:400;
  line-height:1.03;
  letter-spacing:-.035em
}
.hero h1 { font-size:clamp(44px,5vw,64px);max-width:900px }
.story-copy h2,.ai-workflow-copy h2 { font-size:44px }
.intro { padding:76px 24px 40px;border-bottom:1px solid #172b5030 }
.intro-inner { max-width:1152px;text-align:left }
.intro h2 { max-width:760px;margin:0;font-size:48px }
.feature-story + .feature-story,.review-story { border-top:1px solid #172b501a }
.button,.button-dark,.button-yellow,.button-white,.button-outline {
  min-height:50px;
  height:50px;
  border-radius:8px;
  font-family:var(--sans);
  font-weight:600
}
.button-small { min-height:48px;height:48px;border-radius:8px }
.footer-start { min-height:48px;display:inline-flex;align-items:center;border-radius:8px;font-family:var(--sans);font-weight:600 }
.nav-menu { border-radius:12px }
.nav-menu a { border-radius:8px }
.announcement a,.yellow-benefit a,.integration-link,.plan-pricing-link,.adoption-cards button,.adoption-cards a {
  min-height:48px;
  display:inline-flex;
  align-items:center;
  border-radius:8px;
  font-family:var(--sans);
  font-weight:600
}
.announcement a { padding:0 13px }
.yellow-benefit a,.plan-pricing-link,.integration-link { padding:0 17px }
.adoption-cards button,.adoption-cards a { padding:0 11px }
.nav-menu,.audience-carousel .business-card,.proof-card,.resource-image,.plan-card,.peach-photo,
.adoption-cards article,.footer-container,.resource-yellow { border-radius:12px }
.audience-carousel .business-card { overflow:hidden }
.brand { font-family:var(--brand-sans);font-weight:600 }
@media(max-width:700px) {
  .site-header { top:66px }
  .hero h1 { font-size:clamp(42px,11vw,58px) }
  .intro { padding:62px 19px 28px }
  .intro h2,.business-heading h2,.proof-heading h2,.integration-heading h2,
  .resources-heading h2,.plans-heading h2,.portal-highlight-copy h2,
  .dark-cta-copy h2 { font-size:38px }
  .story-copy h2,.peach-feature-copy h2,.ai-workflow-copy h2,
  .adoption-copy h2,.portal-mobile-inner h2 { font-size:36px }
  .yellow-benefit p { font-size:25px }
  .button,.button-dark,.button-yellow,.button-white,.button-outline { min-height:50px;height:50px }
  .announcement a { min-height:32px;height:32px;padding:0 10px }
}
@media(max-width:380px) {
  .hero h1 { font-size:42px }
}

/* Two-mode, client-facing hero demo. */
.hero h1 { font-size:clamp(48px,5.625vw,72px);max-width:1040px;text-wrap:balance }
.hero-copy { font-size:26px;line-height:1.42;max-width:680px;text-wrap:balance }
.hero-stage { max-width:1180px;margin:64px auto 0;scroll-margin-top:140px }
.demo-modebar { display:flex;justify-content:flex-end;padding:0 2px 12px;color:#172b50a8;font-size:14px }
.demo-modebar i { padding:0 4px;font-style:normal;color:var(--ink-blue) }
.stage-tabs { display:flex;gap:10px;border-bottom:1px solid #172b5030 }
.stage-tabs button { flex:1;min-height:58px;padding:10px 18px;border:0;border-radius:8px 8px 0 0;background:transparent;color:var(--ink-blue);font:600 17px var(--sans);text-align:center;cursor:pointer }
.stage-tabs button[aria-selected="true"] { color:var(--ink-blue);background:var(--chartreuse);box-shadow:none }
.stage-tabs button:focus-visible,.portal-demo-nav button:focus-visible,.flow-demo-actions button:focus-visible,
.flow-demo-fields button:focus-visible,.portal-home-card:focus-visible,.portal-file-row:focus-visible { outline:3px solid #496da4;outline-offset:3px }
.demo-panel { display:grid;min-height:500px;background:#fff;border-radius:0 0 12px 12px;overflow:hidden;box-shadow:0 20px 54px #172b5014 }
.demo-panel[hidden] { display:none }
.demo-windowbar { display:flex;align-items:center;justify-content:space-between;min-height:58px;padding:0 30px;border-bottom:1px solid #172b5015;background:#fff }
.demo-brand { display:flex;align-items:center;gap:10px;color:var(--ink-blue);font:600 15px var(--sans) }
.demo-brandmark { display:grid;width:29px;height:29px;place-items:center;border-radius:8px;background:var(--ink-blue);color:var(--cream);font:600 15px var(--sans) }
.demo-client { color:#172b50a8;font-size:13px }.demo-client b { padding:0 6px;color:#172b5066 }
.onboarding-demo { grid-template-rows:auto 1fr;background:#f7f8fa }
.flow-demo-content { width:min(100% - 40px,650px);margin:38px auto 32px }
.flow-demo-progress { display:flex;justify-content:space-between;color:#52627b;font-size:12px;font-weight:600;letter-spacing:.08em }
.flow-demo-progress span:last-child { letter-spacing:0 }.flow-demo-progress b { color:var(--ink-blue);font-size:15px }
.flow-demo-track {height:4px;margin:12px 0 28px;border-radius:4px;background:#172b5014;overflow:hidden}.flow-demo-track i {display:block;width:25%;height:100%;background:#6789bc;transition:width .2s ease}
.flow-demo-card {min-height:280px;padding:32px 38px;border:1px solid #172b5014;border-radius:12px;background:#fff;box-shadow:0 8px 24px #172b5008}
.flow-demo-icon {display:grid;width:42px;height:42px;place-items:center;border-radius:12px;background:var(--periwinkle);color:var(--ink-blue);font-size:17px;font-weight:600}
.flow-demo-eyebrow {margin:20px 0 8px;color:#65748b;font-size:11px;font-weight:600;letter-spacing:.09em}
.flow-demo-card h2 {margin:0;color:var(--ink-blue);font:400 32px/1.12 var(--sans);letter-spacing:-.035em}
.flow-demo-description {max-width:510px;margin:10px 0 0;color:#53627a;font-size:15px;line-height:1.55}
.flow-demo-fields {display:grid;gap:12px;margin-top:20px}.flow-demo-fields:empty {display:none}
.flow-demo-fields label {display:grid;gap:6px;color:#34445e;font-size:12px;font-weight:600}
.flow-demo-fields input,.flow-demo-fields textarea,.portal-message-form input {width:100%;min-height:40px;padding:9px 11px;border:1px solid #172b5028;border-radius:8px;background:#fff;color:var(--ink-blue);font:400 14px/1.4 var(--sans);resize:vertical}
.flow-demo-actions {display:flex;align-items:center;justify-content:space-between;margin-top:18px}
.demo-back,.demo-next {min-height:44px;padding:0 16px;border:1px solid #172b5028;border-radius:8px;background:#fff;color:var(--ink-blue);font:600 14px var(--sans);cursor:pointer}
.demo-back:disabled {opacity:.42;cursor:default}.demo-next {border-color:var(--ink-blue);background:var(--ink-blue);color:var(--cream)}
.sample-file-row {display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #172b5018;border-radius:8px;background:#f8f9fb}
.sample-file-icon {display:grid;flex:none;width:40px;height:42px;place-items:center;border-radius:8px;background:var(--periwinkle);color:var(--ink-blue);font-size:10px;font-weight:600}
.sample-file-row span:nth-child(2),.portal-file-row span:nth-child(2) {display:grid;gap:3px;flex:1;min-width:0}.sample-file-row b,.portal-file-row b {font-size:13px}.sample-file-row small,.portal-file-row small {color:#66758b;font-size:11px}
.sample-file-row button {padding:8px 10px;border:1px solid #172b5024;border-radius:8px;background:#fff;color:var(--ink-blue);font:600 12px var(--sans);cursor:pointer}
.demo-inline-note {margin:10px 0 0;color:#6a788c;font-size:11px;line-height:1.45}
.flow-complete-summary {display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #172b5015}.flow-complete-summary>span {display:grid;width:24px;height:24px;place-items:center;border-radius:50%;background:#e8efdf;color:#36543a;font-size:12px}.flow-complete-summary div {display:grid;gap:3px}.flow-complete-summary b {font-size:13px}.flow-complete-summary small {color:#6a788c;font-size:11px}
.portal-demo {grid-template-columns:248px minmax(0,1fr);min-height:500px;background:#f5f6f8}
.portal-demo-sidebar {display:flex;flex-direction:column;min-height:500px;padding:24px 16px 18px;border-right:1px solid #172b5015;background:#fff}
.portal-demo-sidebar>.demo-brand {padding:0 8px 22px}
.portal-demo-client {display:flex;align-items:center;gap:10px;margin:0 2px 19px;padding:13px 8px;border-top:1px solid #172b5012;border-bottom:1px solid #172b5012;color:var(--ink-blue);font-size:13px;font-weight:600}
.portal-demo-client>span:last-child {display:grid;gap:3px}.portal-demo-client small {color:#778397;font-size:11px;font-weight:400}
.demo-avatar {display:grid;flex:none;width:34px;height:34px;place-items:center;border-radius:50%;background:#e4eaf3;color:#334a6e;font-size:11px;font-weight:600}
.portal-demo-nav {display:grid;gap:4px}.portal-demo-nav button {display:flex;align-items:center;gap:10px;min-height:42px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:#52627a;text-align:left;font:400 13px var(--sans);cursor:pointer}
.portal-demo-nav button[aria-current="page"] {background:#e8edf5;color:var(--ink-blue);font-weight:600}.portal-demo-nav button>span {width:17px;text-align:center;font-size:16px}.portal-demo-nav button>b {margin-left:auto;color:#63738a;font-size:11px;font-weight:500}
.portal-demo-help {margin-top:auto;padding:13px 9px;border-top:1px solid #172b5012;color:var(--ink-blue);font-size:12px;font-weight:600;line-height:1.7}.portal-demo-help span {color:#788498;font-size:11px;font-weight:400}
.portal-demo-main {min-width:0;padding:22px 28px 30px}.portal-demo-top {display:flex;align-items:center;justify-content:space-between;color:#6e7b8e;font-size:10px;font-weight:600;letter-spacing:.1em}.small-avatar {width:29px;height:29px;font-size:10px}
.portal-demo-content {max-width:720px;margin:30px auto}.portal-section-intro>p {margin:0 0 7px;color:#788498;font-size:10px;font-weight:600;letter-spacing:.1em}.portal-section-intro h2 {margin:0;color:var(--ink-blue);font:400 27px/1.15 var(--sans);letter-spacing:-.03em}.portal-section-intro>span {display:block;margin-top:7px;color:#65748b;font-size:13px;line-height:1.5}
.portal-home-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:21px}.portal-home-card {position:relative;display:grid;gap:7px;min-height:112px;padding:15px 36px 14px 15px;border:1px solid #172b5015;border-radius:10px;background:#fff;color:var(--ink-blue);text-align:left;cursor:pointer}.portal-home-card small {color:#768397;font-size:10px}.portal-home-card b {font-size:13px}.portal-home-card>span {color:#65748b;font-size:11px}.portal-home-card i {position:absolute;right:14px;top:42px;color:#6e7f98;font-style:normal}
.portal-home-project,.portal-list-card,.portal-file-detail,.portal-message-thread {margin-top:14px;padding:16px;border:1px solid #172b5015;border-radius:10px;background:#fff}
.portal-home-project {display:flex;align-items:center;justify-content:space-between}.portal-home-project>div {display:grid;gap:5px}.portal-home-project small,.portal-file-detail>small {color:#778397;font-size:9px;font-weight:600;letter-spacing:.1em}.portal-home-project b {font-size:13px}.portal-home-project span {color:#66758b;font-size:11px}.portal-project-status {padding:6px 9px;border-radius:6px;background:#eaf0e5;color:#405c42!important;font-size:10px!important}
.portal-list-heading {display:flex;justify-content:space-between;padding-bottom:11px;border-bottom:1px solid #172b5012;color:var(--ink-blue);font-size:12px}.portal-list-heading span {color:#6e7b8e;font-size:11px}
.portal-task-row {display:flex;align-items:center;gap:11px;padding:15px 2px;border-bottom:1px solid #172b5012;cursor:pointer}.portal-task-row:last-child {border-bottom:0}.portal-task-row input {width:16px;height:16px;accent-color:#516e99}.portal-task-row span {display:grid;gap:4px}.portal-task-row b {color:var(--ink-blue);font-size:13px}.portal-task-row small {color:#6d7b8f;font-size:11px}
.portal-files-layout {display:grid;grid-template-columns:1.1fr .9fr;gap:12px;margin-top:18px}.portal-file-row {display:flex;width:100%;align-items:center;gap:10px;padding:11px 0;border:0;border-bottom:1px solid #172b5012;background:transparent;color:var(--ink-blue);text-align:left;cursor:pointer}.portal-file-row:last-child {border-bottom:0}.portal-file-row.selected {background:#f3f5f8}.portal-file-row .sample-file-icon {width:34px;height:36px}.portal-file-detail {display:flex;flex-direction:column;align-items:flex-start;gap:9px;margin:0}.portal-file-detail>b {color:var(--ink-blue);font-size:12px}.portal-file-detail>p {margin:0;color:#68778c;font-size:11px;line-height:1.5}
.portal-message-thread {padding:15px}.portal-team-message {display:flex;gap:10px}.portal-team-message>div {min-width:0}.portal-team-message b {color:var(--ink-blue);font-size:12px}.portal-team-message p {margin:6px 0;color:#4e5e75;font-size:12px;line-height:1.5}.portal-team-message small,.portal-client-message small {color:#8190a2;font-size:10px}.portal-client-message {width:fit-content;max-width:85%;margin:14px 0 4px auto;padding:10px 12px;border-radius:10px 10px 2px 10px;background:#e8edf5;color:var(--ink-blue)}.portal-client-message p {margin:0 0 5px;font-size:12px;line-height:1.45}
.portal-message-form {display:grid;gap:7px;margin-top:18px}.portal-message-form label {color:#5e6d83;font-size:11px;font-weight:600}.portal-message-form>div {display:flex;gap:8px}.portal-message-form input {min-width:0;min-height:40px}.portal-message-form button {flex:none;padding:0 12px;border:0;border-radius:8px;background:var(--ink-blue);color:var(--cream);font:600 11px var(--sans);cursor:pointer}
.portal-invoice-row {display:flex;align-items:center;gap:11px;padding:14px 0;border-bottom:1px solid #172b5012}.portal-invoice-row:last-child {border-bottom:0}.invoice-icon {display:grid;width:32px;height:32px;place-items:center;border-radius:8px;background:#eaf0e5;color:#405c42}.invoice-icon.muted {background:#edf0f4;color:#68778c}.portal-invoice-row>span:nth-child(2) {display:grid;flex:1;gap:4px}.portal-invoice-row b {color:var(--ink-blue);font-size:12px}.portal-invoice-row small {color:#728095;font-size:10px}.portal-invoice-row strong {color:#405c42;font-size:10px}.portal-invoice-row .invoice-open {color:#68778c}
@media(max-width:700px) {
  .hero h1 { font-size:clamp(45px,11.5vw,60px) }
  .hero-copy { font-size:18px;line-height:1.45 }
  .hero-stage { margin-top:48px;scroll-margin-top:120px }
  .demo-modebar { justify-content:flex-start;font-size:12px }
  .stage-tabs { gap:4px }.stage-tabs button { min-height:48px;padding:8px 10px;font-size:14px }
  .demo-panel { min-height:0 }.demo-windowbar { min-height:50px;padding:0 14px }.demo-brand {font-size:12px}.demo-brandmark {width:25px;height:25px}.demo-client {font-size:10px}
  .flow-demo-content { width:calc(100% - 24px);margin:22px auto 18px }.flow-demo-card {min-height:260px;padding:22px 18px}.flow-demo-card h2 {font-size:26px}.flow-demo-description {font-size:13px}.flow-demo-actions {margin-top:13px}
  .portal-demo {grid-template-columns:1fr;min-height:0}.portal-demo-sidebar {min-height:0;padding:14px 14px 9px;border-right:0;border-bottom:1px solid #172b5015}.portal-demo-sidebar>.demo-brand {display:none}.portal-demo-client {display:none}.portal-demo-nav {display:flex;gap:3px;overflow-x:auto;padding-bottom:2px}.portal-demo-nav button {flex:none;gap:6px;min-height:39px;padding:0 10px;font-size:11px}.portal-demo-nav button>span {font-size:14px}.portal-demo-nav button>b {margin-left:0}.portal-demo-help {display:none}.portal-demo-main {padding:14px 13px 20px}.portal-demo-top {font-size:9px}.portal-demo-content {margin:18px auto}.portal-section-intro h2 {font-size:23px}.portal-section-intro>span {font-size:12px}.portal-home-grid {gap:8px;margin-top:15px}.portal-home-card {min-height:102px;padding:12px 25px 11px 11px}.portal-home-card b {font-size:11px}.portal-home-card>span {font-size:10px}.portal-home-card i {right:10px}.portal-home-project,.portal-list-card,.portal-file-detail,.portal-message-thread {padding:12px}.portal-files-layout {grid-template-columns:1fr}.portal-file-detail {margin-top:0}.portal-task-row b {font-size:12px}
}

/* Client home layout follows the real portal's task and invoice panels. */
.portal-demo-sidebar { background:var(--ink-blue);border-right:0;color:#fff }
.portal-demo-sidebar>.demo-brand { color:#fff }
.portal-demo-sidebar>.demo-brand .demo-brandmark { background:var(--chartreuse);color:var(--ink-blue) }
.portal-demo-client { border-color:#ffffff29;color:#fff }
.portal-demo-client small { color:#ffffffb8 }
.portal-demo-client .demo-avatar { background:#ffffff21;color:#fff }
.portal-demo-nav button { color:#ffffffd6;font-size:14px }
.portal-demo-nav button[aria-current="page"] { background:#e2e9d1;color:var(--ink-blue) }
.portal-demo-nav button>b { color:inherit }
.portal-demo-help { border-color:#ffffff29;color:#fff }
.portal-demo-help span { color:#ffffffb8 }
.portal-demo-content { max-width:760px;margin:30px 0 }
.portal-section-intro { text-align:left }
.portal-section-intro h2 { font-size:30px }
.portal-section-intro>span { font-size:15px }
.portal-home-grid { align-items:stretch;gap:16px;margin-top:24px }
.portal-home-card.portal-home-list { display:block;min-height:0;padding:0;border-radius:10px;cursor:default }
.portal-home-list>header { display:flex;align-items:center;justify-content:space-between;padding:15px 16px 11px;border-bottom:1px solid #172b5015 }
.portal-home-list h3 { margin:0;color:var(--ink-blue);font:600 15px/1.25 var(--sans);letter-spacing:-.015em }
.portal-home-list>header button { border:0;background:transparent;color:#4a648b;font:600 12px var(--sans);cursor:pointer }
.portal-home-row { display:flex;align-items:center;gap:11px;min-height:67px;padding:11px 16px;border-bottom:1px solid #172b500e }
.portal-home-row:last-child { border-bottom:0 }
.portal-home-row>span:last-child { display:grid;gap:5px;min-width:0 }
.portal-home-row b { color:var(--ink-blue);font-size:14px;line-height:1.3 }
.portal-home-row small { color:#65748b;font-size:12px;line-height:1.35 }
.portal-row-dot { width:9px;height:9px;flex:none;border:1.5px solid #8292aa;border-radius:50% }
.portal-invoice-mark { display:grid;width:27px;height:27px;flex:none;place-items:center;border-radius:50%;background:#eef1e8;color:#496347;font-size:13px }
.portal-home-project { margin-top:16px;padding:18px }
.portal-home-project small { font-size:10px }
.portal-home-project b { font-size:15px }
.portal-home-project span { font-size:13px }
.portal-section-intro>p { font-size:11px }
.portal-list-heading { font-size:14px }
.portal-list-heading span { font-size:12px }
.portal-task-row b,.portal-file-row b,.portal-invoice-row b { font-size:14px }
.portal-task-row small,.portal-file-row small,.portal-invoice-row small { font-size:12px }
.portal-team-message b { font-size:14px }
.portal-team-message p,.portal-client-message p { font-size:14px }
.portal-message-form label { font-size:13px }
.flow-reset { margin-top:12px;padding:7px 0;border:0;background:transparent;color:#4a648b;font:600 13px var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer }
.flow-reset:focus-visible { outline:3px solid #496da4;outline-offset:3px }
@media(max-width:700px) {
  .portal-demo-sidebar { background:var(--ink-blue) }
  .portal-demo-nav button { color:#ffffffd6;font-size:12px }
  .portal-demo-nav button[aria-current="page"] { background:#e2e9d1;color:var(--ink-blue) }
  .portal-demo-content { margin:18px 0 }
  .portal-section-intro h2 { font-size:25px }
  .portal-section-intro>span { font-size:14px }
  .portal-home-grid { grid-template-columns:1fr;gap:10px;margin-top:17px }
  .portal-home-list>header { padding:12px 13px 9px }
  .portal-home-row { min-height:58px;padding:9px 13px }
  .portal-home-row b { font-size:13px }
  .portal-home-row small { font-size:11px }
  .portal-home-project b { font-size:13px }
  .portal-home-project span { font-size:11px }
}

@font-face { font-family: Inter; src: url("assets/app-preview-fonts/inter-400.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url("assets/app-preview-fonts/inter-600.woff2") format("woff2"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("assets/app-preview-fonts/space-grotesk-variable.ttf") format("truetype"); font-style: normal; font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("assets/app-preview-fonts/plus-jakarta-sans-latin.woff2") format("woff2"); font-style: normal; font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Portal Boxicons"; src: url("assets/app-preview-fonts/boxicons.woff2") format("woff2"); font-style: normal; font-weight: normal; font-display: block; }
.bx-home-alt::before { content: "\eb13"; }
.bx-flag::before { content: "\eade"; }
.bx-check-square::before { content: "\ea49"; }
.bx-git-branch::before { content: "\eaf0"; }
.bx-shopping-bag::before { content: "\ec0b"; }
.bx-receipt::before { content: "\ebd5"; }
.bx-folder::before { content: "\eadf"; }
.bx-message-rounded-dots::before { content: "\eb78"; }
.bx-bell::before { content: "\e9d2"; }
.bx-cog::before { content: "\ea6e"; }
.portal-demo-nav i,.portal-settings-button i { font-family:"Portal Boxicons"; font-style:normal; font-weight:normal; speak:none; }

/* App-grounded hero demos: flow renderer and client portal sample layouts. */
.demo-panel { min-height:720px; border:1px solid #e4e4e7; border-radius:12px; box-shadow:0 16px 42px #172b5010; }
.onboarding-demo { display:block; min-height:760px; padding-bottom:48px; background:#fafafa; color:#09090b; font-family:Inter,Arial,sans-serif; }
.app-flow-header { display:flex; align-items:center; justify-content:space-between; min-height:68px; padding:0 30px; border-bottom:1px solid #e4e4e7; background:#fff; color:#18181b; font:14px Inter,Arial,sans-serif; }
.app-flow-brand { display:flex; align-items:center; gap:10px; }
.app-flow-brand b { font-size:14px; font-weight:600; }
.app-logo-mark,.portal-demo-logo { display:grid; width:30px; height:30px; place-items:center; border-radius:8px; background:#2563eb; color:#fff; font-size:14px; font-weight:700; }
.app-flow-title { color:#52525b; font-size:13px; }
.app-flow-save { display:flex; align-items:center; gap:7px; color:#52525b; font-size:13px; }
.app-flow-save i { display:grid; width:18px; height:18px; place-items:center; border-radius:50%; background:#e8f5eb; color:#22823e; font-size:11px; font-style:normal; }
.app-flow-progress { overflow-x:auto; padding:20px 30px 0; background:#fff; }
.app-flow-progress>div { display:flex; align-items:center; justify-content:space-between; min-width:670px; max-width:1060px; margin:0 auto; }
.app-progress-step { position:relative; display:flex; align-items:center; gap:10px; min-height:42px; padding:0 14px; border:1px solid transparent; border-radius:24px; color:#71717a; font:500 14px Inter,Arial,sans-serif; white-space:nowrap; }
.app-progress-step:not(:last-child)::after { position:absolute; left:calc(100% + 2px); width:clamp(12px,4vw,48px); border-top:2px dotted #d4d4d8; content:""; }
.app-progress-step b { display:grid; width:28px; height:28px; flex:none; place-items:center; border:1px solid #d4d4d8; border-radius:50%; color:#71717a; font-size:12px; font-weight:600; }
.app-progress-step.is-current { border-color:#2563eb; color:#18181b; }
.app-progress-step.is-current b { border-color:#2563eb; background:#2563eb; color:#fff; }
.app-progress-step.is-complete b { border-color:#2563eb; background:#eff6ff; color:#2563eb; }
.app-flow-content { width:min(100% - 48px,640px); margin:46px auto 0; font-family:Inter,Arial,sans-serif; }
.app-flow-eyebrow { margin:0 0 10px; color:#71717a; font-size:12px; font-weight:600; letter-spacing:.06em; }
.app-flow-content h2 { margin:0; color:#09090b; font:600 42px/1.15 "Space Grotesk",Inter,Arial,sans-serif; letter-spacing:-.04em; }
.app-flow-description { max-width:600px; margin:12px 0 28px; color:#52525b; font:400 16px/1.55 Inter,Arial,sans-serif; }
.app-flow-fields { display:grid; gap:17px; }
.app-flow-fields label { display:grid; gap:8px; color:#18181b; font:500 16px/1.35 Inter,Arial,sans-serif; }
.app-flow-fields input,.app-flow-fields textarea,.app-flow-fields select { width:100%; min-height:52px; padding:13px 15px; border:1px solid #e4e4e7; border-radius:9px; background:#f4f4f5; color:#18181b; font:400 15px Inter,Arial,sans-serif; }
.app-flow-fields textarea { min-height:104px; resize:vertical; }
.app-flow-fields input:focus,.app-flow-fields textarea:focus,.app-flow-fields select:focus { outline:2px solid #2563eb; outline-offset:2px; }
.app-flow-actions { display:flex; align-items:center; justify-content:space-between; margin-top:30px; padding-top:18px; border-top:1px solid #e4e4e7; }
.app-flow-back,.app-flow-next,.app-flow-reset { min-height:44px; padding:0 17px; border:1px solid #d4d4d8; border-radius:8px; background:#fff; color:#18181b; font:600 14px Inter,Arial,sans-serif; cursor:pointer; }
.app-flow-back:disabled { opacity:.42; cursor:default; }
.app-flow-next { border-color:#2563eb; background:#2563eb; color:#fff; }
.app-sample-file { display:flex; align-items:center; gap:14px; padding:14px; border:1px solid #e4e4e7; border-radius:10px; background:#fff; }
.app-file-icon { display:grid; width:42px; height:46px; flex:none; place-items:center; border-radius:8px; background:#eff6ff; color:#2563eb; font-size:11px; font-weight:700; }
.app-sample-file>span:nth-child(2) { display:grid; flex:1; gap:5px; color:#18181b; font-size:14px; }
.app-sample-file small { color:#71717a; font-size:12px; }
.app-sample-file button { min-height:36px; padding:0 11px; border:1px solid #d4d4d8; border-radius:7px; background:#fff; color:#18181b; font:500 13px Inter,Arial,sans-serif; cursor:pointer; }
.app-complete-card { display:flex; align-items:center; gap:13px; padding:18px; border:1px solid #e4e4e7; border-radius:10px; background:#fff; }
.app-complete-check { display:grid; width:32px; height:32px; place-items:center; border-radius:50%; background:#eff6ff; color:#2563eb; }
.app-complete-card div { display:grid; gap:5px; color:#18181b; font:600 15px Inter,Arial,sans-serif; }
.app-complete-card small { color:#71717a; font-size:13px; font-weight:400; }
.app-flow-reset { justify-self:start; margin-top:8px; }
.portal-demo { grid-template-columns:248px minmax(0,1fr); min-height:720px; background:#f7f6f3; color:#222; font-family:"Plus Jakarta Sans",Inter,Arial,sans-serif; }
.portal-demo-sidebar { min-height:720px; padding:22px 14px 18px; border:0; background:#3467ea; color:#fff; }
.portal-demo-brand { display:flex; align-items:center; gap:10px; padding:0 10px 25px; color:#fff; font-size:14px; font-weight:700; }
.portal-demo-logo { background:#fff; color:#3467ea; }
.portal-demo-client { margin:0 0 18px; padding:14px 8px; border-color:#ffffff33; color:#fff; }
.portal-demo-client>span:last-child { display:grid; gap:4px; }
.portal-demo-client b { color:#fff; font-size:13px; font-weight:600; }
.portal-demo-client small { color:#ffffffbd; font-size:11px; }
.portal-demo-nav { gap:5px; }
.portal-demo-nav button { min-height:42px; padding:0 11px; color:#fff; font:400 13px "Plus Jakarta Sans",Inter,Arial,sans-serif; }
.portal-demo-nav button[aria-current="page"] { background:#fff; color:#222; font-weight:600; }
.portal-demo-nav button>b { color:inherit; }
.portal-icon { width:18px!important; font-size:17px!important; }
.portal-demo-sidebar-bottom { display:flex; align-items:center; gap:10px; margin-top:auto; padding:15px 10px 0; border-top:1px solid #ffffff33; color:#fff; font-size:12px; }
.portal-demo-sidebar-bottom i { display:grid; width:27px; height:27px; place-items:center; margin-left:auto; border-radius:50%; background:#fff; color:#3467ea; font-size:10px; font-style:normal; font-weight:700; }
.portal-demo-main { min-width:0; padding:30px 32px; background:#f7f6f3; }
.portal-demo-content { width:100%; max-width:1040px; margin:0 auto; }
.portal-page-heading { margin:0 0 23px; }
.portal-page-heading h2 { margin:0; color:#222; font:700 24px/1.3 "Plus Jakarta Sans",Inter,Arial,sans-serif; letter-spacing:-.025em; }
.portal-page-heading p { margin:5px 0 0; color:#777; font:400 14px/1.5 "Plus Jakarta Sans",Inter,Arial,sans-serif; }
.portal-app-card { min-width:0; padding:18px 20px; border:1px solid #e9e8e5; border-radius:16px; background:#fff; }
.portal-card-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.portal-card-heading h3 { margin:0; color:#222; font:600 16px/1.35 "Plus Jakarta Sans",Inter,Arial,sans-serif; }
.portal-card-heading button { padding:5px 0; border:0; background:transparent; color:#3467ea; font:500 12px "Plus Jakarta Sans",Inter,Arial,sans-serif; cursor:pointer; }
.portal-invoices-card { margin-bottom:16px; }
.portal-invoices-card .portal-card-heading { margin-bottom:4px; }
.portal-invoice-row { display:grid; grid-template-columns:minmax(120px,1fr) minmax(100px,auto) 72px; align-items:center; gap:12px; min-height:56px; padding:6px 2px; border-bottom:1px solid #f0efed; }
.portal-invoice-row:last-child { border-bottom:0; }
.portal-invoice-row>span:first-child { display:grid; gap:3px; }
.portal-invoice-row b { color:#303030; font:600 13px "Plus Jakarta Sans",Inter,Arial,sans-serif; }
.portal-invoice-row small,.portal-invoice-row em { color:#777; font:400 12px "Plus Jakarta Sans",Inter,Arial,sans-serif; font-style:normal; }
.portal-invoice-row strong { color:#303030; font:600 13px "Plus Jakarta Sans",Inter,Arial,sans-serif; }
.portal-invoice-row em { text-align:right; }
.portal-invoice-row .paid-label { color:#37824c; }
.portal-invoice-dot { width:8px; height:8px; border-radius:50%; background:#54a36a; }
.portal-invoice-dot.due-dot { background:#d69a36; }
.portal-home-lower { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:16px; }
.portal-home-lower .portal-app-card { padding:18px; }
.portal-task-row { display:flex; align-items:center; gap:11px; min-height:42px; padding:7px 3px; border-bottom:0; color:#363636; font:400 13px "Plus Jakarta Sans",Inter,Arial,sans-serif; }
.portal-task-row small { margin-left:auto; color:#8a8a8a; font:400 11px "Plus Jakarta Sans",Inter,Arial,sans-serif; white-space:nowrap; }
.portal-check,.portal-task-row input { display:grid; width:17px; height:17px; flex:none; place-items:center; margin:0; border:1px solid #d0d0d0; border-radius:50%; color:#fff; font-size:11px; }
.portal-check.checked { border-color:#3467ea; background:#3467ea; }
.portal-task-row input { accent-color:#3467ea; }
.portal-task-row .task-done { color:#858585; text-decoration:line-through; }
.portal-activity-row { display:flex; align-items:center; gap:10px; min-height:52px; border-bottom:1px solid #f1f0ee; }
.portal-activity-row:last-child { border-bottom:0; }
.portal-activity-row>span:last-child { display:grid; gap:4px; }
.portal-activity-row b { color:#333; font:600 12px "Plus Jakarta Sans",Inter,Arial,sans-serif; }
.portal-activity-row small { color:#777; font:400 12px "Plus Jakarta Sans",Inter,Arial,sans-serif; }
.portal-activity-icon { display:grid; width:32px; height:32px; place-items:center; border-radius:50%; background:#f0f3fa; color:#3467ea; }
.portal-task-list .portal-card-heading span { color:#777; font:400 12px "Plus Jakarta Sans",Inter,Arial,sans-serif; }
.portal-task-list .portal-task-row { min-height:46px; border-radius:8px; background:#f8f8f7; padding:6px 12px; margin-top:5px; }
.portal-files-card { padding:4px 20px; }
.portal-file-row { display:flex; align-items:center; gap:14px; min-height:72px; border-bottom:1px solid #f0efed; }
.portal-file-row:last-child { border-bottom:0; }
.portal-file-icon { display:grid; width:36px; height:40px; place-items:center; border-radius:7px; background:#eff4ff; color:#3467ea; font:700 10px "Plus Jakarta Sans",Inter,Arial,sans-serif; }
.portal-file-row>span:nth-child(2) { display:grid; flex:1; gap:4px; }
.portal-file-row b { color:#333; font:600 14px "Plus Jakarta Sans",Inter,Arial,sans-serif; }
.portal-file-row small,.portal-file-row time { color:#777; font:400 12px "Plus Jakarta Sans",Inter,Arial,sans-serif; }
.portal-file-row time { margin-left:auto; }
.portal-message-card { padding:20px; }
.portal-chat-message { max-width:82%; margin:0 auto 18px 0; }
.portal-chat-message.client-chat { margin-right:0; margin-left:auto; }
.portal-chat-message>small { display:block; margin:0 0 6px 4px; color:#747474; font:500 12px "Plus Jakarta Sans",Inter,Arial,sans-serif; }
.portal-chat-message p { margin:0; padding:13px 15px; border-radius:13px; background:#f0f0ef; color:#333; font:400 14px/1.55 "Plus Jakarta Sans",Inter,Arial,sans-serif; }
.portal-chat-message.client-chat p { background:#e8efff; }
.portal-chat-message time { display:block; margin:5px 3px 0; color:#929292; font:400 11px "Plus Jakarta Sans",Inter,Arial,sans-serif; }
.portal-message-note { margin:18px -20px -20px; padding:14px 18px; border-top:1px solid #eee; color:#777; font:400 12px/1.45 "Plus Jakarta Sans",Inter,Arial,sans-serif; }
.demo-panel :focus-visible { outline:2px solid #2563eb; outline-offset:2px; }
@media(max-width:900px) {
 .demo-panel,.onboarding-demo,.portal-demo,.portal-demo-sidebar { min-height:0; }
 .app-flow-header { padding:0 18px; }
 .app-flow-title { display:none; }
 .app-flow-progress { padding:14px 16px 0; }
 .app-flow-progress>div { justify-content:flex-start; }
 .app-progress-step:not(:last-child)::after { width:18px; }
 .app-progress-step { gap:7px; padding:0 8px; font-size:11px; }
 .app-progress-step b { width:24px; height:24px; font-size:10px; }
 .app-flow-content { margin-top:30px; }
 .app-flow-content h2 { font-size:34px; }
 .portal-demo { grid-template-columns:1fr; }
 .portal-demo-sidebar { padding:12px 12px 8px; }
 .portal-demo-brand,.portal-demo-client,.portal-demo-sidebar-bottom { display:none; }
 .portal-demo-nav { display:flex; gap:4px; overflow-x:auto; padding-bottom:2px; }
 .portal-demo-nav button { flex:none; gap:6px; min-height:39px; padding:0 10px; font-size:12px; }
 .portal-demo-nav button>span { width:16px!important; font-size:15px!important; }
 .portal-demo-main { padding:22px 20px 25px; }
}
@media(max-width:600px) {
 .hero-stage { margin-top:42px; }
 .demo-modebar { font-size:12px; }
 .stage-tabs button { min-height:48px; font-size:14px; }
 .app-flow-header { min-height:56px; padding:0 12px; }
 .app-flow-brand b { font-size:12px; }
 .app-flow-progress { padding:12px 10px 0; }
 .app-flow-progress>div { min-width:610px; }
 .app-flow-content { width:calc(100% - 32px); margin-top:25px; }
 .app-flow-content h2 { font-size:29px; }
 .app-flow-description { margin-bottom:22px; font-size:15px; }
 .app-flow-fields label { font-size:14px; }
 .app-flow-fields input,.app-flow-fields textarea,.app-flow-fields select { min-height:48px; font-size:14px; }
 .app-sample-file { flex-wrap:wrap; }
 .app-sample-file>span:nth-child(2) { min-width:calc(100% - 70px); }
 .app-sample-file button { margin-left:56px; }
 .portal-demo-main { padding:18px 13px 20px; }
 .portal-page-heading h2 { font-size:21px; }
 .portal-home-lower { grid-template-columns:1fr; }
 .portal-invoice-row { grid-template-columns:minmax(88px,1fr) minmax(80px,auto) 52px; gap:7px; }
 .portal-invoice-row b,.portal-invoice-row strong { font-size:11px; }
 .portal-invoice-row small,.portal-invoice-row em { font-size:10px; }
 .portal-app-card { padding:14px; }
 .portal-files-card { padding:3px 12px; }
 .portal-chat-message { max-width:94%; }
}

/* Final source-matched alignment and navigation details. */
.demo-panel { text-align:left; }
.stage-tabs { width:max-content; max-width:100%; margin:0 auto 10px; padding:4px; gap:3px; border:1px solid #d7dce4; border-radius:9px; background:#f1f2f4; }
.stage-tabs button { flex:none; min-height:38px; padding:0 18px; border-radius:6px; background:transparent; font-size:14px; }
.stage-tabs button[aria-selected="true"] { background:#fff; box-shadow:0 1px 3px #172b5020; }
.app-flow-header { text-align:left; }
.app-flow-save { width:34px; height:34px; justify-content:center; padding:0; border:1px solid #e4e4e7; border-radius:8px; background:#fff; }
.app-flow-save svg { width:17px; height:17px; fill:none; stroke:#52525b; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.app-flow-progress>div { position:relative; min-width:0; }
.app-flow-progress>div::before { position:absolute; top:21px; right:26px; left:26px; border-top:2px dotted #d4d4d8; content:""; }
.app-progress-step { z-index:1; flex:0 0 auto; background:#fff; }
.app-progress-step:not(:last-child)::after { display:none; }
.app-progress-step.is-current { border-color:#2563eb; background:#eff6ff; }
.app-progress-step.is-current b { background:#fff; color:#2563eb; }
.app-progress-step.is-complete b { background:#eff6ff; }
.portal-demo-sidebar { position:relative; }
.portal-demo-client { margin-top:auto; margin-bottom:0; padding:14px 8px 0; border-top:1px solid #ffffff33; border-bottom:0; }
.portal-demo-nav { margin-top:8px; }
.portal-demo-nav button i { width:19px; flex:none; text-align:center; font-size:18px; }
.portal-demo-sidebar-bottom { display:block; margin-top:auto; padding:10px 4px 0; border-top:0; }
.portal-settings-button { display:flex; align-items:center; gap:11px; width:100%; min-height:37px; padding:0 8px; border:0; border-radius:8px; background:transparent; color:#fff; text-align:left; font:400 13px "Plus Jakarta Sans",Inter,sans-serif; }
.portal-settings-button i { width:19px; text-align:center; font-size:17px; }
.portal-client-identity { display:flex; align-items:center; gap:9px; margin-top:8px; padding:10px 8px 0; border-top:1px solid #ffffff33; }
.portal-client-identity>i { display:grid; width:30px; height:30px; place-items:center; border-radius:50%; background:#fff; color:#3467ea; font-size:10px; font-style:normal; font-weight:700; }
.portal-client-identity>span { display:grid; gap:3px; }
.portal-client-identity b { color:#fff; font-size:12px; font-weight:600; }
.portal-client-identity small { color:#ffffffbd; font-size:10px; }
.portal-invoice-row em { justify-self:end; width:max-content; padding:4px 9px; border-radius:20px; background:#fff4dc; color:#956200; font-size:11px; }
.portal-invoice-row em.paid-label { background:#e8f6ec; color:#2d7840; }
.portal-invoice-dot { display:none; }

.portal-check,.portal-task-row input { width:16px; height:16px; border-radius:4px; }
.portal-home-lower .portal-task-row { margin-top:5px; border-radius:8px; background:#f5f5f4; }
.portal-chat-message { width:fit-content; max-width:48%; }
.portal-chat-message.client-chat { margin-left:auto; }
.portal-chat-message.client-chat p { background:#3467ea; color:#fff; }
.portal-mobile-open,.portal-mobile-close,.portal-drawer-backdrop { display:none; }
.portal-milestone-row { margin:14px 0; }
.portal-milestone-row>div:first-child { display:flex; justify-content:space-between; color:#343434; font:400 13px "Plus Jakarta Sans",Inter,sans-serif; }
.portal-milestone-row span { color:#777; }
.portal-meter { height:6px; margin-top:8px; overflow:hidden; border-radius:5px; background:#eee; }
.portal-meter i { display:block; height:100%; border-radius:5px; background:#3467ea; }
.portal-empty-state h3 { margin:12px 0 5px; font:600 16px "Plus Jakarta Sans",Inter,sans-serif; }
.portal-empty-state p { margin:0 0 12px; color:#777; font:400 13px "Plus Jakarta Sans",Inter,sans-serif; }
.portal-empty-icon,.portal-service-icon { display:grid; width:36px; height:36px; place-items:center; border-radius:10px; background:#eff3fc; color:#3467ea; }
.portal-status-pill { display:inline-flex; width:max-content; padding:5px 9px; border-radius:20px; background:#e8f6ec; color:#347648; font:500 11px "Plus Jakarta Sans",Inter,sans-serif; }
.portal-service-row { display:flex; align-items:center; gap:12px; }
.portal-service-row>span:nth-child(2) { display:grid; flex:1; gap:4px; }
.portal-service-row b { font:600 14px "Plus Jakarta Sans",Inter,sans-serif; }
.portal-service-row small { color:#777; font:400 12px "Plus Jakarta Sans",Inter,sans-serif; }
.portal-activity-row time { margin-left:auto; color:#888; font:400 11px "Plus Jakarta Sans",Inter,sans-serif; }
@media(max-width:900px) {
 .app-flow-progress { overflow:hidden; }
 .app-flow-progress>div { min-width:0; }
 .app-progress-step { padding:0; border:0; background:transparent; }
 .app-progress-step.is-current { width:30px; height:30px; min-height:30px; padding:0; border:2px solid #2563eb; border-radius:50%; background:#eff6ff; }
 .app-progress-step.is-current span { display:none; }
 .app-progress-step b { width:24px; height:24px; border:0; background:transparent; }
 .app-flow-progress>div::before { top:15px; right:15px; left:15px; }
 .portal-mobile-open { display:flex; align-items:center; gap:11px; width:100%; height:56px; padding:0 16px; border:0; background:#3467ea; color:#fff; text-align:left; font:700 14px "Plus Jakarta Sans",Inter,sans-serif; }
 .portal-mobile-open svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
 .portal-demo-sidebar { position:static; display:block; padding:0; }
 .portal-demo-nav,.portal-demo-sidebar-bottom { display:none; }
 .portal-demo-sidebar.is-open { position:fixed; z-index:50; inset:0 auto 0 0; display:flex; width:280px; max-width:85vw; flex-direction:column; padding:0 12px 14px; box-shadow:10px 0 30px #0003; }
 .portal-demo-sidebar.is-open .portal-demo-brand { display:flex; min-height:56px; padding:0 5px; border-bottom:1px solid #ffffff33; }
 .portal-demo-sidebar.is-open .portal-mobile-open { display:none; }
 .portal-demo-sidebar.is-open .portal-mobile-close { display:grid; width:30px; height:30px; place-items:center; margin-left:auto; border:0; background:transparent; color:#fff; font-size:23px; }
 .portal-demo-sidebar.is-open .portal-demo-client { display:flex; }
 .portal-demo-sidebar.is-open .portal-demo-nav { display:grid; overflow:visible; margin-top:12px; }
 .portal-demo-sidebar.is-open .portal-demo-nav button { min-height:42px; font-size:13px; }
 .portal-demo-sidebar.is-open .portal-demo-sidebar-bottom { display:block; margin-top:auto; }
 .portal-demo-sidebar.is-open .portal-client-identity { display:flex; }
 .portal-demo-sidebar.is-open .portal-demo-nav { display:grid; }
 .portal-drawer-backdrop { position:fixed; z-index:49; inset:0; display:none; border:0; background:#0006; }
 .portal-demo-sidebar.is-open + .portal-drawer-backdrop { display:block; }
 .portal-demo-main { padding:20px; }
}
@media(max-width:600px) {
 .stage-tabs { margin-bottom:8px; }
 .stage-tabs button { min-height:36px; padding:0 14px; font-size:13px; }
 .app-flow-progress>div::before { right:15px; left:15px; }
 .portal-demo-main { padding:17px 13px 20px; }
 .portal-chat-message { max-width:72%; }
}

.portal-invoice-columns { display:grid; grid-template-columns:minmax(120px,1fr) minmax(100px,auto) 72px; gap:12px; padding:5px 2px 8px; border-bottom:1px solid #eee; color:#858585; font:500 11px "Plus Jakarta Sans",Inter,Arial,sans-serif; }
.portal-invoice-columns span:nth-child(2),.portal-invoice-columns span:nth-child(3) { text-align:right; }
.portal-invoices-card .portal-invoice-row .portal-invoice-meta { display:grid!important; visibility:visible!important; gap:3px; color:#303030; }
.portal-invoices-card .portal-invoice-row .portal-invoice-meta b { display:block!important; visibility:visible!important; color:#303030; }
.portal-invoices-card .portal-invoice-row .portal-invoice-meta small { display:block!important; visibility:visible!important; color:#777; }
@media(max-width:600px) { .portal-invoice-columns { grid-template-columns:minmax(88px,1fr) minmax(80px,auto) 52px; gap:7px; } }

.portal-demo-sidebar-bottom { text-align:left; justify-content:flex-start; align-items:flex-start; width:100%; }
.portal-settings-button { justify-content:flex-start; text-align:left; margin:0; }
.portal-client-identity { width:100%; justify-content:flex-start; margin-left:0; text-align:left; }

/* A stable sticky track drives the stage without remounting either app. */
.demo-scroll-track { margin:64px -24px 0; scroll-margin-top:140px; overflow-anchor:none; }
.hero-stage { width:min(1440px,calc(100vw - 64px)); max-width:none; margin:0 auto; }
.demo-toolbar { position:relative; display:flex; flex-direction:row-reverse; align-items:center; justify-content:space-between; gap:16px; padding:12px; }
.demo-toolbar .demo-modebar,.demo-toolbar .stage-tabs { margin:0; padding-bottom:0; }
.demo-toolbar .demo-modebar { padding:0; }
.demo-scroll-track.is-scroll-enhanced { height:calc(var(--demo-viewport-height) * 2.25); }
.is-scroll-enhanced .demo-scroll-pin { position:sticky; top:12px; z-index:35; display:flex; align-items:center; justify-content:center; height:calc(var(--demo-viewport-height) - 24px); pointer-events:none; }
.is-scroll-enhanced .hero-stage:not(.is-expanded) { display:flex; flex-direction:column; width:calc(100vw - 24px); height:100%; margin:0; padding:0; overflow:hidden; border:1px solid #172b5026; border-radius:16px; background:var(--cream); box-shadow:0 24px 70px #172b5020; transform:scale(var(--scroll-demo-scale,.76)); transform-origin:center; will-change:transform; }
.is-scroll-enhanced .hero-stage { pointer-events:auto; }
.announcement,.site-header { transition:transform .25s ease; }
.demo-is-presenting .announcement,.demo-is-presenting .site-header { transform:translateY(-130px); }
.is-scroll-enhanced .hero-stage:not(.is-expanded) .demo-toolbar { flex:none; }
.is-scroll-enhanced .hero-stage:not(.is-expanded) .demo-panel { flex:1; height:auto; min-height:0; aspect-ratio:auto; border:0; border-top:1px solid #172b501a; border-radius:0; }
.is-scroll-enhanced .demo-panel iframe { min-height:0; }
.demo-panel { width:100%; height:max(800px,min(900px,calc((100vw - 64px)*.625))); min-height:800px; aspect-ratio:16/10; }
.onboarding-demo { display:grid; grid-template-rows:auto auto minmax(0,1fr); padding-bottom:0; }
.app-flow-content { width:min(100% - 48px,640px); min-height:0; height:100%; overflow-y:auto; margin:0 auto; padding:30px 0 38px; }
.demo-modebar { justify-content:space-between; align-items:center; }
.demo-expand { display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 12px; border:1px solid #172b5030; border-radius:8px; background:#fff8; color:var(--ink-blue); font:500 13px var(--sans); cursor:pointer; }
.demo-expand svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.demo-expanded-close { display:none; }
body.demo-expanded-lock { overflow:hidden; }
.hero-stage.is-expanded { position:fixed; z-index:1000; inset:0; display:flex; width:100vw; max-width:none; height:100dvh; flex-direction:column; margin:0; padding:0; overflow:auto; background:var(--cream); transform:none; }
.hero-stage.is-expanded .demo-toolbar { flex:none; padding:12px 72px 12px 24px; }
.hero-stage.is-expanded .demo-modebar { flex:none; margin:0; padding:0; }
.hero-stage.is-expanded .stage-tabs { flex:none; margin:0; }
.hero-stage.is-expanded .demo-panel { flex:1; width:100%; height:auto; min-height:0; aspect-ratio:auto; }
.hero-stage.is-expanded .demo-panel { border:0; border-radius:0; }
.hero-stage.is-expanded .onboarding-demo { min-height:0; }
.hero-stage.is-expanded .portal-demo { min-height:0; }
.hero-stage.is-expanded .demo-expanded-close { position:absolute; z-index:10; top:14px; right:24px; display:grid; width:36px; height:36px; place-items:center; border:1px solid #172b5030; border-radius:8px; background:#fff; color:var(--ink-blue); font:400 25px/1 Arial,sans-serif; cursor:pointer; }
.hero-stage.is-expanded .app-flow-content { padding-top:30px; }
.agency-workspace-demo { display:block; overflow:hidden; padding:0; background:#f7f6f3; }
.agency-workspace-demo iframe { display:block; width:100%; height:100%; border:0; background:#f7f6f3; }
.onboarding-demo { display:block; overflow:hidden; padding:0; background:#fff; }
.onboarding-demo iframe { display:block; width:100%; height:100%; border:0; background:#fff; }
.demo-panel[hidden] { display:none; }
.demo-expand:focus-visible,.demo-expanded-close:focus-visible { outline:3px solid #496da4; outline-offset:3px; }
@media(max-width:900px) {
 .hero-stage { width:calc(100vw - 40px); }
 .demo-panel { height:800px; }
}
@media(max-width:700px) {
 .demo-scroll-track { margin-right:-18px; margin-left:-18px; }
}
@media(max-width:600px) {
 .demo-scroll-track { margin-top:42px; }
 .demo-toolbar { flex-direction:column; gap:10px; padding:10px 0; }
 .hero-stage { width:calc(100vw - 24px); }
 .demo-panel { height:760px; min-height:760px; aspect-ratio:auto; }
 .agency-workspace-demo iframe { min-height:760px; }
 .app-flow-content { width:calc(100% - 32px); }
 .hero-stage.is-expanded { padding:0; }
 .hero-stage.is-expanded .demo-toolbar { padding:10px 48px 10px 12px; align-items:flex-start; }
 .hero-stage.is-expanded .demo-panel { height:auto; min-height:0; }
 .hero-stage.is-expanded .demo-expanded-close { top:8px; right:8px; }
}
@media(max-width:900px) { .app-flow-progress>div { width:100%; justify-content:space-between; } }


.work-connected { background:var(--warm-cream); color:var(--ink-blue); padding:80px 24px 86px; }
.work-connected-inner { max-width:1152px; margin:0 auto; }
.work-connected-heading { display:grid; grid-template-columns:minmax(320px,1fr) minmax(240px,.72fr); align-items:end; gap:32px; padding-bottom:28px; border-bottom:1px solid #172b5030; }
.work-connected-heading h2 { margin:0; font:400 clamp(38px,4.2vw,52px)/1.02 var(--sans); letter-spacing:-.045em; }
.work-connected-heading p { max-width:410px; margin:0; color:#455a78; font-size:18px; line-height:1.45; }
.consolidation-flow { display:grid; grid-template-columns:minmax(0,1.1fr) 72px minmax(300px,.9fr); align-items:center; gap:20px; padding-top:32px; }
.consolidation-tools { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0; padding:0; list-style:none; }
.consolidation-tools li { display:grid; min-height:76px; place-items:center; padding:12px; border:1px solid #172b5026; border-radius:9px; background:#f7f3e8a6; color:var(--ink-blue); font-size:16px; text-align:center; }
.consolidation-connector { display:grid; place-items:center; }
.consolidation-connector svg { display:block; width:72px; height:110px; overflow:visible; }
.consolidation-connector path { fill:none; stroke:var(--ink-blue); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.consolidation-workspace { min-height:210px; padding:25px 28px; border-radius:12px; background:var(--ink-blue); color:var(--cream); }
.consolidation-brand { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; }
.consolidation-brand-mark { display:grid; width:32px; height:32px; place-items:center; border-radius:8px; background:var(--chartreuse); color:var(--ink-blue); font-size:12px; }
.consolidation-workspace h3 { margin:24px 0 8px; font:400 29px/1.06 var(--sans); letter-spacing:-.035em; }
.consolidation-workspace p { max-width:370px; margin:0; color:#e1e6f2; font-size:16px; line-height:1.45; }
.workspace-line { display:flex; align-items:center; gap:8px; margin-top:22px; }
.workspace-line span { height:4px; flex:1; border-radius:4px; background:#ffffff55; }
.workspace-line span:first-child { background:var(--chartreuse); }
.workspace-line i { width:9px; height:9px; flex:none; border-radius:50%; background:var(--chartreuse); }

.intro { padding:74px 24px 50px; }
.intro-inner { max-width:1152px; text-align:left; }
.intro h2 { max-width:780px; margin:0; font-size:clamp(42px,5vw,58px); line-height:1.04; }
.journey-route { max-width:1000px; margin:34px 0 0; }
.journey-svg { display:block; width:100%; height:auto; overflow:visible; }
.journey-track { fill:none; stroke:#172b5025; stroke-width:2; }
.journey-progress { fill:none; stroke:var(--chartreuse); stroke-width:4; stroke-linecap:round; }
.journey-node { fill:var(--cream); stroke:#172b505f; stroke-width:2; }
.runner-shadow { fill:#172b501c; }
.journey-runner { fill:none; stroke:var(--ink-blue); stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; }
.journey-runner .runner-far { opacity:.34; }
.journey-runner .runner-near { opacity:.96; }
.journey-runner [data-runner-head] { fill:var(--ink-blue); stroke:none; }
.journey-runner .runner-torso { stroke-width:3.7; }
.journey-runner .runner-neck { stroke-width:3.1; }
.journey-runner .runner-nose { fill:var(--ink-blue); stroke:var(--ink-blue); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.journey-finish-post { fill:none; stroke:var(--ink-blue); stroke-width:3; stroke-linecap:round; }
.journey-finish-flag { fill:var(--chartreuse); stroke:var(--ink-blue); stroke-width:2; stroke-linejoin:round; }
.journey-stops { position:relative; height:22px; margin:0; padding:0; list-style:none; }
.journey-stops li { position:absolute; top:0; color:#64748b; font-size:14px; transition:color .2s ease; white-space:nowrap; }
.journey-stops li:nth-child(1) { left:5.4%; }
.journey-stops li:nth-child(2) { left:35%; transform:translateX(-50%); }
.journey-stops li:nth-child(3) { left:65%; transform:translateX(-50%); }
.journey-stops li:nth-child(4) { left:94.6%; transform:translateX(-100%); }
.journey-stops li[aria-current="step"] { color:var(--ink-blue); font-weight:600; }
.journey-controls { display:flex; min-height:36px; align-items:center; gap:12px; margin-top:5px; }
.journey-control { display:inline-flex; min-height:32px; align-items:center; justify-content:center; gap:7px; padding:0 12px; border:1px solid #172b5033; border-radius:8px; background:#fff; color:var(--ink-blue); font:600 13px/1 var(--sans); cursor:pointer; }
.journey-control:hover { border-color:var(--ink-blue); background:var(--chartreuse); }
.journey-control:focus-visible { outline:3px solid var(--chartreuse); outline-offset:3px; }
.journey-control [data-journey-icon] { min-width:11px; font-size:12px; text-align:center; }
.journey-status { color:#64748b; font-size:13px; line-height:1.3; }

.integrations-band { padding:76px 24px 82px; }
.integration-heading { align-items:end; margin-bottom:28px; }
.integration-heading h2 { max-width:760px; }
.integration-categories { display:flex; gap:8px; margin:27px 0 0; overflow-x:auto; padding:0 0 8px; scrollbar-width:thin; }
.integration-categories button { flex:0 0 auto; min-height:42px; padding:0 16px; border:1px solid #172b5040; border-radius:8px; background:transparent; color:var(--ink-blue); font-size:15px; cursor:pointer; }
.integration-categories button[aria-selected="true"] { border-color:var(--ink-blue); background:var(--ink-blue); color:var(--cream); }
.integration-categories button:focus-visible { outline:3px solid var(--chartreuse); outline-offset:3px; }
.integration-panel[hidden] { display:none; }
.integration-panel { display:grid; grid-template-columns:minmax(220px,.76fr) minmax(0,1.5fr); gap:40px; min-height:220px; padding:28px; border:1px solid #172b5020; border-radius:12px; background:#f8f9fb; }
.connection-summary>span { font-size:21px; font-weight:600; }
.connection-summary p { max-width:340px; margin:10px 0 0; color:#566783; font-size:16px; line-height:1.5; }
.integration-panel ul { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-content:start; gap:10px; margin:0; padding:0; list-style:none; }
.integration-panel li { display:flex; min-height:52px; align-items:center; padding:10px 14px; border:1px solid #172b5018; border-radius:8px; background:#fff; color:var(--ink-blue); font-size:15px; line-height:1.25; }
.integration-panel li small { margin-left:8px; color:#61718a; font-size:12px; }

@media(min-width:901px) {
 .agency-workspace-demo iframe,.onboarding-demo iframe { width:111.111%; height:111.111%; transform:scale(.9); transform-origin:top left; }
}
@media(max-width:900px) {
 .work-connected { padding:62px 24px 68px; }
 .work-connected-heading { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px 22px; }
 .consolidation-flow { grid-template-columns:minmax(0,1fr) 48px minmax(260px,.9fr); gap:12px; }
 .consolidation-tools { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .consolidation-tools li { min-height:65px; font-size:14px; }
 .consolidation-connector svg { width:50px; }
 .integration-panel { gap:22px; }
 .integration-panel ul { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
 .agency-workspace-demo iframe,.onboarding-demo iframe { width:100%; height:100%; transform:none; }
 .work-connected { padding:52px 22px 58px; }
 .work-connected-heading { grid-template-columns:1fr; gap:14px; padding-bottom:22px; }
 .work-connected-heading h2 { font-size:40px; }
 .work-connected-heading p { font-size:16px; }
 .consolidation-flow { grid-template-columns:1fr; gap:14px; padding-top:24px; }
 .consolidation-tools { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
 .consolidation-tools li { min-height:55px; padding:9px; font-size:14px; }
 .consolidation-connector svg { width:48px; height:46px; transform:rotate(90deg); }
 .consolidation-workspace { min-height:0; padding:22px; }
 .consolidation-workspace h3 { margin-top:18px; font-size:26px; }
 .intro { padding:54px 22px 35px; }
 .intro h2 { font-size:clamp(37px,10vw,46px); }
 .journey-route { margin-top:24px; }
 .journey-svg { height:100px; }
 .flight-control { top:8px; right:10px; min-height:28px; padding:0 8px; font-size:11px; }
 .journey-stops li { font-size:12px; }
 .journey-controls { gap:9px; margin-top:7px; }
 .journey-status { font-size:12px; }
 .integrations-band { padding:55px 20px 60px; }
 .integration-heading h2 { font-size:39px; }
 .integration-heading p { font-size:16px; }
 .integration-categories { margin-top:20px; }
 .integration-categories button { min-height:40px; padding:0 13px; font-size:14px; }
 .integration-panel { grid-template-columns:1fr; gap:20px; padding:18px; }
 .integration-panel ul { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
 .integration-panel li { min-height:46px; padding:9px 10px; font-size:13px; }
}
@media(prefers-reduced-motion:reduce) {
 .journey-stops li { transition:none; }
 .flight-control { transition:none; }
}