body {
 margin: 0;
 font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 background: #f6f7fb;
 color: #172033;
}

.container {
 max-width: 1180px;
 margin: 0 auto;
 padding: 32px 20px;
}

header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 56px;
}

.logo {
 font-weight: 800;
 font-size: 22px;
}
.logo a {
	text-decoration:none;
	color:green;
}


.nav a {
 margin-left: 20px;
 color: #4a5568;
 text-decoration: none;
 font-size: 15px;
}

.hero {
 text-align: center;
 max-width: 850px;
 margin: 0 auto 42px;
}

header .eyebrow {
 color: #5266d9;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: .08em;
 font-size: 13px;
 margin-bottom: 14px;
}

.hero h1 {
 font-size: clamp(42px, 7vw, 72px);
 line-height: 1;
 margin: 0;
 letter-spacing: -0.05em;
 font-weight:700;
}

.hero p {
 font-size: 21px;
 color: #526070;
 line-height: 1.5;
 margin: 0 auto;
 max-width: 720px;
}

.hero h2 {
	margin-top:0;
}

.tool-card {
 background: #fff;
 border-radius: 28px;
 box-shadow: 0 24px 80px rgba(20, 28, 45, 0.12);
 overflow: hidden;
 border: 1px solid #e5e8f0;
 padding:1rem;
}

.tool-header {
 padding: 24px;
 /* border-bottom: 1px solid #edf0f5; */
 display: flex;
 justify-content: space-between;
 gap: 20px;
 align-items: center;
 flex-wrap: wrap;
}

.tool-header h2 {
 margin: 0;
 font-size: 24px;
}

.tool-header p {
 margin: 6px 0 0;
 color: #667085;
}

.primary-btn {
 background: #172033;
 color: #fff;
 border: 0;
 padding: 13px 18px;
 border-radius: 999px;
 font-weight: 700;
 cursor: pointer;
}

.meeting-builder {
 display: grid;
 grid-template-columns: 330px 1fr;
 min-height: 560px;
}

.participants {
 border-right: 1px solid #edf0f5;
 padding: 24px;
 background: #fbfcff;
}

.participant {
 background: #fff;
 border: 1px solid #e5e8f0;
 border-radius: 18px;
 padding: 16px;
 margin-bottom: 14px;
}

.participant strong {
 display: block;
 margin-bottom: 4px;
}

.participant span {
 display: block;
 color: #667085;
 font-size: 14px;
}

.add-person {
 width: 100%;
 padding: 14px;
 border: 1px dashed #aab2c5;
 background: transparent;
 border-radius: 16px;
 font-weight: 700;
 color: #39465e;
 cursor: pointer;
}

/* .schedule-view {
 padding: 24px;
 overflow-x: auto;
} */

.schedule-view {
  min-width: 0;
  overflow-x: auto;
}

.recommendation {
 background: #eef7f0;
 border: 1px solid #cfe9d6;
 color: #244b2f;
 padding: 16px 18px;
 border-radius: 18px;
 margin-bottom: 24px;
}

.recommendation strong {
 display: block;
 margin-bottom: 4px;
 font-size: 18px;
}

.time-grid {
 min-width: 760px;
}
.time-grid-wrap {
 width: 100%;
   overflow-x: auto;
   overflow-y: hidden;
   padding-bottom: 8px;
}
.hours,
.person-row {
 display: grid;
 grid-template-columns: 120px repeat(24, 1fr);
 align-items: center;
}

.hours {
 font-size: 12px;
 color: #7a8498;
 margin-bottom: 10px;
}

.hours div {
 text-align: center;
}

.person-row {
 margin-bottom: 10px;
}

.person-name {
 font-weight: 700;
 font-size: 14px;
 color: #344054;
 padding-right: 12px;
}

.person-name small {
  display: block;
  font-weight: 500;
  color: #667085;
  font-size: 12px;
  margin-top: 3px;
}

.person-name-time {
	font-weight:normal;
	font-size:10px;
}

.hour {
 height: 42px;
 border-right: 1px solid #edf0f5;
 background: #f1f3f8;
}

