.houzz-home{
  display:grid;
  gap:22px;
}

.home-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
}

.home-company{
  display:flex;
  align-items:center;
  gap:16px;
}

.home-avatar{
  width:42px;
  height:42px;
  border-radius:10px;
  background:#e9e3d8;
  border:1px solid var(--line-soft);
  position:relative;
}

.home-avatar::before{
  content:"";
  position:absolute;
  inset:10px 12px 16px;
  border-radius:999px 999px 8px 8px;
  background:#d6cec1;
}

.home-company-name{
  font-size:20px;
  font-weight:800;
  color:var(--text);
}

.get-started-card{
  padding:22px 20px 18px;
}

.get-started-title{
  font-size:20px;
  font-weight:800;
  margin:0 0 18px;
}

.get-started-grid.compact{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
}

.start-item{
  text-align:center;
  padding:8px 12px 10px;
}

.start-icon{
  width:128px;
  height:92px;
  margin:0 auto 16px;
  position:relative;
}

.start-item h3{
  margin:0 0 8px;
  font-size:16px;
  font-weight:800;
}

.start-item p{
  margin:0 0 14px;
  color:var(--muted);
  line-height:1.45;
  font-size:14px;
  min-height:72px;
}

.start-watch{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
  font-size:13px;
  font-weight:700;
  color:var(--text);
}

.start-watch::before{
  content:"▶";
  font-size:12px;
}

.icon-profile::before,
.icon-profile::after,
.icon-floor::before,
.icon-floor::after,
.icon-estimate::before,
.icon-estimate::after,
.icon-payment::before,
.icon-payment::after{
  content:"";
  position:absolute;
}

.icon-profile::before{
  inset:18px 20px 14px;
  border-radius:8px;
  background:#ddd6c9;
}

.icon-profile::after{
  left:16px;
  top:10px;
  width:40px;
  height:40px;
  border-radius:8px;
  background:#ef5a37;
  box-shadow:
    38px 18px 0 -16px #fff,
    58px 22px 0 -19px #fff,
    38px 32px 0 -15px #fff,
    55px 36px 0 -18px #fff;
}

.icon-floor{
  overflow:visible;
}

