/* latin-ext */
@font-face  {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/dm-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face  {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/dm-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --ink:#232323;
  --muted:#797979;
  --line:#e9e9e9;
  --paper:#ffffff;
  --font:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:90px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:15px;
  -webkit-font-smoothing:antialiased
}
button,input,textarea {
  font:inherit
}
button,a,input,textarea {
  -webkit-tap-highlight-color:transparent
}
a {
  color:inherit;
  text-decoration:none
}
button {
  cursor:pointer
}
button:disabled {
  cursor:default
}
button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:3px solid #a1a1a1;
  outline-offset:5px
}
button {
  color:inherit
}
svg {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}
.icon-defs {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
.skip {
  position:fixed;
  top:10px;
  left:10px;
  background:#ffffff;
  color:#000000;
  padding:12px;
  z-index:100;
  transform:translateY(-160%)
}
.skip:focus {
  transform:none
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:26px;
  letter-spacing:-1.4px;
  font-weight:650
}
.brand-mark {
  display:inline-block;
  width:26px;
  height:26px;
  border:1.6px solid currentColor;
  border-radius:50%;
  background:linear-gradient(90deg,transparent 50%,currentColor 50%);
  flex-shrink:0
}
.site-header {
  height:78px;
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:10;
  color:#efefef;
  border-bottom:1px solid #ffffff0e
}
.nav-wrap {
  max-width:1320px;
  height:100%;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 40px
}
.nav-wrap nav {
  display:flex;
  gap:31px;
  margin-left:106px;
  font-size:13px;
  color:#ababab
}
.nav-wrap nav a,.login {
  transition:color .2s
}
.nav-wrap nav a:hover,.login:hover {
  color:#ffffff
}
.nav-actions {
  display:flex;
  align-items:center;
  gap:25px;
  font-size:13px
}
.login {
  color:#c8c8c8
}
.login span {
  margin-left:5px;
  color:#7a7a7a
}
.button {
  min-height:45px;
  padding:0 21px;
  border:1px solid transparent;
  border-radius:7px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  font-size:13px;
  font-weight:550;
  transition:transform .2s,box-shadow .2s,background .2s
}
.button:hover {
  transform:translateY(-2px)
}
.button svg {
  width:16px;
  height:16px
}
.button-white {
  background:#f3f3f3;
  color:#232323;
  border-color:#ffffff99;
  box-shadow:0 1px 2px #00000022,inset 0 1px 0 #ffffff
}
.button-white:hover {
  background:#ffffff;
  box-shadow:0 5px 24px #c0c0c026
}
.button-small {
  min-height:36px;
  padding:0 13px;
  font-size:12px;
  gap:14px
}
.button-glass {
  border-color:#ffffff28;
  background:#1515158c;
  color:#e3e3e3;
  backdrop-filter:blur(8px)
}
.button-glass:hover {
  background:#28282880
}
.button-dark {
  background:#272727;
  color:#ffffff;
  border-color:#272727
}
.button-dark:hover {
  background:#414141
}
.menu-toggle {
  display:none
}
.hero {
  position:relative;
  isolation:isolate;
  background:#090909;
  color:#f7f7f7;
  padding-top:78px;
  overflow:hidden
}
.aurora-wrap {
  position:absolute;
  inset:60px 0 auto;
  height:1000px;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 72%,#78787845,transparent 55%)
}
#aurora {
  width:100%;
  height:100%;
  display:block
}
.hero-inner {
  text-align:center;
  position:relative;
  z-index:1;
  max-width:900px;
  margin:0 auto;
  padding:62px 24px 0
}
.hero-kicker {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  color:#b9b9b9;
  border:1px solid #ffffff1a;
  padding:7px 12px;
  border-radius:30px;
  background:#121212a1;
  backdrop-filter:blur(12px)
}
.live-dot {
  width:5px;
  height:5px;
  border-radius:50%;
  background:#bebebe;
  display:inline-block;
  box-shadow:0 0 8px #bebebe35;
  flex-shrink:0
}
.pill-divider {
  height:10px;
  width:1px;
  background:#ffffff21;
  margin:0 2px
}
.hero-kicker>span:last-child {
  margin-left:4px;
  color:#999999
}
h1 {
  font-size:clamp(52px,6.1vw,84px);
  font-weight:500;
  letter-spacing:-4.5px;
  line-height:1.04;
  margin:28px 0 23px
}
h1>span {
  color:#bababa
}
.hero-copy {
  max-width:485px;
  margin:0 auto;
  color:#b8b8b8;
  line-height:1.75;
  font-size:15px;
  font-weight:400
}
.hero-actions {
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:26px
}
.play {
  font-size:9px
}
.hero-reassurance {
  font-size:10px;
  color:#929292;
  margin:15px 0 0;
  letter-spacing:.1px
}
.hero-reassurance span {
  margin:0 8px;
  color:#676767
}
.workspace-wrap {
  max-width:1136px;
  margin:86px auto 0;
  position:relative;
  padding:0 0 29px;
  scroll-margin-top:30px
}
.preview-caption {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 4px;
  margin-bottom:13px;
  font-size:11px;
  color:#d5d5d5
}
.preview-caption>span {
  display:flex;
  align-items:center;
  gap:9px
}
.preview-caption>span:last-child {
  font-size:8px;
  letter-spacing:1px;
  color:#bcbcbc
}
.preview-caption svg {
  width:13px;
  height:13px;
  transform:rotate(45deg)
}
.preview-caption i {
  width:5px;
  height:5px;
  background:#adadad;
  border-radius:100%;
  box-shadow:0 0 9px #b2b2b2
}
.workspace {
  height:535px;
  background:#ffffff;
  color:#373737;
  border:1px solid #ffffffb3;
  border-radius:11px;
  display:flex;
  overflow:hidden;
  box-shadow:0 0 0 6px #ffffff08,0 40px 100px #00000088,0 -10px 60px #adadad15;
  text-align:left;
  font-size:11px
}
.app-sidebar {
  width:202px;
  flex-shrink:0;
  background:#f7f7f7;
  border-right:1px solid #e9e9e9;
  position:relative;
  padding:16px 12px
}
.workspace-name {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  letter-spacing:-.1px
}
.workspace-name strong {
  font-weight:550
}
.workspace-initial {
  background:#e7e7e7;
  color:#707070;
  width:25px;
  height:25px;
  border-radius:6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:650;
  box-shadow:inset 0 0 0 1px #d8d8d8
}
.chevrons {
  font-size:9px;
  line-height:5px;
  margin-left:auto;
  color:#919191
}
.app-search {
  border:0;
  background:none;
  width:100%;
  display:flex;
  align-items:center;
  padding:21px 5px 20px;
  gap:8px;
  color:#9a9a9a;
  font-size:10px
}
.app-search svg {
  width:13px;
  height:13px
}
.app-search kbd {
  font:8px var(--font);
  margin-left:auto;
  border:1px solid #e3e3e3;
  border-radius:3px;
  padding:2px 4px;
  background:#ffffff
}
.sidebar-group-label {
  font-size:8px;
  color:#ababab;
  letter-spacing:.8px;
  margin:8px 10px 11px
}
.app-nav {
  display:flex;
  flex-direction:column;
  gap:3px
}
.app-nav button {
  border:0;
  background:transparent;
  display:flex;
  align-items:center;
  gap:9px;
  text-align:left;
  font-size:11px;
  color:#7c7c7c;
  padding:8px 9px;
  border-radius:5px;
  transition:background .2s,color .2s
}
.app-nav button:hover {
  background:#eeeeee;
  color:#3b3b3b
}
.app-nav button.active {
  background:#e9e9e9;
  color:#353535;
  font-weight:550
}
.app-nav svg {
  width:14px;
  height:14px;
  stroke-width:1.5
}
.nav-count {
  margin-left:auto;
  font-size:9px;
  color:#898989
}
.favorites-label {
  display:flex;
  justify-content:space-between;
  margin-top:29px
}
.favorite {
  font-size:10px;
  color:#888888;
  padding:8px 10px;
  display:flex;
  align-items:center;
  gap:9px
}
.tiny-square {
  width:8px;
  height:8px;
  border-radius:2px;
  display:inline-block
}
.purple {
  background:#a5a5a5
}
.amber {
  background:#bdbdbd
}
.sidebar-footer {
  position:absolute;
  bottom:16px;
  left:17px;
  right:17px;
  display:flex;
  align-items:center;
  gap:9px;
  font-size:10px;
  color:#676767
}
.sidebar-footer small {
  display:block;
  font-size:8px;
  color:#b0b0b0;
  margin-top:2px
}
.sidebar-footer>span:last-child {
  margin-left:auto
}
.avatar {
  height:25px;
  width:25px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#e5e5e5;
  color:#808080;
  font-size:8px;
  flex-shrink:0
}
.avatar-small {
  width:21px;
  height:21px;
  font-size:7px
}
.rose {
  background:#e5e5e5;
  color:#909090
}
.demo-main {
  min-width:0;
  flex:1
}
.app-topbar {
  height:48px;
  border-bottom:1px solid #eeeeee;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 23px;
  color:#999999;
  font-size:9px
}
.app-topbar strong {
  font-weight:450;
  color:#6a6a6a
}
.slash {
  padding:0 9px;
  color:#d2d2d2
}
.app-topbar>div {
  display:flex;
  align-items:center;
  gap:13px
}
.demo-label {
  font-size:8px;
  color:#a9a9a9;
  border:1px solid #e8e8e8;
  border-radius:4px;
  padding:3px 6px
}
.demo-panel {
  padding:29px 29px 22px;
  overflow:auto;
  height:calc(100% - 48px)
}
.demo-greeting {
  font-size:10px;
  color:#a3a3a3;
  margin-bottom:5px
}
.demo-title-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px
}
.demo-title-row h3 {
  font-size:22px;
  letter-spacing:-.7px;
  line-height:1.3;
  margin:0;
  font-weight:550
}
.demo-title-row>span {
  color:#a3a3a3;
  font-size:9px
}
.demo-subtitle {
  font-size:10px;
  color:#9f9f9f;
  line-height:1.6;
  margin:6px 0 22px
}
.work-stats {
  display:flex;
  align-items:center;
  gap:19px;
  color:#a9a9a9;
  font-size:9px
}
.work-stats strong {
  color:#595959;
  font-weight:550;
  font-size:14px;
  margin-right:4px
}
.view-toolbar {
  margin:20px 0 0;
  border-bottom:1px solid #ebebeb;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:35px
}
.demo-filters {
  display:flex;
  gap:22px;
  align-items:center
}
.demo-filters button {
  border:0;
  background:none;
  color:#9d9d9d;
  font-size:10px;
  padding:9px 0 11px;
  position:relative
}
.demo-filters button.active {
  color:#4b4b4b
}
.demo-filters button.active:after {
  position:absolute;
  content:'';
  height:2px;
  bottom:-1px;
  left:0;
  right:0;
  background:#898989
}
.demo-filters button span {
  font-size:8px;
  color:#a1a1a1;
  background:#eeeeee;
  border-radius:3px;
  margin-left:4px;
  padding:1px 4px
}
.filter-label {
  color:#aeaeae;
  font-size:9px;
  display:flex;
  align-items:center;
  gap:7px
}
.filter-label svg {
  width:11px;
  height:11px
}
.task-group-label {
  font-size:9px;
  color:#8b8b8b;
  padding:17px 0 9px;
  display:flex;
  align-items:center;
  gap:7px
}
.task-group-label span {
  font-size:8px;
  background:#f3f3f3;
  padding:1px 4px;
  border-radius:3px;
  color:#9d9d9d
}
.task-row {
  min-height:43px;
  border-bottom:1px solid #f0f0f0;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:10px
}
.task-check {
  width:13px;
  height:13px;
  border:1px solid #cccccc;
  border-radius:50%;
  background:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  flex-shrink:0;
  transition:background .2s
}
.task-check svg {
  height:9px;
  width:9px;
  opacity:0
}
.task-check[aria-pressed=true] {
  background:#939393;
  border-color:#939393;
  color:#ffffff
}
.task-check[aria-pressed=true] svg {
  opacity:1
}
.task-name {
  flex:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.task-row.complete .task-name {
  text-decoration:line-through;
  color:#b1b1b1
}
.task-row.complete {
  opacity:.7
}
.tag {
  font-size:8px;
  padding:3px 5px;
  background:#f2f2f2;
  color:#979797;
  display:inline-flex;
  align-items:center;
  gap:4px;
  border-radius:3px;
  white-space:nowrap
}
.purple-tag {
  background:#ebebeb;
  color:#8e8e8e
}
.green-tag {
  background:#efefef;
  color:#999999
}
.amber-tag {
  background:#efefef;
  color:#9f9f9f
}
.task-date {
  font-size:8px;
  color:#b0b0b0;
  min-width:35px;
  text-align:right
}
.task-date.today {
  color:#959595
}
.task-row .avatar {
  width:19px;
  height:19px;
  font-size:6px;
  margin-left:5px
}
.demo-notice {
  margin-top:25px;
  border:1px solid #ececec;
  border-radius:6px;
  background:#fafafa;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  font-size:9px;
  color:#9c9c9c
}
.demo-notice svg {
  width:14px;
  height:14px;
  color:#959595
}
.demo-notice strong {
  font-weight:500;
  color:#717171
}
.demo-bottom {
  display:flex;
  justify-content:space-between;
  font-size:9px;
  color:#6d6d6d;
  padding:16px 4px 0
}
.keycap {
  border:1px solid #343434;
  border-radius:3px;
  padding:1px 4px;
  margin-right:4px;
  font-size:8px
}
.section-wrap {
  max-width:1136px;
  margin:0 auto
}
.intro {
  padding-top:105px;
  padding-bottom:60px
}
.eyebrow {
  font-size:9px;
  letter-spacing:1.3px;
  color:#8a8a8a;
  font-weight:500;
  display:flex;
  gap:10px;
  align-items:center
}
.section-index {
  font-size:9px;
  letter-spacing:0;
  color:#b1b1b1;
  margin-right:5px
}
h2 {
  font-size:44px;
  line-height:1.15;
  letter-spacing:-2px;
  font-weight:500;
  margin:22px 0;
  color:#2b2b2b
}
h2 span {
  color:#9c9c9c
}
.intro-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:100px;
  align-items:start
}
.intro-grid h2 {
  margin-top:23px
}
.intro-copy {
  padding-top:22px;
  color:#8a8a8a;
  font-size:14px;
  line-height:1.8
}
.intro-copy p:first-child {
  margin-top:0;
  color:#434343
}
.intro-copy p {
  margin-bottom:21px
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:13px;
  font-size:11px;
  font-weight:500;
  color:#535353
}
.text-link svg {
  width:15px;
  height:15px;
  transition:transform .2s
}
.text-link:hover svg {
  transform:translateX(4px)
}
.role-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-top:47px;
  padding:23px 0;
  color:#969696;
  font-size:10px
}
.role-row>div {
  display:flex;
  gap:40px;
  color:#686868;
  font-weight:500;
  font-size:11px
}
.connected {
  padding:35px 0 85px
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  margin-bottom:36px
}
.section-heading h2 {
  margin-bottom:0
}
.section-heading>p {
  font-size:12px;
  line-height:1.8;
  color:#939393;
  margin:0 0 3px
}
.feature-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}
.feature-card {
  background:#fbfbfb;
  border:1px solid #e9e9e9;
  border-radius:10px;
  padding:32px 32px 0;
  overflow:hidden;
  height:385px
}
.feature-icon {
  color:#737373;
  margin-bottom:15px
}
.feature-icon svg {
  width:20px;
  height:20px
}
.feature-card h3 {
  font-size:18px;
  font-weight:500;
  letter-spacing:-.55px;
  margin:0 0 12px
}
.feature-card>p {
  font-size:12px;
  line-height:1.8;
  color:#949494;
  max-width:360px;
  margin:0
}
.mini-today {
  background:#ffffff;
  border:1px solid #e7e7e7;
  border-radius:8px 8px 0 0;
  box-shadow:0 10px 30px #27272705;
  margin-top:24px;
  padding:18px 18px;
  font-size:9px;
  color:#737373;
  transform:translateY(8px)
}
.mini-heading {
  display:flex;
  justify-content:space-between;
  font-weight:500;
  color:#585858;
  font-size:11px;
  margin-bottom:18px
}
.mini-heading>span {
  color:#8f8f8f;
  font-size:9px
}
.mini-heading i {
  font-style:normal;
  margin-left:4px;
  font-size:8px;
  background:#ededed;
  padding:2px 4px;
  border-radius:3px
}
.mini-today>div:not(.mini-heading):not(.day-note) {
  display:flex;
  align-items:center;
  gap:9px;
  min-height:34px;
  border-bottom:1px solid #f2f2f2
}
.mini-today .tag {
  margin-left:auto;
  font-size:7px
}
.mini-checkbox {
  display:inline-block;
  width:10px;
  height:10px;
  border:1px solid #d3d3d3;
  border-radius:50%
}
.mini-checkbox.checked {
  background:#b4b4b4;
  position:relative;
  border-color:#b4b4b4
}
.mini-checkbox.checked:after {
  content:'✓';
  color:#ffffff;
  font-size:7px;
  position:absolute;
  top:-1px;
  left:1px
}
.faded-task {
  color:#b6b6b6
}
.faded-task .tag {
  opacity:.7
}
.day-note {
  font-size:8px;
  color:#aaaaaa;
  padding-top:12px;
  display:flex;
  gap:6px;
  align-items:center
}
.day-note .live-dot {
  width:4px;
  height:4px
}
.connection-map {
  height:205px;
  position:relative;
  max-width:470px;
  margin:0 -8px
}
.map-node {
  position:absolute;
  display:flex;
  align-items:center;
  gap:7px;
  font-size:8px;
  padding:10px 12px;
  background:#ffffff;
  border:1px solid #e5e5e5;
  box-shadow:0 4px 12px #33333304;
  border-radius:6px;
  z-index:2;
  white-space:nowrap;
  color:#7a7a7a
}
.map-client {
  top:28px;
  left:14px
}
.map-project {
  right:0;
  top:52px
}
.map-task {
  left:20px;
  top:145px
}
.map-file {
  right:0;
  top:163px
}
.map-node svg {
  width:12px;
  height:12px
}
.map-node .avatar {
  width:19px;
  height:19px;
  font-size:6px
}
.node-type {
  color:#b9b9b9;
  font-size:6px;
  margin-left:4px
}
.map-center {
  position:absolute;
  left:51%;
  top:95px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:39px;
  height:39px;
  border-radius:50%;
  background:#f2f2f2;
  border:1px solid #e3e3e3;
  color:#8e8e8e;
  z-index:3
}
.map-center .brand-mark {
  width:19px;
  height:19px;
  border-width:1px
}
.map-line {
  position:absolute;
  height:1px;
  background:#d7d7d7;
  transform-origin:left center;
  z-index:0
}
.line-1 {
  width:63%;
  top:51px;
  left:18%;
  transform:rotate(16deg)
}
.line-2 {
  width:56%;
  top:78px;
  left:35%;
  transform:rotate(45deg)
}
.line-3 {
  width:51%;
  top:160px;
  left:28%;
  transform:rotate(-27deg)
}
.outside-feature {
  margin-top:20px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  align-items:center;
  gap:45px;
  padding:44px;
  background:#f9f9f9;
  border:1px solid #e7e7e7;
  border-radius:10px;
  overflow:hidden
}
.outside-copy {
  padding:12px 0
}
.outside-copy .eyebrow {
  font-size:8px;
  letter-spacing:1px;
  color:#949494
}
.outside-copy h3 {
  font-size:35px;
  font-weight:500;
  letter-spacing:-1.5px;
  line-height:1.18;
  margin:22px 0 20px
}
.outside-copy h3 span {
  color:#9c9c9c
}
.outside-copy p {
  max-width:345px;
  font-size:12px;
  color:#929292;
  line-height:1.9
}
.outside-copy .outside-punchline {
  color:#585858;
  margin:19px 0
}
.outside-copy .text-link {
  font-size:10px;
  margin-top:9px
}
.request-scene {
  display:grid;
  gap:14px;
  width:100%;
  min-width:0;
  max-width:420px;
  justify-self:end
}
.request-card {
  background:#ffffff;
  border:1px solid #e2e2e2;
  box-shadow:0 10px 40px #3e3e3e06;
  border-radius:9px;
  padding:24px;
  min-width:0
}
.request-brand {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:550;
  color:#686868
}
.request-brand .workspace-initial {
  height:19px;
  width:19px;
  font-size:9px;
  border-radius:4px
}
.request-brand>span:last-child {
  margin-left:auto;
  font-size:8px;
  letter-spacing:.7px;
  color:#888888;
  font-weight:400
}
.request-card h4 {
  font-size:24px;
  font-weight:500;
  letter-spacing:-.8px;
  line-height:1.15;
  color:#5c5c5c;
  margin:24px 0 9px
}
.request-card>p {
  font-size:11px;
  line-height:1.6;
  color:#888888;
  margin-bottom:22px
}
.request-card label {
  font-size:11px;
  color:#737373;
  display:block;
  margin-bottom:6px
}
.request-card input,.request-card textarea {
  display:block;
  resize:vertical;
  width:100%;
  border:1px solid #e6e6e6;
  border-radius:4px;
  background:#fcfcfc;
  padding:10px 12px;
  min-width:0;
  font-size:12px;
  line-height:1.6;
  color:#737373;
  margin-bottom:15px;
  outline-color:#a8a8a8
}
.request-card .button {
  width:100%;
  min-height:40px;
  font-size:11px;
  border-radius:4px;
  background:#5d5d5d;
  border-color:#5d5d5d;
  justify-content:space-between;
  padding:0 12px;
  margin-top:2px
}
.request-card .button svg {
  width:12px;
  height:12px
}
.request-caption {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:5px;
  font-size:9px;
  line-height:1.5;
  text-align:center;
  color:#888888;
  margin-top:11px
}
.request-caption svg {
  width:8px;
  height:8px
}
.returned-update {
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  padding:15px 17px;
  background:#ffffff;
  border:1px solid #e4e4e4;
  border-radius:7px;
  box-shadow:0 4px 16px #49494908;
  transition:border-color .2s,box-shadow .2s
}
.returned-update>div {
  flex:1;
  min-width:0;
  overflow-wrap:anywhere
}
.returned-update strong {
  display:block;
  font-size:11px;
  line-height:1.5;
  font-weight:500;
  color:#767676
}
.returned-update>div>span {
  font-size:10px;
  line-height:1.5;
  color:#888888;
  display:block;
  margin-top:4px
}
.returned-update>svg {
  height:13px;
  width:13px;
  color:#b3b3b3
}
.success-dot {
  background:#f2f2f2;
  color:#a5a5a5;
  height:24px;
  width:24px;
  flex-shrink:0;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center
}
.success-dot svg {
  width:13px;
  height:13px
}
.returned-update.just-updated {
  border-color:#c3c9c3;
  box-shadow:0 4px 20px #77777718
}
.possibilities {
  padding:78px 0 45px;
  background:#fafafa;
  border-top:1px solid #ededed;
  border-bottom:1px solid #ededed
}
.possibilities .section-heading {
  margin-bottom:40px
}
.possibility-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:45px
}
.possibility-grid article {
  position:relative;
  padding:20px 0 30px;
  border-top:1px solid #e1e1e1
}
.possibility-grid article>svg {
  width:22px;
  height:22px;
  color:#a8a8a8;
  margin:9px 0 27px;
  display:block
}
.possibility-number {
  position:absolute;
  top:21px;
  right:0;
  font-size:8px;
  color:#b1b1b1
}
.possibility-grid h3 {
  font-size:15px;
  letter-spacing:-.4px;
  font-weight:500;
  margin:0 0 12px
}
.possibility-grid p {
  font-size:12px;
  line-height:1.85;
  color:#919191;
  max-width:290px
}
.import-note {
  border-top:1px solid #e5e5e5;
  display:flex;
  align-items:center;
  gap:13px;
  padding-top:24px;
  font-size:10px;
  color:#797979;
  margin-top:8px
}
.import-note>svg {
  width:16px;
  height:16px;
  color:#9f9f9f
}
.import-note p {
  margin:0;
  line-height:1.8
}
.import-note p span {
  color:#a0a0a0
}
.import-note>a {
  margin-left:auto;
  white-space:nowrap;
  color:#6d6d6d;
  font-size:9px
}
.import-note>a span {
  margin-left:10px
}
.pricing {
  padding:110px 30px;
  display:grid;
  grid-template-columns:1fr .95fr;
  gap:100px;
  align-items:center
}
.pricing-story h2 {
  margin:22px 0
}
.pricing-story>p {
  font-size:12px;
  color:#929292;
  line-height:1.9;
  margin-bottom:32px
}
.launch-date {
  font-size:9px;
  color:#939393;
  display:flex;
  align-items:center;
  gap:8px
}
.price-card {
  padding:29px;
  border:1px solid #e3e3e3;
  border-radius:10px;
  box-shadow:0 8px 35px #44444404;
  background:linear-gradient(145deg,#fbfbfb,#ffffff 55%)
}
.price-card-top {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  color:#797979
}
.price-card-top .brand-mark {
  width:17px;
  height:17px;
  border-width:1px;
  color:#878787
}
.price-badge {
  margin-left:auto;
  background:#eeeeee;
  padding:4px 6px;
  border-radius:4px;
  font-size:6px;
  color:#989898;
  letter-spacing:.7px
}
.price {
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:22px
}
.price>span {
  font-size:59px;
  letter-spacing:-3px;
  font-weight:450;
  line-height:1.1
}
.price>div {
  font-size:10px;
  color:#a5a5a5;
  line-height:1.6
}
.price-description {
  font-size:11px;
  color:#8e8e8e;
  margin:12px 0 22px
}
.price-card ul {
  padding:20px 0 10px;
  margin:0;
  border-top:1px solid #ececec;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:13px;
  font-size:10px;
  color:#828282
}
.price-card li {
  display:flex;
  align-items:center;
  gap:9px
}
.price-card li svg {
  width:12px;
  height:12px;
  color:#9d9d9d
}
.price-card>.button {
  margin-top:20px;
  width:100%;
  font-size:11px;
  justify-content:space-between;
  min-height:41px
}
.price-note {
  text-align:center;
  font-size:8px;
  color:#a5a5a5;
  margin:10px 0 18px
}
.team-link {
  border-top:1px solid #ececec;
  padding-top:17px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  color:#8c8c8c;
  font-size:9px
}
.faq {
  padding:0 30px 100px;
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:90px
}
.faq .eyebrow {
  font-size:7px;
  letter-spacing:1px
}
.faq h2 {
  font-size:33px;
  letter-spacing:-1px;
  margin:17px 0 26px
}
.faq .text-link {
  font-size:10px
}
.faq-list {
  border-top:1px solid var(--line)
}
details {
  border-bottom:1px solid var(--line)
}
summary {
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 0;
  font-size:12px;
  font-weight:450;
  gap:15px
}
summary::-webkit-details-marker {
  display:none
}
summary>span {
  font-size:16px;
  color:#a6a6a6;
  font-weight:400;
  transition:transform .2s
}
details[open] summary>span {
  transform:rotate(45deg)
}
details p {
  font-size:11px;
  line-height:1.9;
  color:#939393;
  margin:0 20px 20px 0;
  max-width:490px
}
.closing {
  background:#0c0c0c;
  position:relative;
  text-align:center;
  color:#ededed;
  overflow:hidden;
  isolation:isolate;
  padding:70px 20px 64px
}
.closing-orbit {
  position:absolute;
  width:1120px;
  height:760px;
  border-radius:50%;
  left:50%;
  top:180px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at 42% 0%,#a9a9a937,transparent 43%),#0c0c0c;
  box-shadow:0 -1px 0 #acacac40,0 -8px 80px #73737329;
  z-index:-1
}
.closing-inner>.brand-mark {
  height:25px;
  width:25px;
  color:#c4c4c4
}
.closing .eyebrow {
  justify-content:center;
  font-size:7px;
  color:#868686;
  margin-top:22px;
  letter-spacing:1.5px
}
.closing h2 {
  font-size:58px;
  letter-spacing:-2.5px;
  line-height:1.04;
  color:#ececec;
  margin:21px 0 20px
}
.closing p {
  font-size:12px;
  color:#9b9b9b;
  margin-bottom:25px
}
.closing .button {
  font-size:11px;
  min-height:40px;
  padding:0 18px
}
.closing-note {
  display:block;
  margin-top:13px;
  font-size:8px;
  color:#777777
}
.site-footer {
  background:#0c0c0c;
  color:#a8a8a8;
  padding:0 max(40px,calc((100vw - 1136px)/2)) 24px
}
.footer-main {
  border-top:1px solid #ffffff0c;
  border-bottom:1px solid #ffffff0c;
  display:flex;
  align-items:center;
  gap:30px;
  padding:30px 0
}
.footer-main .brand {
  font-size:23px;
  letter-spacing:-1px;
  color:#dedede
}
.footer-main .brand-mark {
  width:21px;
  height:21px
}
.footer-main>span {
  font-size:9px;
  color:#646464
}
.footer-main>div {
  margin-left:auto;
  display:flex;
  gap:24px;
  font-size:9px;
  color:#909090
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  font-size:8px;
  color:#565656;
  padding-top:22px
}
.footer-bottom>div {
  display:flex;
  gap:20px
}
.footer-bottom>span:nth-child(2) {
  margin-left:65px
}
.toast {
  position:fixed;
  bottom:25px;
  left:50%;
  transform:translate(-50%,20px);
  background:#242424;
  color:#ffffff;
  font-size:12px;
  padding:13px 20px;
  box-shadow:0 10px 30px #00000022;
  border:1px solid #ffffff12;
  border-radius:8px;
  z-index:100;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s,transform .25s;
  max-width:calc(100vw - 30px);
  text-align:center
}
.toast.show {
  opacity:1;
  transform:translate(-50%,0)
}
dialog {
  border:1px solid #e1e1e1;
  border-radius:12px;
  padding:0;
  box-shadow:0 30px 90px #00000055;
  width:500px;
  max-width:calc(100vw - 30px);
  color:#555555
}
dialog::backdrop {
  background:#12121270;
  backdrop-filter:blur(5px)
}
.search-dialog-head {
  padding:18px;
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid #eaeaea
}
.search-dialog-head input {
  border:0;
  outline:0;
  flex:1;
  min-width:0;
  font-size:12px
}
.search-dialog-head button {
  background:#f3f3f3;
  border:1px solid #e4e4e4;
  border-radius:4px;
  font-size:9px;
  padding:4px 5px;
  color:#969696
}
.search-dialog-head svg {
  width:17px;
  height:17px;
  color:#a4a4a4
}
#search-results {
  padding:8px;
  min-height:120px
}
#search-results button {
  border:0;
  background:#ffffff;
  width:100%;
  padding:12px;
  border-radius:5px;
  text-align:left;
  display:flex;
  gap:12px;
  align-items:center;
  font-size:12px
}
#search-results button:hover {
  background:#f3f3f3
}
#search-results button small {
  margin-left:auto;
  color:#a1a1a1;
  font-size:9px
}
#search-results p {
  font-size:12px;
  padding:15px;
  color:#9f9f9f
}
.search-footnote {
  font-size:8px;
  padding:12px 20px;
  margin:0;
  background:#fafafa;
  color:#a9a9a9;
  border-top:1px solid #ededed
}
.project-cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:23px
}
.project-card {
  border:1px solid #e8e8e8;
  border-radius:7px;
  padding:17px 14px;
  background:#fcfcfc
}
.project-card>span:first-child {
  display:inline-flex;
  padding:7px;
  background:#ebebeb;
  color:#939393;
  border-radius:6px
}
.project-card svg {
  width:15px;
  height:15px
}
.project-card h4 {
  font-size:11px;
  font-weight:500;
  margin:17px 0 7px
}
.project-card p {
  font-size:8px;
  line-height:1.7;
  color:#9d9d9d;
  margin:0 0 20px
}
.project-progress {
  height:3px;
  background:#eeeeee;
  border-radius:3px;
  margin-bottom:8px
}
.project-progress>i {
  height:100%;
  background:#a8a8a8;
  display:block;
  border-radius:3px
}
.project-card small {
  font-size:7px;
  color:#a3a3a3
}
.crm-table {
  width:100%;
  border-collapse:collapse;
  margin-top:20px;
  text-align:left;
  font-size:9px
}
.crm-table th {
  color:#b1b1b1;
  font-size:8px;
  font-weight:400;
  padding:9px 0;
  border-bottom:1px solid #eaeaea
}
.crm-table td {
  padding:13px 0;
  border-bottom:1px solid #eeeeee;
  color:#8b8b8b
}
.crm-table td:first-child {
  color:#696969
}
.crm-table td .avatar {
  vertical-align:middle;
  margin-right:8px
}
.workflow-steps {
  margin-top:27px;
  display:flex;
  align-items:center;
  gap:10px
}
.workflow-step {
  padding:20px 15px;
  border:1px solid #e3e3e3;
  border-radius:8px;
  flex:1;
  background:#fcfcfc
}
.workflow-step>svg {
  color:#9e9e9e;
  margin-bottom:10px
}
.workflow-step strong {
  display:block;
  font-size:10px;
  font-weight:500;
  color:#7d7d7d
}
.workflow-step p {
  font-size:8px;
  color:#ababab;
  line-height:1.8
}
.workflow-arrow {
  color:#bcbcbc;
  font-size:14px
}
.workflow-demo-link {
  display:inline-flex;
  margin-top:20px;
  border:0;
  background:#f0f0f0;
  color:#888888;
  padding:9px 11px;
  border-radius:4px;
  font-size:9px
}
.diagram-demo {
  margin:20px auto 0;
  max-width:520px;
  position:relative;
  min-height:240px;
  display:flex;
  align-items:center;
  flex-direction:column
}
.diagram-node {
  border:1px solid #e1e1e1;
  background:#fbfbfb;
  border-radius:6px;
  padding:13px 22px;
  color:#8b8b8b;
  font-size:10px;
  z-index:2
}
.diagram-node.root {
  background:#e9e9e9;
  color:#7f7f7f
}
.diagram-stem {
  height:25px;
  width:1px;
  background:#d0d0d0
}
.diagram-branches {
  display:flex;
  width:90%;
  justify-content:space-between;
  position:relative
}
.diagram-branches:before {
  content:'';
  position:absolute;
  height:1px;
  top:-1px;
  left:17%;
  right:17%;
  background:#d0d0d0
}
.diagram-branch {
  display:flex;
  flex-direction:column;
  align-items:center;
  flex:1
}
.diagram-task {
  border:0;
  font-size:8px;
  background:#f3f3f3;
  color:#a3a3a3;
  padding:5px 8px;
  border-radius:4px;
  margin-top:12px
}
.file-list {
  display:grid;
  gap:8px;
  margin-top:21px
}
.file-item {
  display:flex;
  align-items:center;
  gap:11px;
  padding:14px;
  border:1px solid #e9e9e9;
  border-radius:6px;
  color:#929292
}
.file-item>svg {
  width:21px;
  height:21px
}
.file-item strong {
  font-size:10px;
  font-weight:450;
  display:block
}
.file-item small {
  font-size:8px;
  display:block;
  color:#b1b1b1;
  margin-top:3px
}
.file-item>.tag {
  margin-left:auto
}
@media(min-width:1600px) {
  .hero-inner {
    padding-top:75px
  }
  h1 {
    font-size:90px
  }
  .workspace-wrap {
    margin-top:100px
  }
}
@media(max-width:1200px) {
  .section-wrap,.workspace-wrap {
    margin-left:40px;
    margin-right:40px
  }
  .intro-grid {
    gap:60px
  }
  .pricing {
    gap:60px
  }
  .workspace-wrap {
    margin-top:75px
  }
  .demo-panel {
    padding:25px
  }
  .role-row>div {
    gap:22px
  }
}
@media(max-width:900px) {
  .nav-wrap {
    padding:0 28px
  }
  .nav-wrap nav {
    margin-left:20px;
    gap:22px
  }
  .nav-actions {
    gap:18px
  }
  .section-wrap,.workspace-wrap {
    margin-left:28px;
    margin-right:28px
  }
  h1 {
    font-size:68px;
    letter-spacing:-3.5px
  }
  .hero-inner {
    padding-top:55px
  }
  .workspace {
    height:490px
  }
  .app-sidebar {
    width:170px;
    padding:15px 10px
  }
  .workspace-name {
    font-size:9px;
    gap:6px
  }
  .workspace-initial {
    width:23px;
    height:23px
  }
  .demo-panel {
    padding:24px 20px
  }
  .app-topbar {
    padding:0 18px
  }
  .demo-label {
    display:none
  }
  .task-row {
    font-size:9px;
    gap:7px
  }
  .task-row .tag {
    font-size:7px
  }
  .task-row .avatar {
    display:none
  }
  .task-date {
    min-width:25px;
    font-size:7px
  }
  .intro-grid {
    gap:40px
  }
  h2 {
    font-size:36px;
    letter-spacing:-1.5px
  }
  .intro-copy {
    font-size:12px
  }
  .role-row {
    align-items:flex-start;
    gap:20px;
    line-height:1.6
  }
  .role-row>div {
    gap:19px;
    font-size:10px
  }
  .feature-card {
    padding:27px 24px 0
  }
  .connection-map {
    margin-left:-15px;
    margin-right:-15px
  }
  .map-node {
    font-size:7px;
    padding:8px
  }
  .node-type {
    display:none
  }
  .map-client {
    left:0
  }
  .map-task {
    left:0
  }
  .map-project {
    right:0
  }
  .outside-feature {
    padding:32px 28px;
    gap:24px;
    grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)
  }
  .outside-copy h3 {
    font-size:30px
  }
  .outside-copy p {
    font-size:11px
  }
  .outside-copy .eyebrow {
    font-size:6px
  }
  .request-card {
    padding:22px 18px 18px
  }
  .request-card h4 {
    font-size:21px
  }
  .returned-update {
    padding:12px 10px;
    gap:7px
  }
  .possibility-grid {
    gap:27px
  }
  .pricing {
    padding:85px 0;
    gap:40px
  }
  .faq {
    padding:0 0 80px;
    gap:40px
  }
  .price-card {
    padding:24px
  }
  .import-note p span {
    display:block
  }
  .footer-main>span {
    display:none
  }
  .project-cards {
    gap:8px
  }
  .project-card {
    padding:13px 10px
  }
  .workflow-step {
    padding:15px 10px
  }
  .workflow-step strong {
    font-size:9px
  }
}
@media(max-width:650px) {
  html {
    scroll-padding-top:25px
  }
  .site-header {
    height:68px
  }
  .nav-wrap {
    padding:0 21px
  }
  .brand {
    font-size:24px
  }
  .brand-mark {
    width:24px;
    height:24px
  }
  .nav-wrap nav {
    display:none;
    position:absolute;
    top:67px;
    left:0;
    right:0;
    background:#111111;
    margin:0;
    padding:22px;
    flex-direction:column;
    border-bottom:1px solid #ffffff12;
    gap:24px
  }
  .nav-wrap nav.is-open {
    display:flex
  }
  .nav-actions .login {
    display:none
  }
  .nav-actions .button {
    min-height:31px;
    padding:0 10px;
    font-size:10px;
    gap:9px
  }
  .nav-actions .button svg {
    width:12px;
    height:12px
  }
  .nav-actions {
    margin-left:auto;
    margin-right:18px
  }
  .menu-toggle {
    display:flex;
    flex-direction:column;
    gap:5px;
    padding:8px 0 8px 8px;
    background:none;
    border:0
  }
  .menu-toggle span {
    height:1px;
    width:17px;
    background:#a7a7a7
  }
  .hero {
    padding-top:68px
  }
  .hero-inner {
    padding:48px 19px 0
  }
  .hero-kicker {
    font-size:8px;
    gap:7px;
    padding:7px 10px
  }
  .pill-divider {
    margin:0
  }
  .hero-kicker>span:last-child {
    margin-left:0
  }
  h1 {
    font-size:clamp(38px,10.5vw,62px);
    letter-spacing:-2.2px;
    line-height:1.08;
    margin:25px -4px 20px
  }
  .hero-copy {
    font-size:12px;
    line-height:1.85;
    max-width:320px
  }
  .hero-actions {
    gap:8px;
    margin-top:24px
  }
  .hero-actions .button {
    padding:0 13px;
    min-height:40px;
    font-size:10px;
    gap:10px
  }
  .hero-actions .button svg {
    width:13px;
    height:13px
  }
  .hero-reassurance {
    font-size:7px;
    margin-top:13px
  }
  .hero-reassurance span {
    margin:0 5px
  }
  .aurora-wrap {
    top:100px;
    height:680px;
    left:-150px;
    right:-150px
  }
  .workspace-wrap {
    margin:64px 15px 0;
    padding-bottom:20px
  }
  .preview-caption {
    font-size:8px;
    margin-bottom:10px;
    gap:10px
  }
  .preview-caption>span:last-child {
    font-size:5px;
    letter-spacing:.6px;
    gap:3px
  }
  .preview-caption>span {
    gap:6px
  }
  .preview-caption svg {
    width:10px;
    height:10px
  }
  .workspace {
    height:460px;
    border-radius:8px;
    box-shadow:0 0 0 4px #ffffff06,0 20px 70px #00000066;
    display:block
  }
  .app-sidebar {
    width:100%;
    height:77px;
    padding:0;
    border-right:0;
    border-bottom:1px solid #e7e7e7;
    background:#f7f7f7
  }
  .workspace-name,.app-search,.sidebar-group-label,.favorite,.sidebar-footer {
    display:none
  }
  .app-sidebar:before {
    content:'Studio workspace';
    font-size:9px;
    font-weight:500;
    color:#8a8a8a;
    padding:13px 14px 6px;
    display:block
  }
  .app-nav {
    flex-direction:row;
    overflow-x:auto;
    gap:4px;
    padding:0 8px 8px;
    scrollbar-width:none
  }
  .app-nav::-webkit-scrollbar {
    display:none
  }
  .app-nav button {
    padding:7px 8px;
    font-size:9px;
    gap:5px;
    white-space:nowrap;
    flex-shrink:0
  }
  .app-nav svg {
    width:11px;
    height:11px
  }
  .app-nav .nav-count {
    display:none
  }
  .app-nav button:nth-child(4) {
    font-size:0
  }
  .app-nav button:nth-child(4):after {
    content:'Forms';
    font-size:9px
  }
  .app-nav button:nth-child(6) {
    display:none
  }
  .demo-main {
    height:calc(100% - 77px)
  }
  .app-topbar {
    height:32px;
    font-size:7px;
    padding:0 14px
  }
  .app-topbar .avatar {
    width:16px;
    height:16px;
    font-size:5px
  }
  .slash {
    padding:0 5px
  }
  .demo-panel {
    height:calc(100% - 32px);
    padding:19px 16px
  }
  .demo-greeting {
    font-size:8px
  }
  .demo-title-row h3 {
    font-size:18px;
    letter-spacing:-.5px
  }
  .demo-title-row>span {
    font-size:7px
  }
  .demo-subtitle {
    font-size:8px;
    margin:5px 0 14px;
    max-width:95%
  }
  .work-stats {
    gap:13px;
    font-size:7px
  }
  .work-stats strong {
    font-size:11px
  }
  .view-toolbar {
    margin-top:11px
  }
  .demo-filters {
    gap:16px
  }
  .demo-filters button {
    font-size:8px;
    padding:8px 0
  }
  .demo-filters button span {
    font-size:6px
  }
  .filter-label {
    font-size:7px
  }
  .task-group-label {
    padding:12px 0 6px;
    font-size:7px
  }
  .task-row {
    min-height:35px;
    gap:7px;
    font-size:8px
  }
  .task-check {
    width:11px;
    height:11px
  }
  .task-row .tag {
    font-size:6px;
    padding:2px 4px
  }
  .task-date {
    font-size:6px;
    min-width:21px
  }
  .demo-notice {
    margin-top:13px;
    padding:9px;
    font-size:7px;
    gap:7px
  }
  .demo-notice svg {
    width:12px;
    height:12px
  }
  .demo-bottom {
    font-size:6px;
    padding:12px 2px 0
  }
  .demo-bottom>span:last-child {
    display:none
  }
  .section-wrap {
    margin-left:22px;
    margin-right:22px
  }
  .intro {
    padding-top:65px;
    padding-bottom:35px
  }
  .eyebrow {
    font-size:7px;
    letter-spacing:1px;
    gap:6px
  }
  .section-index {
    font-size:7px;
    margin-right:3px
  }
  .intro-grid {
    display:block
  }
  h2 {
    font-size:33px;
    letter-spacing:-1.5px;
    line-height:1.17
  }
  .intro-grid h2 {
    margin-top:19px;
    margin-bottom:20px
  }
  .intro-copy {
    padding-top:0;
    font-size:12px;
    line-height:1.9;
    max-width:390px
  }
  .intro-copy p {
    margin-bottom:17px
  }
  .text-link {
    font-size:10px
  }
  .role-row {
    display:block;
    margin-top:30px;
    padding:17px 0
  }
  .role-row>span {
    font-size:8px
  }
  .role-row>div {
    gap:0;
    justify-content:space-between;
    font-size:9px;
    margin-top:13px
  }
  .connected {
    padding:25px 0 55px
  }
  .section-heading {
    display:block;
    margin-bottom:26px
  }
  .section-heading h2 {
    margin-top:19px
  }
  .section-heading>p {
    font-size:10px;
    line-height:1.8;
    margin-top:17px
  }
  .feature-grid {
    grid-template-columns:1fr;
    gap:14px
  }
  .feature-card {
    height:345px;
    padding:25px 24px 0
  }
  .feature-card h3 {
    font-size:17px
  }
  .feature-card>p {
    font-size:11px
  }
  .feature-icon {
    margin-bottom:13px
  }
  .mini-today {
    margin-top:18px
  }
  .feature-context {
    height:350px
  }
  .connection-map {
    max-width:420px;
    margin:0 auto
  }
  .map-node {
    font-size:8px;
    padding:9px
  }
  .map-client {
    top:28px;
    left:0
  }
  .map-project {
    right:0;
    top:55px
  }
  .map-task {
    left:0;
    top:135px
  }
  .map-file {
    right:0;
    top:168px
  }
  .map-center {
    left:47%;
    top:95px
  }
  .line-1 {
    left:20%;
    width:65%
  }
  .line-2 {
    left:37%;
    width:50%
  }
  .line-3 {
    left:23%;
    width:57%
  }
  .outside-feature {
    margin-top:14px;
    display:block;
    padding:28px 23px 20px
  }
  .outside-copy {
    padding:0 0 24px
  }
  .outside-copy .eyebrow {
    font-size:6px;
    letter-spacing:.65px
  }
  .outside-copy h3 {
    font-size:31px;
    margin:19px 0 17px
  }
  .outside-copy p {
    font-size:11px;
    max-width:350px
  }
  .outside-copy .outside-punchline {
    margin:14px 0
  }
  .outside-copy .text-link {
    margin-top:2px
  }
  .request-scene {
    max-width:420px;
    margin:0 auto
  }
  .request-card {
    padding:20px
  }
  .request-card h4 {
    font-size:23px
  }
  .possibilities {
    padding:52px 0 28px
  }
  .possibilities .section-heading {
    margin-bottom:26px
  }
  .possibility-grid {
    display:block
  }
  .possibility-grid article {
    padding:20px 0 18px
  }
  .possibility-grid article>svg {
    margin:2px 0 15px;
    width:20px;
    height:20px
  }
  .possibility-grid h3 {
    font-size:15px
  }
  .possibility-grid p {
    font-size:11px;
    max-width:100%;
    margin-bottom:0
  }
  .import-note {
    align-items:flex-start;
    gap:10px;
    padding-top:18px;
    position:relative;
    padding-bottom:30px;
    font-size:9px
  }
  .import-note>a {
    position:absolute;
    left:26px;
    bottom:0;
    font-size:8px
  }
  .import-note>svg {
    margin-top:3px
  }
  .pricing {
    display:block;
    padding:65px 0 55px
  }
  .pricing-story h2 {
    margin-top:18px
  }
  .pricing-story>p {
    font-size:11px;
    margin-bottom:20px
  }
  .launch-date {
    font-size:8px
  }
  .price-card {
    padding:25px;
    margin-top:32px
  }
  .price-card-top {
    font-size:10px
  }
  .price-badge {
    font-size:6px
  }
  .price-card li {
    font-size:10px
  }
  .price-card>.button {
    font-size:11px
  }
  .faq {
    display:block;
    padding:0 0 55px
  }
  .faq h2 {
    font-size:30px;
    margin-bottom:15px
  }
  .faq>.faq-list {
    margin-top:25px
  }
  .faq .eyebrow {
    font-size:6px
  }
  summary {
    font-size:11px;
    padding:17px 0
  }
  details p {
    font-size:10px
  }
  .closing {
    padding:52px 20px 47px
  }
  .closing h2 {
    font-size:47px;
    letter-spacing:-2px
  }
  .closing p {
    font-size:10px
  }
  .closing .eyebrow {
    font-size:6px;
    letter-spacing:1.2px
  }
  .closing-inner>.brand-mark {
    width:22px;
    height:22px
  }
  .closing-orbit {
    width:700px;
    height:600px;
    top:177px
  }
  .site-footer {
    padding:0 22px 20px
  }
  .footer-main {
    padding:24px 0;
    gap:20px
  }
  .footer-main .brand {
    font-size:21px
  }
  .footer-main .brand-mark {
    width:19px;
    height:19px
  }
  .footer-main>div {
    gap:13px;
    font-size:7px
  }
  .footer-bottom {
    font-size:6px;
    padding-top:18px
  }
  .footer-bottom>span:nth-child(2) {
    display:none
  }
  .footer-bottom>div {
    gap:15px
  }
  .project-cards {
    gap:8px;
    margin-top:17px
  }
  .project-card {
    padding:12px 9px
  }
  .project-card h4 {
    font-size:9px;
    margin-top:14px
  }
  .project-card p {
    font-size:7px;
    margin-bottom:15px
  }
  .project-card small {
    font-size:6px
  }
  .crm-table {
    font-size:8px;
    margin-top:13px
  }
  .crm-table th {
    font-size:6px
  }
  .crm-table td {
    padding:11px 0
  }
  .crm-table td .avatar {
    width:18px;
    height:18px;
    font-size:6px;
    margin-right:5px
  }
  .crm-table .tag {
    font-size:6px
  }
  .workflow-steps {
    gap:7px;
    margin-top:19px
  }
  .workflow-step {
    padding:12px 8px
  }
  .workflow-step strong {
    font-size:8px
  }
  .workflow-step p {
    font-size:7px
  }
  .workflow-step>svg {
    width:15px;
    height:15px
  }
  .workflow-arrow {
    font-size:10px
  }
  .workflow-demo-link {
    font-size:8px
  }
  .diagram-demo {
    min-height:200px;
    margin-top:16px
  }
  .diagram-node {
    padding:10px 15px;
    font-size:8px
  }
  .diagram-task {
    font-size:6px;
    padding:4px 5px
  }
  .diagram-branches {
    width:100%
  }
  .file-item {
    padding:11px
  }
  .file-item strong {
    font-size:9px
  }
  .file-item small {
    font-size:7px
  }
}
/* Keep the quiet palette readable, including the small product demonstration. */
.aurora-wrap {
  top:105px;
  background:#090909;
  mask-image:linear-gradient(to bottom,transparent,black 12%,black 80%,transparent)
}
.hero-reassurance {
  color:#a4a4a4;
  text-shadow:0 1px 8px #090909
}
.hero-reassurance span {
  color:#878787
}
.preview-caption {
  color:#dddddd
}
.demo-bottom {
  color:#a5a5a5
}
h2 span {
  color:#8a8a8a
}
.eyebrow {
  font-size:10px;
  color:#757575
}
.intro-copy {
  color:#727272
}
.role-row {
  color:#767676
}
.role-row>div {
  font-size:12px
}
.section-heading>p {
  font-size:14px;
  color:#737373
}
.feature-card>p {
  font-size:14px;
  color:#737373;
  line-height:1.75
}
.feature-card {
  height:405px
}
.feature-card h3 {
  font-size:20px
}
.outside-copy p {
  font-size:14px;
  color:#737373;
  line-height:1.85
}
.outside-copy .eyebrow {
  font-size:9px;
  color:#777777
}
.outside-copy h3 span {
  color:#848484
}
.outside-copy .text-link {
  font-size:12px
}
.possibility-grid p {
  font-size:14px;
  color:#737373
}
.possibility-grid h3 {
  font-size:17px
}
.import-note {
  font-size:12px
}
.import-note p span {
  color:#7c7c7c
}
.import-note>a {
  font-size:11px
}
.pricing-story>p {
  font-size:14px;
  color:#737373
}
.launch-date {
  font-size:11px;
  color:#787878
}
.price-card-top {
  font-size:12px;
  color:#6c6c6c
}
.price-description {
  font-size:13px;
  color:#717171
}
.price-card li {
  font-size:12px;
  color:#6d6d6d
}
.price>div {
  font-size:12px;
  color:#7f7f7f
}
.price-note {
  font-size:10px;
  color:#818181
}
.price-addon {
  display:grid;
  gap:5px;
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid #ececec;
  font-size:12px;
  line-height:1.6;
  color:#717171
}
.price-addon strong {
  color:#454545;
  font-weight:550
}
.price-addon small {
  font-size:11px;
  color:#717171
}
.team-link {
  font-size:11px;
  color:#767676
}
.price-badge {
  font-size:7px;
  color:#777777
}
.faq .eyebrow {
  font-size:9px
}
.faq .text-link {
  font-size:12px
}
summary {
  font-size:14px
}
details p {
  font-size:13px;
  color:#757575
}
.closing p {
  font-size:14px;
  color:#adadad
}
.closing-note {
  font-size:10px;
  color:#979797
}
.footer-main>span {
  font-size:11px;
  color:#8f8f8f
}
.footer-main>div {
  font-size:11px;
  color:#a4a4a4
}
.footer-bottom {
  font-size:10px;
  color:#8b8b8b
}
.app-nav button {
  color:#727272
}
.app-nav button.active {
  color:#3e3e3e
}
.app-search {
  color:#7a7a7a
}
.demo-greeting,.demo-subtitle {
  color:#848484
}
.demo-title-row>span {
  color:#858585
}
.work-stats {
  color:#868686
}
.demo-filters button {
  color:#808080
}
.task-name {
  color:#656565
}
.task-date {
  color:#888888
}
.task-date.today {
  color:#797979
}
.demo-notice {
  color:#808080
}
.demo-notice strong {
  color:#676767
}
.tag {
  color:#7f7f7f
}
.purple-tag {
  color:#787878
}
.green-tag {
  color:#868686
}
.amber-tag {
  color:#898989
}
.project-card p {
  color:#888888
}
.crm-table td {
  color:#7c7c7c
}
.mini-today {
  color:#6f6f6f
}
.feature-work .mini-today {
  margin-top:22px
}
.map-node {
  color:#797979
}
@media(max-width:900px) {
  .feature-card>p {
    font-size:13px
  }
  .outside-copy p {
    font-size:12px
  }
  .outside-copy .eyebrow {
    font-size:7px
  }
  .section-heading>p {
    font-size:12px
  }
  .possibility-grid p {
    font-size:13px
  }
  .pricing-story>p {
    font-size:13px
  }
}
@media(max-width:650px) {
  .aurora-wrap {
    top:147px
  }
  .hero-reassurance {
    font-size:8px
  }
  .eyebrow {
    font-size:8px
  }
  .intro-copy {
    font-size:13px
  }
  .role-row>div {
    font-size:10px
  }
  .section-heading>p {
    font-size:12px
  }
  .feature-card {
    height:365px
  }
  .feature-card h3 {
    font-size:19px
  }
  .feature-card>p {
    font-size:13px
  }
  .feature-context {
    height:380px
  }
  .outside-copy p {
    font-size:13px
  }
  .outside-copy .eyebrow {
    font-size:7px;
    letter-spacing:.6px
  }
  .outside-copy .text-link {
    font-size:11px
  }
  .possibility-grid p {
    font-size:13px
  }
  .possibility-grid h3 {
    font-size:16px
  }
  .import-note {
    font-size:11px
  }
  .import-note>a {
    font-size:10px
  }
  .pricing-story>p {
    font-size:13px
  }
  .launch-date {
    font-size:10px
  }
  .price-card-top {
    font-size:11px
  }
  .price-card li {
    font-size:11px
  }
  .faq .eyebrow {
    font-size:7px
  }
  .faq .text-link {
    font-size:11px
  }
  summary {
    font-size:13px
  }
  details p {
    font-size:12px
  }
  .closing p {
    font-size:12px
  }
  .closing-note {
    font-size:9px
  }
  .footer-main>div {
    font-size:8px
  }
  .footer-bottom {
    font-size:8px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
}
.preview-tools {
  gap:22px!important
}
.interactive-preview-label {
  display:inline-flex;
  align-items:center;
  gap:7px
}
.motion-toggle {
  display:inline-flex;
  align-items:center;
  background:none;
  border:0;
  padding:3px 0;
  color:#b6b6b6;
  font-size:9px;
  letter-spacing:0;
  font-weight:400
}
.motion-toggle:hover {
  color:#fff
}
@media(max-width:650px) {
  .interactive-preview-label {
    display:none
  }
  .preview-tools {
    gap:0!important
  }
  .motion-toggle {
    font-size:8px
  }
}
/* Give the living crescent a clear stage before the product enters. */
.workspace-wrap {
  margin-top:138px
}
@media(min-width:1600px) {
  .workspace-wrap {
    margin-top:150px
  }
}
@media(max-width:1200px) {
  .workspace-wrap {
    margin-top:130px
  }
}
@media(max-width:650px) {
  .workspace-wrap {
    margin-top:110px
  }
}
.aurora-wrap {
  top:155px
}
@media(max-width:650px) {
  .aurora-wrap {
    top:177px
  }
}
.preview-tools {
  background:#090909d9;
  border:1px solid #ffffff1a;
  border-radius:5px;
  padding:3px 8px
}
.motion-toggle {
  color:#d0d0d0
}
.preview-caption>span:first-child {
  background:#09090980;
  border-radius:4px;
  padding:4px 6px
}
/* A single coordinate system keeps every connection attached at every size. */
.feature-context {
  height:445px
}
.feature-work {
  height:445px
}
.context-map {
  margin:14px auto 0;
  max-width:440px
}
.context-diagram {
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
  stroke-width:1.25
}
.context-connections {
  stroke:#c6c6c6;
  fill:none
}
.context-tile rect {
  fill:#fff;
  stroke:#e0e0e0
}
.context-tile use {
  color:#787878;
  stroke-width:1.5
}
.context-tile text {
  fill:#686868;
  stroke:none;
  font:11px var(--font);
  font-weight:450
}
.context-hub>circle:first-child {
  fill:#f3f3f3;
  stroke:#dedede
}
.context-hub .context-logo {
  fill:#fff;
  stroke:#666;
  stroke-width:1.2
}
.context-hub .context-logo-half {
  fill:#666;
  stroke:none
}
.context-hub text {
  fill:#898989;
  stroke:none;
  font:10px var(--font);
  letter-spacing:-.3px
}
.context-ports {
  stroke:none;
  fill:#aaa
}
.mobile-login {
  display:none
}
.aurora-wrap {
  top:110px
}
@media(max-width:900px) and (min-width:651px) {
  .feature-context {
    height:430px
  }
  .feature-work {
    height:430px
  }
  .feature-context {
    padding-left:22px;
    padding-right:22px
  }
  .context-map {
    margin-top:24px
  }
}
@media(max-width:650px) {
  .feature-context {
    height:auto;
    min-height:380px;
    padding-bottom:18px
  }
  .feature-work {
    height:365px
  }
  .context-map {
    margin-top:17px
  }
  .context-tile text {
    font-size:12px
  }
  .nav-wrap nav .mobile-login {
    display:block;
    border-top:1px solid #ffffff1a;
    padding-top:20px;
    color:#eee
  }
  .nav-actions .button {
    min-height:38px;
    font-size:11px;
    padding:0 11px
  }
  .nav-actions {
    margin-right:10px
  }
  .menu-toggle {
    height:44px;
    width:32px;
    justify-content:center;
    align-items:flex-end
  }
  .hero-actions .button {
    min-height:44px;
    font-size:11px
  }
  .hero-actions {
    flex-wrap:wrap
  }
  .hero-reassurance {
    font-size:10px;
    line-height:1.8
  }
  .hero-reassurance span {
    margin:0 4px
  }
  .aurora-wrap {
    top:157px
  }
}
.context-map {
  max-width:420px
}
@media(max-width:650px) {
  .context-tile text {
    font-size:13px
  }
}
/* Static progress classes preserve the approved sample under the production CSP. */
.project-progress>.progress-65 {
  width:65%
}
.project-progress>.progress-40 {
  width:40%;
  background:#b7b7b7
}
.project-progress>.progress-80 {
  width:80%;
  background:#bcbcbc
}