.hour {
  display: grid;
  place-items: center;
  font-size: 11px;
  height: 42px;
  border-right: 1px solid #edf0f5;
  background: #f1f3f8;
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.hour.column-hover {
  filter: brightness(0.92);
  box-shadow: inset 0 0 0 2px rgba(23, 32, 51, 0.18);
}

.good-dot { background: #bbf7d0; }
.work-dot { background: #dbeafe; }
.okay-dot { background: #fef3c7; }
.bad-dot { background: #fee2e2; }

.work {
 background: #dbeafe;
}

.good {
 background: #bbf7d0;
}

.okay {
 background: #fef3c7;
}

.bad {
 background: #fee2e2;
}

.legend {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 14px;
  margin-top: 22px;
  font-size: 14px;
  color: #667085;
}

.legend span {
  display: grid;
  grid-template-columns: 14px max-content;
  gap: 6px;
  align-items: center;
}

.dot {
 width: 14px;
 height: 14px;
 border-radius: 4px;
 display: inline-block;
}

.features {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 18px;
 margin-top: 36px;
}

.feature {
 background: #fff;
 border: 1px solid #e5e8f0;
 border-radius: 22px;
 padding: 22px;
}

.feature h3 {
 margin-top: 0;
 font-size: 20px;
}

.feature p {
 color: #667085;
 line-height: 1.5;
}
.setup-card {
 padding-bottom: 0;
}

.setup-grid {
 padding: 24px;
}

/* .setup-row {
 display: grid;
 grid-template-columns: 1fr 1.4fr 180px 90px;
 gap: 14px;
 align-items: center;
 padding: 12px 0;
 border-bottom: 1px solid #edf0f5;
} */

/* .setup-head {
 color: #667085;
 font-size: 13px;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: .04em;
 padding-top: 0;
} */

.setup-row input {
 width: 100%;
 box-sizing: border-box;
 padding: 14px 15px;
 border: 1px solid #d9deea;
 border-radius: 14px;
 font-size: 15px;
 background: #fff;
}

.availability-pill {
 background: #eef2ff;
 border: 1px solid #dbe2ff;
 color: #39465e;
 border-radius: 999px;
 padding: 11px 14px;
 font-weight: 700;
 font-size: 14px;
 text-align: center;
}

.remove-btn {
 border: 0;
 background: transparent;
 color: #8a4350;
 font-weight: 700;
 cursor: pointer;
}

.setup-actions {
 background: #fbfcff;
 border-top: 1px solid #edf0f5;
 padding: 24px;
 display: grid;
 gap: 16px;
}

.team-name {
 font-weight: 700;
 color: #344054;
}

.team-name input {
 display: block;
 width: 100%;
 box-sizing: border-box;
 margin-top: 8px;
 padding: 14px 15px;
 border: 1px solid #d9deea;
 border-radius: 14px;
 font-size: 15px;
}

.large-btn {
 width: 100%;
 justify-content: center;
 font-size: 17px;
 padding: 16px 20px;
}

.setup-note {
 margin: 0;
 color: #667085;
 font-size: 14px;
 line-height: 1.5;
}
.team-name-panel {
 padding: 24px 24px 10px;
 background: #fbfcff;
 border-bottom: 1px solid #edf0f5;
}

.team-name-panel label {
 display: block;
 font-weight: 800;
 color: #344054;
 max-width: 620px;
}

.team-name-panel label span {
 font-weight: 600;
 color: #98a2b3;
 margin-left: 6px;
}

.team-name-panel input {
 display: block;
 width: 100%;
 box-sizing: border-box;
 margin-top: 8px;
 padding: 14px 15px;
 border: 1px solid #d9deea;
 border-radius: 14px;
 font-size: 15px;
 background: #fff;
}

.setup-grid {
 padding: 18px 24px 24px;
}

.setup-row {
 display: grid;
 grid-template-columns: 1fr 1.5fr 90px;
 gap: 14px;
 align-items: center;
 padding: 12px 0;
 /* border-bottom: 1px solid #edf0f5; */
}

.setup-head {
 color: #667085;
 font-size: 13px;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: .04em;
 padding-top: 0;
}

.setup-row input {
 width: 100%;
 box-sizing: border-box;
 padding: 14px 15px;
 border: 1px solid #d9deea;
 border-radius: 14px;
 font-size: 15px;
 background: #fff;
}

.remove-btn {
 border: 0;
 background: transparent;
 color: #8a4350;
 font-weight: 700;
 cursor: pointer;
}

.setup-actions {
 background: #fbfcff;
 border-top: 1px solid #edf0f5;
 padding: 24px;
 display: grid;
 gap: 14px;
}

.large-btn {
 width: 100%;
 justify-content: center;
 font-size: 17px;
 padding: 16px 20px;
}
.city-autocomplete {
  position: relative;
}

.city-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  /* border: 1px solid #d9deea; */
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(20, 28, 45, 0.14);
  overflow: hidden;
  z-index: 20;
}

.city-option {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  background: #fff;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
}

.city-option:hover {
  background: #f6f7fb;
}    

.site-footer{
  /* margin-top:60px; */
  padding:20px 0;
  border-top:1px solid var(--line);
  font-size:13px;
  color:var(--muted);
}

.footer-inner{
  max-width:980px;
  margin:0 auto;
  padding:0 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}

.footer-left{
  line-height:1.4;
}

.footer-right a{
  color:var(--muted);
  text-decoration:none;
  margin-left:12px;
}

.footer-right a:hover{
  color:var(--text);
}
.no-mobile {display:inline-block;}
.mobile-only {display:none;}

.nav {
  display: grid;
  grid-auto-flow: column;
  gap: 20px;
  align-items: center;
}

.nav a,
.nav-dropbtn {
  color: #4a5568;
  text-decoration: none;
  font-size: 15px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

.nav-dropdown {
  position: relative;
}

.nav-menu {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid #e5e8f0;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(20, 28, 45, 0.14);
  padding: 10px;
  z-index: 100;
}

.nav-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  margin: 0;
}

.nav-menu a:hover {
  background: #f6f7fb;
}

.nav-dropdown:hover .nav-menu,
.nav-dropdown:focus-within .nav-menu {
  display: block;
}
   
@media (max-width: 900px) {
	.mobile-only {display:inline-block;}
	.no-mobile {display:none;}
	
	
 .setup-row,
 .setup-head {
   grid-template-columns: 1fr;
 }

 .setup-head {
   display: none;
 }

 .setup-row {
   background: #fbfcff;
   border: 1px solid #e5e8f0;
   border-radius: 18px;
   padding: 16px;
   margin-bottom: 14px;
 }

 .availability-pill {
   text-align: left;
 }
}

@media (max-width: 900px) {
 .meeting-builder {
   grid-template-columns: 1fr;
 }

 .participants {
   border-right: 0;
   border-bottom: 1px solid #edf0f5;
 }

 .features {
   grid-template-columns: 1fr;
 }

 header {
   margin-bottom: 36px;
 }
}