.icon-floor::before{
  left:18px;
  top:24px;
  width:78px;
  height:46px;
  background:linear-gradient(135deg,#8aaeff,#5d82eb);
  clip-path:polygon(0 38%,54% 0,100% 26%,47% 62%);
}

.icon-floor::after{
  right:18px;
  top:26px;
  width:30px;
  height:44px;
  border-radius:6px;
  background:#2d2b2c;
  box-shadow:0 0 0 2px #d2ccc2 inset;
}

.icon-estimate::before{
  left:52px;
  top:16px;
  width:44px;
  height:56px;
  border-radius:4px;
  background:#efb01f;
  box-shadow:-42px 26px 0 -8px #6e6a67;
}

.icon-estimate::after{
  left:60px;
  top:24px;
  width:26px;
  height:36px;
  background:
    linear-gradient(#fff,#fff) 0 0/100% 2px no-repeat,
    linear-gradient(#fff,#fff) 0 10px/100% 2px no-repeat,
    linear-gradient(#fff,#fff) 0 20px/70% 2px no-repeat,
    linear-gradient(#fff,#fff) 0 30px/82% 2px no-repeat;
}

.icon-payment::before{
  left:22px;
  top:20px;
  width:102px;
  height:62px;
  border:5px solid #2d2b2c;
  border-radius:6px;
}

.icon-payment::after{
  right:6px;
  top:34px;
  width:52px;
  height:34px;
  border-radius:4px;
  background:#efb01f;
  box-shadow:-34px 8px 0 -6px #5abf3c;
}

.home-main-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 620px;
  gap:18px;
  align-items:start;
}

.home-left-stack{
  display:grid;
  gap:18px;
}

.home-upper-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:18px;
  align-items:stretch;
}

.projects-todo-stack{
  display:grid;
  gap:18px;
}

.project-preview-card,
.todo-card,
.home-doc-card,
.create-card{
  padding:20px;
}

.card-title-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:inherit;
}

.card-title-link::after{
  content:"›";
  font-size:28px;
  line-height:0.9;
  color:#2d2b2c;
}

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

.project-mini{
  min-height:158px;
  background:#fff;
  border:1px solid var(--line-soft);
  border-radius:16px;
  padding:16px 16px 14px;
  display:flex;
  flex-direction:column;
  position:relative;
}

.project-mini::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:5px;
  border-radius:16px 16px 0 0;
  background:#d9d1c4;
}

.project-mini.blue::before{ background:#376bf5; }
.project-mini.purple::before{ background:#7b49ef; }
.project-mini.orange::before{ background:#f15d39; }

.project-mini h4{
  margin:12px 0 8px;
  font-size:15px;
  line-height:1.35;
  min-height:42px;
}

.project-mini p{
  margin:0 0 14px;
  color:var(--muted);
  font-size:13px;
}

.project-mini .mini-open{
  margin-top:auto;
}

.mini-open{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:700;
  font-size:13px;
  color:var(--text);
}

.todo-card{
  min-height:318px;
}

.todo-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}

.todo-month{
  min-width:116px;
  min-height:34px;
  border-radius:10px;
  background:#e9e3d8;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
}

.todo-calendar{
  display:grid;
  grid-template-columns:44px 1fr 44px;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}

.todo-arrow{
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid var(--line-soft);
  background:#fff;
  box-shadow:0 3px 12px rgba(34,27,21,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  color:#6d665d;
}

.todo-days{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:10px;
  text-align:center;
}

.todo-day span{
  display:block;
  font-size:14px;
  color:#877d72;
  margin-bottom:8px;
}

.todo-day strong{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:999px;
  font-size:16px;
}

.todo-day.has-dot strong::after{
  content:"";
  width:10px;
  height:10px;
  border-radius:999px;
  background:#ef5a37;
  position:absolute;
  margin-left:22px;
  margin-top:-18px;
}

.todo-filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.todo-pill{
  min-height:34px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
}

.todo-pill.is-muted{
  color:#c9bfaf;
  border-color:#e7dfd3;
}

.todo-list{
  display:grid;
}

.todo-row{
  display:grid;
  grid-template-columns:30px minmax(0,1fr) minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  min-height:62px;
  border-top:1px solid var(--line-soft);
}

.todo-row:first-child{
  border-top:0;
}

.todo-row-icon{
  width:28px;
  height:28px;
  border-radius:6px;
  background:#c7f2fb;
  position:relative;
}

.todo-row-icon::before{
  content:"";
  position:absolute;
  inset:7px 8px;
  border-radius:3px;
  background:
    linear-gradient(#27bfd8,#27bfd8) 0 0/100% 2px no-repeat,
    linear-gradient(#27bfd8,#27bfd8) 0 8px/72% 2px no-repeat,
    radial-gradient(circle,#27bfd8 58%,transparent 60%) 0 0/4px 4px no-repeat,
    radial-gradient(circle,#27bfd8 58%,transparent 60%) 0 8px/4px 4px no-repeat;
}

.todo-project{
  color:#666055;
}

.todo-due{
  min-height:34px;
  padding:0 14px;
  border-radius:999px;
  background:#f7f3eb;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

.todo-show-more{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:10px;
  font-weight:700;
}

.todo-show-more::before{
  content:"⌄";
  font-size:22px;
  line-height:1;
}

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

.quick-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
}

.quick-icon{
  width:58px;
  height:58px;
  border-radius:16px;
  background:#f4efe6;
  position:relative;
}

.quick-icon::before,
.quick-icon::after{
  content:"";
  position:absolute;
}

.quick-file::before{ inset:16px 18px; background:#2d2b2c; clip-path:polygon(0 18%,72% 18%,72% 0,100% 28%,100% 100%,0 100%); }
.quick-contract::before{ inset:14px 16px; border:3px solid #2d2b2c; border-radius:4px; }
.quick-contract::after{ right:10px; bottom:8px; width:10px; height:12px; border:2px solid #8f867b; border-radius:3px; background:#fff; }
.quick-estimate::before{ inset:14px 18px; border-radius:4px; background:#2d2b2c; box-shadow:0 0 0 3px #f4efe6 inset; }
.quick-invoice::before{ inset:14px 17px; background:#2d2b2c; clip-path:polygon(0 0,76% 0,100% 24%,100% 100%,0 100%); }
.quick-retainer::before{ inset:15px 14px; border-radius:999px; background:#2d2b2c; clip-path:polygon(10% 40%,36% 40%,36% 24%,58% 24%,58% 40%,90% 40%,90% 56%,58% 56%,58% 72%,36% 72%,36% 56%,10% 56%); }
.quick-change::before{ inset:15px; border:3px solid #2d2b2c; border-radius:999px; }
.quick-change::after{ inset:20px; border-top:3px solid #2d2b2c; border-right:3px solid #2d2b2c; transform:rotate(45deg); }
.quick-task::before{ left:17px; top:15px; width:24px; height:28px; background:
  linear-gradient(#2d2b2c,#2d2b2c) 8px 0/16px 3px no-repeat,
  linear-gradient(#2d2b2c,#2d2b2c) 8px 10px/16px 3px no-repeat,
  linear-gradient(#2d2b2c,#2d2b2c) 8px 20px/16px 3px no-repeat,
  radial-gradient(circle,#2d2b2c 60%,transparent 62%) 0 0/4px 4px no-repeat,
  radial-gradient(circle,#2d2b2c 60%,transparent 62%) 0 10px/4px 4px no-repeat,
  radial-gradient(circle,#2d2b2c 60%,transparent 62%) 0 20px/4px 4px no-repeat; }
.quick-floor::before{ inset:14px; background:#2d2b2c; clip-path:polygon(0 45%,35% 10%,100% 10%,100% 80%,45% 80%,45% 45%); }
.quick-takeoff::before{ inset:16px 15px; border:3px solid #2d2b2c; }
.quick-takeoff::after{ right:8px; bottom:8px; width:10px; height:12px; border:2px solid #8f867b; border-radius:3px; background:#fff; }
.quick-log::before{ inset:14px 18px; background:#2d2b2c; box-shadow:0 0 0 3px #f4efe6 inset; }
.quick-time::before{ inset:15px; border:3px solid #2d2b2c; border-radius:999px; }
.quick-time::after{ left:28px; top:19px; width:3px; height:14px; background:#2d2b2c; box-shadow:6px 6px 0 0 #2d2b2c; transform-origin:bottom; transform:rotate(0deg); }
.quick-selection::before{ inset:14px; background:
  linear-gradient(#2d2b2c,#2d2b2c) 0 0/18px 18px no-repeat,
  linear-gradient(#2d2b2c,#2d2b2c) 24px 0/18px 18px no-repeat,
  linear-gradient(#2d2b2c,#2d2b2c) 0 24px/18px 18px no-repeat,
  linear-gradient(#2d2b2c,#2d2b2c) 24px 24px/18px 18px no-repeat; }
.quick-mood::before{ inset:14px; background:
  linear-gradient(#2d2b2c,#2d2b2c) 0 0/16px 16px no-repeat,
  linear-gradient(#2d2b2c,#2d2b2c) 20px 4px/20px 24px no-repeat,
  linear-gradient(#2d2b2c,#2d2b2c) 8px 24px/18px 18px no-repeat; }
.quick-lead::before{ left:20px; top:15px; width:18px; height:18px; border-radius:999px; background:#2d2b2c; }
.quick-lead::after{ left:15px; top:34px; width:28px; height:14px; border-radius:8px 8px 4px 4px; background:#2d2b2c; }

.quick-item span{
  font-size:13px;
  line-height:1.35;
}

.create-card.tall{
  display:grid;
  grid-template-rows:auto auto auto 1fr;
  gap:20px;
}

.credential-card,
.support-card{
  border-top:1px solid var(--line-soft);
  padding-top:18px;
}

.credential-carousel{
  display:grid;
  grid-template-columns:minmax(0,1fr) 160px;
  gap:16px;
  align-items:center;
}

.credential-card h3,
.support-card h3{
  margin:0 0 8px;
  font-size:18px;
  font-weight:800;
}

.credential-card p{
  margin:0 0 14px;
  color:var(--muted);
  line-height:1.45;
}

.credential-badge{
  width:132px;
  height:166px;
  border-radius:0;
  background:#111;
  margin:0 auto;
  position:relative;
  overflow:hidden;
}

.credential-badge::before{
  content:"";
  position:absolute;
  inset:16px 26px auto;
  height:56px;
  background:#5bd13d;
  clip-path:polygon(0 0,24% 0,24% 44%,52% 44%,52% 0,100% 0,100% 100%,0 100%);
}

.credential-badge::after{
  content:"Houzz Pro\A Certified";
  white-space:pre;
  position:absolute;
  left:20px;
  bottom:26px;
  color:#fff;
  font-weight:800;
  line-height:1.2;
}

.credential-dots{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:8px;
}

.credential-dots span{
  width:12px;
  height:12px;
  border-radius:999px;
  background:#dfd7cb;
}

.credential-dots span.is-active{
  background:#2d2b2c;
}

.support-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.support-box{
  min-height:76px;
  background:var(--surface-2);
  border:1px solid var(--line-soft);
  border-radius:12px;
  padding:18px 16px;
  font-weight:700;
  font-size:14px;
  display:flex;
  align-items:center;
}

.support-line{
  margin-top:18px;
  text-align:center;
}

.doc-pill-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.doc-pill{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--line);
  font-weight:700;
  font-size:13px;
  background:#fff;
}

.doc-pill.muted{
  color:#b0a79b;
  border-color:#e7dfd3;
}

.doc-row{
  display:grid;
  grid-template-columns:110px minmax(0,1fr) 170px 100px;
  gap:14px;
  align-items:center;
  padding:14px;
  border-radius:12px;
  background:#fff;
  border:1px solid var(--line-soft);
}

.doc-row-code{
  display:flex;
  align-items:center;
  gap:10px;
}

.doc-row-code::before{
  content:"";
  width:28px;
  height:28px;
  border-radius:6px;
  background:#c8f4ef;
  display:inline-block;
}

.status-chip.sent{
  justify-self:end;
}

.ideabook-card{
  width:220px;
  border:1px solid var(--line-soft);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}

.ideabook-cover{
  height:138px;
  background:#ece8df;
  position:relative;
}

.ideabook-cover::after{
  content:"0 ideas";
  position:absolute;
  right:10px;
  bottom:10px;
  min-height:24px;
  padding:0 10px;
  border-radius:999px;
  background:#5b5754;
  color:#fff;
  display:inline-flex;
  align-items:center;
  font-size:12px;
  font-weight:700;
}

.ideabook-body{
  display:grid;
  gap:6px;
  padding:14px;
}

.ideabook-body strong{
  font-size:15px;
}

.ideabook-body span{
  color:var(--muted);
}

@media (max-width:1480px){
  .home-main-grid{
    grid-template-columns:1fr 480px;
  }
  .home-upper-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:1280px){
  .home-main-grid{
    grid-template-columns:1fr;
  }
  .create-card.tall{
    grid-template-rows:auto auto auto;
  }
}

@media (max-width:980px){
  .get-started-grid.compact,
  .project-preview-list,
  .quick-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:760px){
  .get-started-grid.compact,
  .project-preview-list,
  .quick-grid,
  .support-grid{
    grid-template-columns:1fr;
  }
  .home-topbar,
  .todo-head{
    flex-direction:column;
    align-items:flex-start;
  }
  .home-upper-grid{
    grid-template-columns:1fr;
  }
  .doc-row{
    grid-template-columns:1fr;
  }
}